truth_or_dare
- Gif高清原图地址: https://user-images.githubusercontent.com/15868458/63646763-8ab2ed00-c74a-11e9-81e8-e224a0ef375c.gif
真心话大冒险 在线地址: 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绘制界面
image
- sketch设计稿下载地址如下:
https://github.com/zhaoolee/ProgrammingWithChrome/tree/master/pwc_source/truth_or_dare/
实现游戏效果
- 源码如下
<!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, 下载地址如下:
https://github.com/zhaoolee/ProgrammingWithChrome/tree/master/pwc_source/truth_or_dare/
编程小知识
- EventTarget.addEventListener() 将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。 MDN的专业解释链接
写在最后：
《用Chrome学编程(如何用Chrome优雅装B)》, 用Gif图展示Chrome的骚操作, 充分挖掘Chrome的编程潜力!
本文源自《用Chrome学编程》文集，Github开源地址：https://github.com/zhaoolee/ProgrammingWithChrome
我需要你的支持,如果你喜欢这个文集，欢迎为本文集增加一颗 🌟星.
