不败君

前端萌新&初级后端攻城狮

使用JS开发一个简单的“三七过”小游戏

使用JS开发一个简单的“三七过”小游戏

2019-09-25 11:06:53

围观(4923)

公司团建、同学聚会什么的最喜欢玩一些小游戏了。博主最近遇到了一种小游戏。

玩法

从数字 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

版权声明 : 未经允许禁止转载!

评论:我要评论
发布评论:
Copyright © 不败君 粤ICP备18102917号-1

不败君

首 页 作 品 微 语