2.2CSS层还在样式设置之前先了解一下大概的结构，如下：globalsettingstyle*{margin:0;padding:0;}wrapperstyle设置style。wrapper{margin:150pxauto;width:400px;height:600px;border:1pxsolid#ccc;position:relative;overflow:hidden;}wrapper下go的设置样式#go{width:100%;position:absolute;top:0;text-align:center;z-index:99;}开始游戏按钮设置样式#goa{display:block;height:100px;width:400px;color:cyan;background-color:#000000;text-装饰：无；边框底部：3pxdashed#eee；字体大小：60px；字体粗细：600；}main(square)设置样式#main{width:400px;height:600px;position:relative;top:-150px;/*border:1pxsolidblack;*/}创建的每一行正方形的样式.row{width:400px;height:150px;}设置一行四个小方块的样式.rowdiv{width:99px;height:149px;border-left:1pxsolid#222;border-bottom:1pxsolid#222;float:left;cursor:pointer;}设置好样式后得到的大致界面如下：可以看到界面样式为比较简单，我们的思路是点击StartGame按钮自动落地方块，所以画面比较空（暂时）2.3JS层js层主要用来控制页面生成动态效果；如生成块、移动块等；2.3.1获取元素varmain=document.getElementById('main');//获取dom元素vargo=document.getElementById('go');varspeed=5,num=0,timer,flag=true;//设置initialvariablevarcolors=['red','green','black','blue'];//这里设置存放颜色的数组，存放颜色的数组不需要是白色，每个初始化的方块不需要设置背景颜色，默认为白色。2.3.2创建每行div元素前面说过，一行是四个正方形，比例和大正方形一样（3:2），它的长宽分别是：{width:100px;高度：150px}；functioncDiv(){varoDiv=document.createElement('div');//获取一个随机数，为每一行找到一个随机div并设置颜色varindex=Math.floor(Math.random()*4);oDiv.setAttribute('class','row');//设置行类类名for(varj=0;j<4;j++){//for循环生成一行四divvariDiv=document.createElement('div');oDiv.appendChild(iDiv);//将每个小div插入每一行}if(main.childNodes.length==0){//根据父main中是否有子元素插入一个新生成的行。appendChild(oDiv);//如果parent为空，直接插入}else{main.insertBefore(oDiv,main.childNodes[0]);//如果parent有元素，将新生成的行插入到最前面existingrows}varclickDiv=main.childNodes[0].childNodes[index];//根据随机数设置一行中的彩色divclickDiv.setAttribute('class','i');//设置类名将此元素作为需要点击的标记clickDiv.style.backgroundColor=colors[index];//设置u2.3.3点击事件函数封装functionbindEvent(){main.addEventListener('click',function(event){//给main添加点击事件if(flag){//判断是否可以clickvartar=event.target根据flag值;//获取被点击的源事件if(tar.className=='i'){//判断被点击的块是否为彩色tar。style.backgroundColor='#bbb';//改变背景颜色tar.classList.remove('i');//去掉类名num++;//计数++}else{alert('游戏结束，score:'+num);//如果白色方块被点击，则游戏结束clearInterval(timer);flag=false;}if(num%10==0){//如果当前分数是10的倍数speed++speed++;}}})}2.3.4Boxmove函数包functionmove(){clearInterval(timer);timer=setInterval(function(){//设置定时器varstep=parseInt(main.offsetTop)+speed;//使用top值移动主区域main.style.top=step+'px';if(parseInt(main.offsetTop)>=0){//如果主区域移到可见区域，则新建一行元素cDiv();main.style.top='-150px';//将主区域移到上面同时显示可见区域}varlen=main.childNodes.length;//获取主区域的行数if(len==6){//如果主区域的行数为6，则a在显示区域的四行上方会生成新行，底部一行为(vari=0;i<4;i++){//遍历最后一行的每个divif(main.childNodes[len-1].children[i].classList.contains('i')){//如果其中一个包含未点击的gameoveralert('Thegameisover,score:'+num);clearInterval(timer);flag=false;//不能继续游戏结束后点击}}main.removeChild(main.childNodes[len-1]);//会显示Remove之后的每一行}},20)bindEvent();//点击事件}中的第一句函数是clearInterval(timer)；防止定时器打开更多；2.3.5游戏开始//点击开始按钮开始移动创建每一行元素functionclickStart(){go.addEventListener('click',function(){go.style.display='none';move();});}点击开始();结果如图：这是使用HbuilderX内置浏览器的界面。游戏结束效果如上图所示。,对游戏进行简单的更改。一般来说，我们首先需要设置好游戏界面的大体结构和风格，然后使用原生js控制框生成移动、点击等，最终呈现出合适的完整界面效果；有兴趣的朋友可以试一试。