不败君
使用JS开发一个简单的“三七过”小游戏
2019-09-25 11:06:53
围观(5828)
公司团建、同学聚会什么的最喜欢玩一些小游戏了。博主最近遇到了一种小游戏。
玩法
从数字 1 开始，按顺序每人递增数字，并需要报出该数字或者是说“过”，假如到自己时，数字是三的倍数或者七的倍数，再或者尾数是三 或者尾数是七的都需要说“过”，否则需要说出该数字。
详细点说就是，比如到自己时，数字是 9 ，则需要说“过”，因为 9 是 3 的倍数。而下一位玩家的数字是 10，而 10 不是 3 的倍数 也不是 7 的倍数，尾数更不是 3 或者 7，所以只需要说 “10” 。
开发
从现实到使用 JS 开发为小游戏的思路是这样的，写一个 input 输入框，默认的 value 值为 1 ，因为数字是从 1 开始。
有两个按钮，一个是“过”，一个则是“下一个”，给这两个按钮绑定两个不同的事件，当然你也可以绑定为同一个事件，涉及到优化代码的就不说了，主要是先实现功能。
写一个函数，判断数字只要是 3 的倍数、7 的倍数、尾数是 3、尾数是 7 都返回布尔值 true，否则返回 false。
function query(number) {
if (number % 3 == 0 || number % 7 == 0) {
return true;
}
var number = number.substr(number.length -1, 1);
if(number == 3 || number == 7){
return true;
}
return false;
}点击“过”按钮时，提取输入框的数字，执行写好的判断函数，返回值是 false 时，说明选择错误，给予提示答案错误。
点击“下一个”按钮时，同样提取输入框的数字并执行判断函数，返回值是 true 时，说明答案错误。
点击按钮并且选择对的答案，设置 setTimeout 计时三秒，如果 setTimeout 的匿名函数执行，说明超时没回答。注意，需要在点击按钮时的函数方法中加入 clearTimeout 取消计时。
最高通关计数可以用 localStorage 存储数据，设置一个变量 i ，选择的答案是对的则 i++ 自增，需要判断一下已经存储通关数是否大于当前计数，如果当前计数大于存储的通关数才覆盖存储。
说到这里，思路及原理已经完成。剩下的就只有敲代码及美化界面。
放上博主写的完整代码：
<!DOCTYPE html>
<html>
<head>
<title>三 七 过 - BBJ不败君</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
<style type="text/css">
body{
padding: 0px;
margin: 0px;
background: #ffc7c7;
}
#number{
border: none;
display: block;
width: 200px;
height: 200px;
text-align: center;
font-size: 35px;
margin: 0 auto;
margin-top: 60px;
background: #fda6a6;
color: #fff;
}
#skip{
display: block;
width: 150px;
margin: 0 auto;
margin-top: 60px;
border: none;
padding: 10px;
color: #fff;
background: #fb7777;
}
#next{
display: block;
width: 150px;
margin: 0 auto;
margin-top: 15px;
border: none;
padding: 10px;
color: #fff;
background: #fb7777;
}
#account{
font-size: 13px;
color: #333;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
}
#start{
width: 100%;
height: 100%;
position: fixed;
top: 0px;
bottom: 0px;
background: #ffc7c7;
font-size: 13px;
color: #333;
}
#start p{
padding: 10px;
}
#start p span{
color: red;
}
#start button{
border: none;
background: #fb7777;
color: #fff;
padding: 20px;
display: block;
margin: 0 auto;
width: 150px;
margin-top: 100px;
}
#re_start{
width: 100%;
height: 100%;
position: fixed;
top: 0px;
bottom: 0px;
background: #ffc7c7;
font-size: 13px;
color: #333;
z-index: 999;
display: none;
}
#re_start p{
padding: 10px;
text-align: center;
margin-top: 70%;
}
#re_start button{
border: none;
background: #fb7777;
color: #fff;
padding: 20px;
display: block;
margin: 0 auto;
width: 150px;
margin-top: 50px;
}
</style>
</head>
<body>
<input type="number" id="number" value="1" disabled="disabled">
<button id="skip">过</button>
<button id="next">下 一 个</button>
<p id="account"></p>
<div id="start">
<p>
玩法：
<br><br>
系统会从 1 开始按顺序给出数字，如果该数字是
<br><br>
<span>( 3 或 7 的倍数 )</span> 或者是 <span>( 尾数是 3 或 7 )</span>
<br><br>
则需要 点击 “过” 否则 需要点击 “下一个”
<br><br>
点错则失败。
<br><br>
<span>注意：只有三秒钟考虑时间，超时也为失败。</span>
</p>
<button id="start_btn">开始</button>
</div>
<div id="re_start">
<p>很遗憾，您输了</p>
<button id="re_start_btn">重新开始</button>
</div>
<script type="text/javascript">
onload = function(){
var skip = document.getElementById("skip");
var next = document.getElementById("next");
var number = document.getElementById("number");
var start_btn = document.getElementById("start_btn");
var re_start_btn = document.getElementById("re_start_btn");
var account = 0;
var time;
if (localStorage.account) {
document.getElementById("account").innerHTML = '你的最好成绩是连续通过：' + localStorage.account + '关';
}
if(localStorage.start){
document.getElementById("start").style.display = 'none';
}
next.onclick = function(){
clearTimeout(time);
if (query(number.value)) {
alert('很遗憾，' + number.value + '是3或7的倍/尾数');
document.getElementById("re_start").style.display = 'block';
}else{
//next
number.value = Number(number.value) + 1;
account++;
if (account > localStorage.account || !localStorage.account) {
localStorage.account = account;
}
time = setTimeout(function(){
alert('很遗憾，超时啦');
document.getElementById("re_start").style.display = 'block';
}, 3000);
}
}
skip.onclick = function(){
clearTimeout(time);
if (!query(number.value)) {
alert('很遗憾，' + number.value + '不是3或7的倍/尾数');
document.getElementById("re_start").style.display = 'block';
}else{
//next
number.value = Number(number.value) + 1;
account++;
if (account > localStorage.account || !localStorage.account) {
localStorage.account = account;
}
time = setTimeout(function(){
alert('很遗憾，超时啦');
document.getElementById("re_start").style.display = 'block';
}, 3000);
}
}
start_btn.onclick = function(){
document.getElementById("start").style.display = 'none';
localStorage.start = true;
}
re_start_btn.onclick = function(){
location.reload();
}
function query(number) {
if (number % 3 == 0 || number % 7 == 0) {
return true;
}
var number = number.substr(number.length -1, 1);
if(number == 3 || number == 7){
return true;
}
return false;
}
}
</script>
</body>
</html>代码还可以继续完善优化。
放上一个 DEMO 地址，进入就可以玩：www.bubaijun.com/demo/37.html
本文地址 : bubaijun.com/page.php?id=139
版权声明 : 未经允许禁止转载！
上一篇文章： PHP开发-微信公众号文章采集原理及思路
下一篇文章： TP 或者 Laravel 框架实现无限级分类