JS找茬手机微信小游戏代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 JS找茬手机微信小游戏代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
<title>JS找茬手机微信小游戏代码</title>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
		list-style: none;
		text-decoration: none;
	}
	#back{
		width: 300px;
		height: 500px;
		background: #000;
		margin: 100px auto;
		padding: 50px 50px 0;
		position: absolute;
		z-index: 1000;
		top: 0;
		left: 0;
		right: 0;
		opacity: 0.8;
		display: none;
	}
	h1{
		text-align: center;
		padding-top: 200px;
		font-size: 50px;
	}
	h1 a{
		color: #fff;
	}
	.container{
		position: relative;
		width: 300px;
		height: 500px;
		background: #aeaeae;
		margin: 100px auto;
		padding: 50px 50px 0;
	}
	.left{
		float: left;
	}
	.right{
		float: right;
	}
	.main{
		width: 300px;
		margin: 80px auto 20px;
		background: orange;
		text-align: center;
	}
	.list1{
		width: 100%;
	}
	.list1>img{
		width: 100%;
		display: block;
	}
	button{
		width: 200px;
		margin: 0 auto;
		height: 40px;
		border: 0;
		border-radius: 10px;
		background: linear-gradient(#59AD42,#319428);
		color: #fff;
		font-size: 20px;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}
	button:hover{
		background: linear-gradient(#319428,#59AD42);
	}
	#turnOff{
		width: 80px;
		height: 40px;
		display: block;
		position: absolute;
		background: transparent;
	}
</style>

</head>
<body>
<!--1.两张图片 预加载好;
2.布局-->
<div id="back">
	<h1><a href="">重新开始</a></h1>
</div>
<div class="container">
	<div class="left"><span>剩余时间: </span><span id="sec"> 30 </span> s </div>
	<div class="right"><span>分数: </span><span id="score">0</span></div>
	<div class="main">
		<ul>
			<li class="list1"><img src="img/2.png"></li>
		</ul>
	</div>
	<button>点 击 开 始 游 戏</button>
	<button id="turnOff">护眼模式</button>
</div>

<script type="text/javascript" charset="utf-8">
	var btn=document.querySelector('button');
	var z=30.00;
	var sec=document.getElementById('sec');
	var uls=document.querySelector('ul');
	var li_1=document.getElementsByClassName('list1')[0];
	var score=document.getElementById('score');
	var level=1;
	var n=0;
	var turnOff=document.getElementById('turnOff');
	turnOff.onclick=function(){
		document.body.style.background='rgb(199,237,204)';
		turnOff.innerHTML='普通模式';
			turn();	
	}
	function turn(){
		turnOff.onclick=function(){
			document.body.style.background='';
			turnOff.innerHTML='护眼模式';
			turnOff.onclick=function(){
				document.body.style.background='rgb(199,237,204)';
				turnOff.innerHTML='普通模式';
				turn();	
			}
		}
	}
	var back=document.getElementById('back');
	btn.onclick=function(){
		// 1.计时器
		var timer=setInterval(function(){
			z-=0.01;
			z=z.toFixed(2);
			sec.innerHTML=z;
			if (z<=0) {
				clearInterval(timer);
				if (n<8) {
					alert('GAME OVER!'+'  '+'等级:睁眼瞎');
				}else if (n>=20) {
					alert('GAME OVER!'+'  '+'等级:超神');
				}else if (n>=12) {
					alert('GAME OVER!'+'  '+'等级:火眼金睛');
				}else{
					alert('GAME OVER!'+'  '+'等级:高度近视');
				}
				back.style.display='block';
			}
		},10)
		// 2.点击按钮消失,第一个li消失
		btn.remove();
		li_1.remove();
		turnOff.remove();
		// 3.添加4个li>img
		app();
		function app(){
			level+=1;
			for (var i=0;i<level*level;i++) {
				var newLi=document.createElement('li');
				uls.appendChild(newLi);
				var newImg=document.createElement('img');
				newLi.appendChild(newImg);
				newLi.style.width=100/level+'%';
				newLi.style.float='left';
				newImg.style.display='block';
				newImg.style.width=100+'%';
				newImg.src='img/1.png';
				newLi.style.backgroundColor='rgb('+rand(50,255)+','+rand(50,255)+','+rand(50,255)+')';
			}
			var x=rand(0,level*level-1);		// 赋予一个随机房祖名下标
			var imgs1=document.querySelectorAll('img');
			imgs1[x].src='img/2.png';	// 随机一张图片变成房祖名
			var li=document.querySelectorAll('li');
			li[x].onclick=function(){
				for (var i=0;i<level*level;i++) {
					li[i].remove(this);
				}
				n+=1;
				score.innerHTML=n;
				if (level>10) {
					level=10;
				}
				app();
			}
		}
	}



	// 随机函数
	function rand(min,max){
		return Math.round(Math.random()*(max-min)+min);
	}
</script>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)