真心话大冒险小游戏 - 聚会活跃气氛必备!
<!DOCTYPE html>
<html>
<head>
<title>真心话大冒险</title>
<style>
.modal {
display: none;
position: fixed;
z-index: 999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
background-color: #fefefe;
margin: 20% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body>
<h1>真心话大冒险</h1>
<button id='dareBtn'>大冒险</button>
<button id='truthBtn'>真心话</button>
<div id='dareModal' class='modal'>
<div class='modal-content'>
<span class='close'>×</span>
<h2>大冒险问题</h2>
<p id='dareQuestion'></p>
</div>
</div>
<div id='truthModal' class='modal'>
<div class='modal-content'>
<span class='close'>×</span>
<h2>真心话问题</h2>
<p id='truthQuestion'></p>
</div>
</div>
<script src='truth-or-dare.js'></script>
</body>
</html>
// 定义大冒险问题数组
var dareQuestions = [
'唱一首你最喜欢的歌曲',
'对陌生人深情表白',
'模仿一只动物',
'用外语说一段自我介绍',
'倒立行走三步',
'闭上眼睛走一段距离',
'做五个俯卧撑',
'给一位朋友亲一下',
'对你最喜欢的人表白',
'和一位陌生人握手'
];
// 定义真心话问题数组
var truthQuestions = [
'你最喜欢的电影是什么?',
'曾经有没有对某个人有过特殊的感觉?',
'你最怕的一件事是什么?',
'你最羡慕别人的什么特质?',
'如果可以成为一位名人,你想成为谁?',
'你曾经撒过最大的谎言是什么?',
'你最后悔做过的事情是什么?',
'你有没有偷看别人的手机或电脑?',
'你的愿望是什么?',
'你最喜欢的食物是什么?'
];
// 获取弹框、关闭按钮和问题元素
var dareModal = document.getElementById('dareModal');
var truthModal = document.getElementById('truthModal');
var dareCloseBtn = document.querySelector('#dareModal .close');
var truthCloseBtn = document.querySelector('#truthModal .close');
var dareQuestionElement = document.getElementById('dareQuestion');
var truthQuestionElement = document.getElementById('truthQuestion');
// 点击“大冒险”按钮时,显示大冒险问题弹框
document.getElementById('dareBtn').addEventListener('click', function() {
var randomIndex = Math.floor(Math.random() * dareQuestions.length);
dareQuestionElement.textContent = dareQuestions[randomIndex];
dareModal.style.display = 'block';
});
// 点击“真心话”按钮时,显示真心话问题弹框
document.getElementById('truthBtn').addEventListener('click', function() {
var randomIndex = Math.floor(Math.random() * truthQuestions.length);
truthQuestionElement.textContent = truthQuestions[randomIndex];
truthModal.style.display = 'block';
});
// 点击大冒险问题弹框的关闭按钮时,关闭弹框
dareCloseBtn.addEventListener('click', function() {
dareModal.style.display = 'none';
});
// 点击真心话问题弹框的关闭按钮时,关闭弹框
truthCloseBtn.addEventListener('click', function() {
truthModal.style.display = 'none';
});
这款简单有趣的真心话大冒险小游戏,使用HTML和JavaScript编写,易于使用和分享。只需要将代码保存为两个文件('truth-or-dare.html'和'truth-or-dare.js'),并在浏览器中打开HTML文件,即可开始游戏!
这款游戏非常适合在聚会、朋友聚餐等场合使用,可以帮助大家快速破冰,活跃气氛,增进感情。赶快试试吧!
原文地址: https://www.cveoy.top/t/topic/R3S 著作权归作者所有。请勿转载和采集!