原生js实现一个简易的别踩白块游戏

编程入门行业动态更新时间:2024-10-23 18:25:55

原生js实现一个<a href=https://www.elefans.com/category/jswz/34/1769136.html style= 简易的别踩白块游戏"/>

原生js实现一个简易的别踩白块游戏

先宣传一波自己的博客系统，地址： /

技术实现vue + element + 自己的一个UI库 + node + express + mysql + pm2 + nginx

系统分为三个端：前端，管理端，服务端

有想法一起交流的可以加我联系方式，博客里有

最近偶然在网上看到一个用js做一个别踩白块的练手项目，顿时看来了兴趣，花了两天时间，写好了一个实现了基本功能的别踩白块，当然，由于只是来练手，其中诸多bug,以及兼容性问题，楼主表示并不想解决，如果有感兴趣的同行，可以复制下面源码来补充

1.项目部分

界面样式部分不是很多，一个简单的两列布局（一行两个div分别显示黑白），加一些基本的样式，主要还是功能部分这一块，功能部分为三个部分，刚开始进入大厅有两个按钮，一个开始游戏，一个选择难易程度，点击开始游戏后进入主体部分，当点击到白块后，游戏结束，显示得分，以及两个按钮，是否在来一局以及回到大厅。

2.实现思路

大厅部分没什么好讲，给两个按钮循环帮绑定事件，各自执行相应的功能，主体部分即是游戏部分，这里我走了很多弯路。刚开始想的是给body添加滚动事件，每次滚动ele.offsetTop+1，使body无限滚动，当然使body滚动之前，肯定是先渲染一行div,也就是两个div，至于这两个div的颜色，用随机数来生成，<0.55的加黑色样式，产生黑块，>=0.55的加白色样式，产生白块，然后回调，使页面滚动，当滚动到最下面就removeChild，当然这个功能，楼主并没有实现，所以放弃，如果不remove，相信都会猜到一个结果，dom越积越多，最后那就是浏览器炸掉，太耗性能。所以这种方法，淘汰。

第二种方法，那就是点击了开始游戏后，初始化一个渲染部分的方法（init函数），这个函数执行的功能是先渲染一个id为wrap0的div，高度为100%，宽度为100%，然后通过appenChid添加的body中，作为body直接子元素，然后在document.createElement 6个子div添加到刚刚创建的id为0的wrap0的div中，为什么是六个，我这里定义的是每行两个，屏幕放满三行，所以定义每个子div的高度都是33%，然后通过定时器，执行一个动画方法，这个方法里封装的是控制的是id为wrap0的body直接子元素div的滚动，当wrap0滚动后，在回调init()方法，创建一个id为wrap1的body直接子元素div，但是这个这个div的位置要放到距离body为:-100%的地方，也就是top:-100%，后面同样是往id为wrap1的div里面appendchild六个子div，通过计时器在执行动画，当判断这些存在时，就往下滚动，当滚动到ele.offsetTop>=document.body.clientHeight+时，就移除该ele,然后周而复始，执行init()方法，在appendchild，不断的添加移除wrap0的div或wrap1的div,然后在创建，这样就类似于已经被废弃的marquee标签的效果，不断滚动，永远都是这两个div,也不会造成过多的dom元素堆积，优化了项目，至于为什么在最后要+1,那是因为为了形成两个div之间无缝滚动。

好了，话不多说，先上代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title></title><style>*{margin: 0;padding: 0;			}html,body{width: 100%;height: 100%;background-color: #aaa;overflow: hidden;}/** 大厅样式* */.hall{width: 100%;height: 100%;display: flex;background-color: #FFFFFF;}.hall span{margin: auto;}.hall span>p+p{margin-top: 20px;}.hall span p a{display: inline-block;padding: 6px 0px;width: 100px;text-align: center;color: #FFFFFF;}.hall span>p:first-child a{background-color: #20A0FF;}.hall span>p:nth-child(2) a{background-color: #13CE66;}.hall span p a:hover{opacity: .8;}.mask{/*display: none;*/position: absolute;top: 0%;left: 50%;transform: translate(-50%);/*width: 150px;*/padding: 20px 0px;width: 50%;text-align: center;background-color: #e5e5e5;border-radius: 8px;-webkit-border-radius: 8px;-moz-border-radius: 8px;box-shadow: 2px 2px 2px black;opacity: 0;transition: all 2s;-webkit-transition: all 2s;}/*.mask:hover{width: 250px;}*/.mask.active{opacity: 1;/*display: block;*/top: 20%;	}.mask input+input{margin-left: 5px;}/** 黑白块样式* */.wrap{position: absolute;width: 100%;height: 100%;text-align: center;}.white{display: inline-block;width: 49%;height: 33%;background-color: white;/*border: 1px solid;*/}.black{display: inline-block;width: 49%;height: 33%;background-color: #000;}#wrap1{top: -100%;}#wrap0{top: 0;}.endBox{margin: 100px auto;width: 100%;text-align: center;}.endBox P + P{margin-top: 25px;}.btn-a{display: inline-block;padding: 7px;border-radius: 5px;background-color: #20a0ff;color: #FFFFFF;font-size:12px;}.endp{margin-top: 100px;text-align: center;font-size: 22px;color: red;}</style></head><body><div class="hall" id="fatherhall"><span id="hall"><p><a>开始游戏</a></p><p><a>选择难度</a></p></span></div><div class="mask" id="mask"><input type="radio" name="chen" value="1"/>简单<input type="radio" name="chen" value="2"/>中等<input type="radio" name="chen" value="3"/>难</div><!--<div id="wrap" class="wrap"></div>--><script>	abtn();var time;var speed=2var count=0;var twoFlag=false;
//			init();//按钮点击事件function abtn(){let a=getElemet('hall').children;for(let i=0;i<a.length;i++){a[i].index=i+1a[i].onclick=function(){if(a[i].index===1){getElemet('fatherhall').style.display='none'
//							removeChildfn(getElemet("fatherhall"));init();btnClick();}else{radiobtn();mask();}}}}/*单选框点击事件* */function radiobtn(){let radio=getElemet('mask').children;for(let i=0;i<radio.length;i++){radio[i].onclick=function(){speed=parseInt(this.value);radio[i].parentNode.classList.remove('active');}}}function mask(){let mask=getElemet('mask');mask.className+=' active';}//初始化数据function init(i=0,flag=false){let j=ilet box=cElemet('div');
//				 box.setAtri({'id':'wrap'+j,'className':''})box.id='wrap'+j;box.className='wrap'getElemet('body').appendChild(box);if(flag){let wrap=getElemet('wrap'+j);wrap.style.top="-100%";}for(let i=0;i<3;i++){let radndow=Math.random();let wrap=getElemet('wrap'+j);let divblack=cElemet("div");let divwhite=cElemet("div");divblack.className='black'divwhite.className='white'divwhite.setAttribute('error',1);if(radndow<0.55){wrap.appendChild(divblack);wrap.appendChild(divwhite)}else{wrap.appendChild(divwhite);wrap.appendChild(divblack);}} clearInterval(time);time=setInterval('animate(init)');		}//块下滑动画function animate(callback){let i=1let flag=falseif(getElemet('wrap'+1)){flag=true;let div1=getElemet('wrap'+1);if(div1.offsetTop>=(document.body.clientHeight+1)){removeChildfn(div1);i=1;callback(i)}div1.style.top=div1.offsetTop+speed+'px';}if(getElemet('wrap'+0)){let div0=getElemet('wrap'+0);if(div0.offsetTop>=(document.body.clientHeight+1)){removeChildfn(div0);i=0;callback(i,true);}div0.style.top=div0.offsetTop+speed+'px';}if(!flag){callback(i);}}//事件委托给白块添加点击事件function btnClick(){let div=getElemet('body');div.onclick=function(event){if(event.target.getAttribute('error')){clearInterval(time);setTimeout('countFn(appenData)',1000)	}else if(!event.target.getAttribute('error') && event.target.className==='black'){count++;}}}//游戏结束统计数据function countFn(callback){if(getElemet('wrap'+1)){removeChildfn(getElemet('wrap'+1))}if(getElemet('wrap'+0)){removeChildfn(getElemet('wrap'+0))}if(typeof callback ==='function'){callback();}}//开始function startBtn(type){count=0;removeChildfn(document.getElementsByClassName('endBox')[0]);if(type===1){init();}else{getElemet('fatherhall').style.display='flex';}}//追加数据函数function appenData(){let body=getElemet('body');let div=cElemet('div');div.className='endBox'let str;body.appendChild(div);str="<p class='endp'>游戏结束!!</p>"str+="<p>当前得分:"+count+"</p>"str+="<p><a class='btn-a' onclick='startBtn(1)'>再来一局</a></p>"str+="<p><a class='btn-a' onclick='startBtn(2)'>返回大厅</a></p>"div.innerHTML=str;}//移除节点function removeChildfn(ele){let div=getElemet('body');div.removeChild(ele);}//创建节点function cElemet(ele){return document.createElement(ele);}//得到节点function getElemet(ele){return ele==='body' ? document.getElementsByTagName('body')[0] : document.getElementById(ele);}//给dom设置属性
//			 function setAtri(obj,str=""){
//			 	if(typeof obj==='string'){
//			 		cElemet().
//			 	}
//			 }</script></body>
</html>

最后打包，看下效果图：

3.待优化，以及bug