demo-原生js实现你说我猜小游戏

1、完成的功能
(1)根据选择的分类(生活、成语、美食)来显示对应的词语。
(2)开始游戏后设置60s倒计时,游戏结束后提示游戏已结束。
(3)点击true后,累加对的题数,显示出来。
(4)不改变分类的情况下,每次显示后的词语不会再显示,随机显示。
2、css引入了bootstrap的样式,引用为在线引用。
3、另外应用的数据为同文件下的data.js。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- Bootstrap -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
	</head>
	<body>
		<!-- <div>
			<div id="liveSp" class="sp" onclick="receiveData=liveArray">生活</div>
			<div id="idiomSp" class="sp" onclick="receiveData=idiomArray">成语</div>
			<button onclick="startGame()">开始游戏</button>
			<button onclick="startGame()">下一个</button>
			<button onclick="updateGame()">重置</button>
			<button type="button" class="btn btn-warning">(警告)Warning</button>
			<h2 id="show"></h2>
		</div>
		 -->
		<div class="row">
		  <div class="col-sm-4 col-md-3">
		    <div class="thumbnail" onclick="receiveData=liveArray">
		      <img src="picture/live.jpeg" alt="..." width="400px" height="300px">
		      <div class="caption">
		        <h3><strong>生活</strong></h3>
		        <!-- <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> -->
		      </div>
		    </div>
		  </div>
		  <div class="col-sm-4 col-md-3">
		    <div class="thumbnail" onclick="receiveData=idiomArray">
		      <img src="picture/idiom.jpeg" alt="..." width="400px" height="300px">
		      <div class="caption">
		        <h3><strong>成语</strong></h3>
		        <!-- <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> -->
		      </div>
		    </div>
		  </div>
		  <div class="col-sm-4 col-md-3">
		    <div class="thumbnail" onclick="receiveData=foodArray">
		      <img src="picture/food.jpeg" alt="..." width="400px" height="300px">
		      <div class="caption">
		        <h3><strong>美食</strong></h3>
		        <!-- <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> -->
		      </div>
		    </div>
		  </div>
		</div>
		<button type="button" class="btn btn-primary" onclick="startGame()">开始游戏</button>
		<h1 id="time"></h1>
		<h1 id="show" class="showFont"></h1>
		<button type="button" class="btn btn-primary" onclick="trueGame()">true</button>
		<button type="button" class="btn btn-primary" onclick="doArray()">pass</button>
		<h1 id="fatal"></h1>
	</body>
	
	<script src="data.js">
	</script>
	<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
	<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
	
	<script>	
		// 三种数据类别:live、idiom、food
		const live = "live";	
		const idiom = "idiom";
		const food = "food";
		// 各类别的存储数组,不能识别的存放在defaultArray中
		var liveArray = [];
		var idiomArray = [];
		var foodArray = [];
		var defaultArray = [];
		//选择类别后接收数组
		var receiveData = [];
		// 回答正确的个数
		var trueResult = 0;
		
		//初始化数据
		initialize();
		//初始化词语分组,将源数组中的数据按照分类分在不同的类别存储数组中
		function initialize(){
			//遍历,获取数组长度
			// for(var i=0;i
			// 	if(originData[i].class == live){
			// 		j++;
			// 		liveArray.push(originData[i]);
			// 	}
			// }
			for(var i=0;i<originData.length;i++){
				switch(originData[i].class){
					case live:
						liveArray.push(originData[i]);
						break;
					case idiom:
						idiomArray.push(originData[i]);
						break;
					case food:
						foodArray.push(originData[i]);
						break;
					default:
						defaultArray.push(originData[i]);
				}
			}
			// console.log(j);
			// console.log(liveArray);
			// console.log(idiomArray);
			receiveData = liveArray;
		}
		
		//开始游戏,启动60s倒计时,显示word
		function startGame(){
			countdown();
			doArray();
		}
		
		//数组处理,随机显示类别数组中的word,显示后的word在数组中删掉,避免下一次继续显示,更换类别后之前的类别数组重新置新
		function doArray(){
			// 随机选取,向上取整
			let a = Math.ceil(receiveData.length * Math.random()) -1;
			document.getElementById("show").innerHTML = receiveData[a].word;
			// 删除已经显示过的词语
			receiveData.splice(a,1);
			console.log(receiveData);
		}
		
		//回答正确,显示下一题
		function trueGame(){
			doArray();
			trueResult ++;
			document.getElementById("fatal").innerHTML = `您回答出了${trueResult}`;
		}
		
		//倒计时
		function countdown() {
			var n = 60;
			var interval;
			if (n > 0) {
				interval = setInterval(() => {
					n--;
					document.getElementById("time").innerHTML = `剩余:${n}s`;
					if (n <= 0) {
						document.getElementById("show").innerHTML = "游戏已结束!";
						clearInterval(interval);
					}
				}, 1000)
			}
		}
	</script>
</html>

<style>
.showFont{
	font-size: 200px;
}
</style>

data.js(部分截取)

// 一共三种类别的数据,其中有:生活类live、成语类idiom、美食类food;每个对象中含有id、word、class;word为主内容,class为word的分类
var originData = [{
			id:1, word:"电影",class:"live"
		},{
			id:18, word:"时不我待",class:"idiom"
		},{
			id:22, word:"排骨藕汤",class:"food"
		}]

文件结构
demo-原生js实现你说我猜小游戏_第1张图片
这是一个很简单的小游戏,微信上的小游戏程序虽然很好但是词库感觉一般,广告也多,自己写一个了。后面还有要优化的地方,到时候整到微信小程序上面去。

你可能感兴趣的:(Javascrip,javascript,html,html5)