<!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'>&times;</span>
      <h2>大冒险问题</h2>
      <p id='dareQuestion'></p>
    </div>
  </div>

  <div id='truthModal' class='modal'>
    <div class='modal-content'>
      <span class='close'>&times;</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 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录