《用Chrome学编程》真心话大冒险

394 阅读16分钟

truth_or_dare

真心话大冒险 在线地址: https://zhaoolee.com/ProgrammingWithChrome/zhaoolee_truth_or_dare/

真心话大冒险是一个简单易行的小游戏, 具体规则一般为2人时,可利用猜拳决定;3人时,可利用手心手背决定;如果有很多人,可以抽牌,通常来说抽中大鬼的那位就要选择真心话还是大冒险。

  • 选择真心话,则由胜方随意问输者问题,输者必须全部如实回答;
[
    "你的初吻是几岁?被谁夺取的?",
    "你的初恋是几岁?是谁?",
    "大学到现在共挂过几门课?",
    "你吻过多少人?",
    "如果再给你一个机会,回到高中时代,最想对哪位异性说哪些话?",
    "你第一个喜欢的异性叫什么名字?",
    "你曾经意淫过在场的哪一位?如果过去没有的话,你现在会选哪一位作为YY(意淫的拼音缩写)对象?",
    "你对自己的梦中情人的要求是什么?",
    "让你一直念念不忘的一位异性的名字?原因?",
    "谈过几次恋爱?",
    "每天睡觉前都会想起的人是谁?",
    "你最怕的事情或东西是什么(说出三件)?",
    "你会不会在意ta的过去,为什么?",
    "打算什么时候结婚?",
    "现在心里最想念的异性叫什么名字?",
    "第一次爱的人对你产生过什么影响?",
    "你在意你的老婆(老公)不是处女(处男)吗?",
    "你会为了爱情牺牲一切,包括生命吗?",
    "结婚后想生男孩还是女孩?说出原因.",
    "和多少异性有过非恋爱的暧昧关系?",
    "你考试作弊使用过哪些手段?",
    "做过最丢脸的事情是什么?",
    "现在想被有钱人包养么?",
    "请说出在座谁昨天没有洗澡?",
    "觉得失去什么最可怕?",
    "你觉得自己什么时候身体发育成熟的?",
    "你们家里谁掌管钱财?",
    "如果你现在心情不好,会怎样?",
    "你最喜欢的小说是什么?",
    "你最害怕的事情或东西是什么(说出3件)?",
    "你觉得自己放的屁臭不臭?",
    "到目前为止写过多少封情书?",
    "自己做过最丢脸的事是什么?",
    "用四个字形容你现在的生活状态?",
    "晚上睡觉要上几次厕所?",
    "在座的人中,你最想打的人是谁?",
    "收到过最难忘的礼物是什么?",
    "你最短的一次恋爱是什么情况?",
    "你觉得异性穿什么样式的内裤最性感?",
    "今天拉了几次屎?",
    "你现在穿什么牌子的内衣?",
    "你跟几个异性上过床?",
    "多久换一次内裤?",
    "你喜欢裸睡么?",
    "你觉得自己最郁闷的外号是什么?",
    "和恋人的身体接触到哪一步了?",
    "你一共收藏了多少黄色小电影?",
    "当过第三者么?",
    "你认为在座谁最性感?",
    "和恋人在一起ML的时候叫错了名字怎么办?",
    "认同没有性的爱情么?",
    "你最近一次做春梦是什么样子的?",
    "你怎样看待性爱?",
    "你的梦中情人是谁?如果没有,请说出你希望自己的梦中情人是什么样子?",
    "在自己最爱的人面前做过最囧的事是什么?",
    "你觉得自己长的如何?",
    "第一次ML是什么感觉?",
    "去你喜欢的人家里突然想拉肚子怎么办?",
    "你的胸围是多少?",
    "初吻是在什么情况下没有的?",
    "最奢侈的一次消费是什么?",
    "你认为在座的哪一位异性可以成为你的性幻想对象?",
    "你最多同时和几个人恋爱?",
    "你以后想干什么?你的理想职业是什么?",
    "说说你对我的真实评价?",
    "最让自己感动的一件事是什么?",
    "现在你心里最喜欢的人是谁?",
    "目前为止你做过的最疯狂的事是什么?",
    "如果给你一个机会去世界上任何一个地方旅行你会去哪里?",
    "如果时间能倒流你希望回到哪一时间?",
    "最喜欢的食物是什么?",
    "假如你的爱人要出国,你会怎么做?",
    "目前最大的愿望?",
    "你觉得远距离恋爱是否注定要分开?那么如果喜欢上一个遥远国度的人,你是否会选择跟他走?",
    "我和你恋人同时约你,你会陪谁?",
    "世上真的有真爱吗?你眼中的真爱是什么样的?",
    "情人节最想收到什么礼物?",
    "喜欢看什么动画片?",
    "你前任结婚了,你愿意参加他/她婚礼吗?",
    "半夜遇见劫匪,他说不唱歌不让你走,你会唱什么?",
    "说真的,你整过容么?",
    "你觉得你本人好看,还是照片好看?",
    "你心目中最想养的宠物是什么?",
    "你的某个长得还不错的异性朋友半夜给你打电话要和你出去开房ML,你怎么办?",
    "如果让你kiss现场的某一位异性,你会选择谁?为什么?",
    "你还是处女/男吗?"
]
  • 选择大冒险,则胜方随意出任何行为问题由输方尝试完成
[
    "冲到门外撕心裂肺的喊“台湾回归啦!台湾回归啦!大家快看中央一台……”(跟真有那么回事似的)",
    "请kiss在本桌或本教室离你最近的一位异性同学三秒钟",  
    "请在现场选一位异性同学,向他或她表白",
    "站到凳子上表演大猩猩捶胸呐喊动作",
    "学超级名模走秀,绕桌子或教室一圈",
    "与本桌或本教室离你最近的一位异性同学拥抱十秒钟。", 
    "找在场的一位异性情歌对唱。(邀请,三次失败罚表演)",
    "和坐你右边的同学深情对视并对她或他唱《老鼠爱大米》中的高潮部分。",
    "和离你最近的一位同性同学十指相扣10秒,并看着对方说眼睛含情脉脉地说:我爱你。",
    "右手捏住左耳垂,弯下腰,顺时针转10圈,再金鸡独立15秒不许倒。",
    "背一位异性绕场地2圈.",
    "做一个大家都满意的鬼脸.",
    "抱一位异性直到下一轮真心话大冒险结束.",
    "向一位异性表白3分钟.",
    "与一位异性十指相扣,对视10秒.",
    "邀请一位异性为你唱情歌,或邀请一位异性与你情歌对唱.",
    "做自己最性感,最妩媚的表情或动作.",
    "吃下朋友给你夹的任何菜.",
    "亲在场的一位异性,部位不限.",
    "神情的吻墙10秒.",
    "抓着铁门喊”放我出去!”",
    "男的用胳膊从正面量女的胸围or女的量男的腰围or臀围.",
    "一人先用嘴吸住一纸牌,另一人用嘴从另一面将纸牌吸住移走.",
    "女生仰躺地上,男生撑在上面,做五下俯卧撑.",
    "男生仰躺地上,女生撑在上面,坚持5秒钟.",
    "男生坐床上,女生躺床上,将头枕男生腿上,对视10秒.",
    "男生将女生逼角落,用”调情式”一手撑墙,两人深情对视10秒.",
    "男生单腿下跪,女生伸手,男生亲女生手背.",
    "对窗外大喊:”我好寂寞啊~”.",
    "随便给手机里的一个异性打电话说:”其实…..我是….猪.”",
    "一边摸离你最近的同性的胸部一边说”奶妈,我饿!”",
    "围绕屋子跑一圈,并喊”我再也不尿床啦!”",
    "和离你最近的异性面对面相隔一厘米,然后做接吻陶醉状10秒.",
    "选一个男性,一边捶他的胸一边说”你好讨厌哦~”",
    "在大街上大喊从你左手边数起第二位异性的名字,并在后面加上”我恨你,却又深深爱着你.”",
    "对着门外喊”打雷了,下雨收衣服啊~”",
    "帮离你最远的异性脱下最外面一件衣服,然后再帮其穿上.",
    "与从你左手边数起第二位异性喝交杯酒.",
    "摸自己的胸说”唉,太小了!”",
    "详细描述你的初吻的全过程,如果没有就说想象中的.",
    "如果让你选择做一个电影中的角色,你会选谁呢?为什么?",
    "如果有一天我和你吵架了,你会怎么办?",
    "哭得最伤心的是哪一次?为什么?",
    "如果跟你喜欢的人约会的时候,碰到了前任,你会有什么表现?",
    "如果有一天我对你说我爱上你了,你会怎么办?",
    "女生坐男生小腿上,男生做5个仰卧起坐.",
    "让一个女的想办法让某男兴奋起来.",
    "两人面对面做搓澡状,屁股还要一扭一扭的,还要唱'洗刷刷,洗刷刷~'"
]

  • 完成后,本回合结束,开始下一回合。

游戏界面设计

  • 使用sketch绘制界面

  • sketch设计稿下载地址如下:

github.com/zhaoolee/Pr…

实现游戏效果

  • 源码如下
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>真心话大冒险</title>
</head>
<body>
  <div id="root">
    <div class="nav">
      <div class="nav_atom nav_atom_truth" id="truth">
        真心话
      </div>
      <div class="nav_atom nav_atom_dare" id="dare">
        大冒险
      </div>



    </div>

    <div id="content">
      <div style="text-align: center">一起来玩真心话大冒险吧~</div>

    </div>



  </div>
  <script>
    // 真心话的列表
    var truth_info = [
    "你的初吻是几岁?被谁夺取的?",
    "你的初恋是几岁?是谁?",
    "大学到现在共挂过几门课?",
    "你吻过多少人?",
    "如果再给你一个机会,回到高中时代,最想对哪位异性说哪些话?",
    "你第一个喜欢的异性叫什么名字?",
    "你曾经意淫过在场的哪一位?如果过去没有的话,你现在会选哪一位作为YY(意淫的拼音缩写)对象?",
    "你对自己的梦中情人的要求是什么?",
    "让你一直念念不忘的一位异性的名字?原因?",
    "谈过几次恋爱?",
    "每天睡觉前都会想起的人是谁?",
    "你最怕的事情或东西是什么(说出三件)?",
    "你会不会在意ta的过去,为什么?",
    "打算什么时候结婚?",
    "现在心里最想念的异性叫什么名字?",
    "第一次爱的人对你产生过什么影响?",
    "你在意你的老婆(老公)不是处女(处男)吗?",
    "你会为了爱情牺牲一切,包括生命吗?",
    "结婚后想生男孩还是女孩?说出原因.",
    "和多少异性有过非恋爱的暧昧关系?",
    "你考试作弊使用过哪些手段?",
    "做过最丢脸的事情是什么?",
    "现在想被有钱人包养么?",
    "请说出在座谁昨天没有洗澡?",
    "觉得失去什么最可怕?",
    "你觉得自己什么时候身体发育成熟的?",
    "你们家里谁掌管钱财?",
    "如果你现在心情不好,会怎样?",
    "你最喜欢的小说是什么?",
    "你最害怕的事情或东西是什么(说出3件)?",
    "你觉得自己放的屁臭不臭?",
    "到目前为止写过多少封情书?",
    "自己做过最丢脸的事是什么?",
    "用四个字形容你现在的生活状态?",
    "晚上睡觉要上几次厕所?",
    "在座的人中,你最想打的人是谁?",
    "收到过最难忘的礼物是什么?",
    "你最短的一次恋爱是什么情况?",
    "你觉得异性穿什么样式的内裤最性感?",
    "今天拉了几次屎?",
    "你现在穿什么牌子的内衣?",
    "你跟几个异性上过床?",
    "多久换一次内裤?",
    "你喜欢裸睡么?",
    "你觉得自己最郁闷的外号是什么?",
    "和恋人的身体接触到哪一步了?",
    "你一共收藏了多少黄色小电影?",
    "当过第三者么?",
    "你认为在座谁最性感?",
    "和恋人在一起ML的时候叫错了名字怎么办?",
    "认同没有性的爱情么?",
    "你最近一次做春梦是什么样子的?",
    "你怎样看待性爱?",
    "你的梦中情人是谁?如果没有,请说出你希望自己的梦中情人是什么样子?",
    "在自己最爱的人面前做过最囧的事是什么?",
    "你觉得自己长的如何?",
    "第一次ML是什么感觉?",
    "去你喜欢的人家里突然想拉肚子怎么办?",
    "你的胸围是多少?",
    "初吻是在什么情况下没有的?",
    "最奢侈的一次消费是什么?",
    "你认为在座的哪一位异性可以成为你的性幻想对象?",
    "你最多同时和几个人恋爱?",
    "你以后想干什么?你的理想职业是什么?",
    "说说你对我的真实评价?",
    "最让自己感动的一件事是什么?",
    "现在你心里最喜欢的人是谁?",
    "目前为止你做过的最疯狂的事是什么?",
    "如果给你一个机会去世界上任何一个地方旅行你会去哪里?",
    "如果时间能倒流你希望回到哪一时间?",
    "最喜欢的食物是什么?",
    "假如你的爱人要出国,你会怎么做?",
    "目前最大的愿望?",
    "你觉得远距离恋爱是否注定要分开?那么如果喜欢上一个遥远国度的人,你是否会选择跟他走?",
    "我和你恋人同时约你,你会陪谁?",
    "世上真的有真爱吗?你眼中的真爱是什么样的?",
    "情人节最想收到什么礼物?",
    "喜欢看什么动画片?",
    "你前任结婚了,你愿意参加他/她婚礼吗?",
    "半夜遇见劫匪,他说不唱歌不让你走,你会唱什么?",
    "说真的,你整过容么?",
    "你觉得你本人好看,还是照片好看?",
    "你心目中最想养的宠物是什么?",
    "你的某个长得还不错的异性朋友半夜给你打电话要和你出去开房ML,你怎么办?",
    "如果让你kiss现场的某一位异性,你会选择谁?为什么?",
    "你还是处女/男吗?"
    ];

    // 大冒险的列表
    var dare_info = [
    "冲到门外撕心裂肺的喊“台湾回归啦!台湾回归啦!大家快看中央一台……”(跟真有那么回事似的)",
    "请kiss在本桌或本教室离你最近的一位异性同学三秒钟",  
    "请在现场选一位异性同学,向他或她表白",
    "站到凳子上表演大猩猩捶胸呐喊动作",
    "学超级名模走秀,绕桌子或教室一圈",
    "与本桌或本教室离你最近的一位异性同学拥抱十秒钟。", 
    "找在场的一位异性情歌对唱。(邀请,三次失败罚表演)",
    "和坐你右边的同学深情对视并对她或他唱《老鼠爱大米》中的高潮部分。",
    "和离你最近的一位同性同学十指相扣10秒,并看着对方说眼睛含情脉脉地说:我爱你。",
    "右手捏住左耳垂,弯下腰,顺时针转10圈,再金鸡独立15秒不许倒。",
    "背一位异性绕场地2圈.",
    "做一个大家都满意的鬼脸.",
    "抱一位异性直到下一轮真心话大冒险结束.",
    "向一位异性表白3分钟.",
    "与一位异性十指相扣,对视10秒.",
    "邀请一位异性为你唱情歌,或邀请一位异性与你情歌对唱.",
    "做自己最性感,最妩媚的表情或动作.",
    "吃下朋友给你夹的任何菜.",
    "亲在场的一位异性,部位不限.",
    "神情的吻墙10秒.",
    "抓着铁门喊”放我出去!”",
    "男的用胳膊从正面量女的胸围or女的量男的腰围or臀围.",
    "一人先用嘴吸住一纸牌,另一人用嘴从另一面将纸牌吸住移走.",
    "女生仰躺地上,男生撑在上面,做五下俯卧撑.",
    "男生仰躺地上,女生撑在上面,坚持5秒钟.",
    "男生坐床上,女生躺床上,将头枕男生腿上,对视10秒.",
    "男生将女生逼角落,用”调情式”一手撑墙,两人深情对视10秒.",
    "男生单腿下跪,女生伸手,男生亲女生手背.",
    "对窗外大喊:”我好寂寞啊~”.",
    "随便给手机里的一个异性打电话说:”其实…..我是….猪.”",
    "一边摸离你最近的同性的胸部一边说”奶妈,我饿!”",
    "围绕屋子跑一圈,并喊”我再也不尿床啦!”",
    "和离你最近的异性面对面相隔一厘米,然后做接吻陶醉状10秒.",
    "选一个男性,一边捶他的胸一边说”你好讨厌哦~”",
    "在大街上大喊从你左手边数起第二位异性的名字,并在后面加上”我恨你,却又深深爱着你.”",
    "对着门外喊”打雷了,下雨收衣服啊~”",
    "帮离你最远的异性脱下最外面一件衣服,然后再帮其穿上.",
    "与从你左手边数起第二位异性喝交杯酒.",
    "摸自己的胸说”唉,太小了!”",
    "详细描述你的初吻的全过程,如果没有就说想象中的.",
    "如果让你选择做一个电影中的角色,你会选谁呢?为什么?",
    "如果有一天我和你吵架了,你会怎么办?",
    "哭得最伤心的是哪一次?为什么?",
    "如果跟你喜欢的人约会的时候,碰到了前任,你会有什么表现?",
    "如果有一天我对你说我爱上你了,你会怎么办?",
    "女生坐男生小腿上,男生做5个仰卧起坐.",
    "让一个女的想办法让某男兴奋起来.",
    "两人面对面做搓澡状,屁股还要一扭一扭的,还要唱'洗刷刷,洗刷刷~'"
    ];

    function get_random_atom(current_array){
      var random_num = Math.random();
      var index = parseInt(random_num * (current_array.length));
      return current_array[index];
    }

    function get_current_nav(current_nav){
      if(current_nav === 'truth'){
        return get_random_atom(truth_info); 
      }

      if(current_nav === 'dare'){
        return get_random_atom(dare_info);
      }



    }

    var current_nav = "";
    var truth_dom = document.getElementById('truth');
    var dare_dom = document.getElementById('dare');
    var content_dom = document.getElementById('content');
    truth_dom.addEventListener('click', function(){
      current_nav = "truth";
      // 清除dare的下划线样式, 添加truth的下划线样式
      dare_dom.style = "text-decoration: none";
      truth_dom.style = "text-decoration: underline";
      // 获取真心话
      var content = get_current_nav('truth');
      content_dom.innerHTML = "<div style='color: #64B587'>"+content+"</div>";;
    })

    dare_dom.addEventListener("click", function(){
      current_nav = "dare";
      // 清除truth的下划线样式, 添加dare的下划线样式
      truth_dom.style = "text-decoration: none";
      dare_dom.style = "text-decoration: underline";
      // 获取大冒险
      var content = get_current_nav('dare');
      content_dom.innerHTML = "<div style='color: #EA3681'>"+content+"</div>";
    })

  
  </script>

  <style>
    html, body{
      margin: 0;
      padding: 0;
    }
    .nav{
      height: 40px;
      display: flex;
      color: #FFFFFF;
      text-align: center;
      font-size: 20px;
      line-height: 40px;
    }

    .nav_atom{
      flex: 1 1 auto;
      user-select: none;
      cursor:pointer;
    }

    .nav_atom_truth{
      background-color: #64B587;
    }
    .nav_atom_dare{
      background-color: #EA3681;

    }
    #content{
      margin: 0 30px;
      font-size: 20px;
      padding-top: 50px;
      font-weight: 700;
      text-align: center;
    }
  </style>
</body>
</html>
  • 完整程序已经上传到github, 下载地址如下:

github.com/zhaoolee/Pr…

编程小知识

  • EventTarget.addEventListener() 将指定的监听器注册到 EventTarget 上,当该对象触发指定的事件时,指定的回调函数就会被执行。 MDN的专业解释链接

写在最后:

《用Chrome学编程(如何用Chrome优雅装B)》, 用Gif图展示Chrome的骚操作, 充分挖掘Chrome的编程潜力!

本文源自《用Chrome学编程》文集,Github开源地址:github.com/zhaoolee/Pr… 我需要你的支持,如果你喜欢这个文集,欢迎为本文集增加一颗 🌟星.