本文讲解了关于用H5实现玩2048的代码展示,感兴趣的小伙伴一起来看看吧。
H5代码:
H5代码十分简单,主要用16个div代表16个数字方块,再加上另外restart按钮区,还有一个分值展示区域。
2048 css" rel="stylesheet" href="css/style.css">Restart最高值
0
js代码:
js代码相对复杂一些,游戏处理逻辑主要可以分成以下两块:
(1)移动处理逻辑,游戏玩法是通过上下左右移动进行数字的相加变换。那么首先就会有上滑、下滑、左滑、右滑四个处理函数。上下滑动的时候,将相邻两行相同的数值进行相加;左右滑动的时候,将相邻两列相同的数值进行相加。
(2)移动判断逻辑。
首先第一类判断逻辑是判断是否可以移动。整个游戏区是 4X4的格局分布,那么在上下左右移动的时候我们会通过相邻的两行或者两列是否存在相同的数值去判断,如果有则可以继续移动,如果没有,则不可以继续移动。
其次,我们需要判断游戏是否可以继续,如果整个游戏区的数值方块已经被占满,上下左右都没有移动空间了,那么游戏就是结束了,game over。
(3)其余逻辑
其余的还剩一些比较简单的逻辑,颜色分配函数、重新开始函数、最大分值记录函数等。
// JavaScript Document var flag=[false,false,false,false,false,false,false,false, false,false,false,false,false,false,false,false]; var ds=document.getElementsByClassName("square"); var color=["#FF9966","#FFCCCC","#CC9966","#99CCCC","#99CC99","#99CCFF","#CCCCFF","#FFCC00","#333399","#CC9999","#009999","#996666","#CCCCCC","#CCCCFF","#99CC99"]; var max_num=parseInt("2"); var lose_view=false; function init() //初始化界面,生成2个数字方块 { var i=Math.round(Math.random()*16); var j=Math.round(Math.random()*16); while(i==j) { j=Math.round(Math.random()*16); } ds[i].style.backgroundColor="#FF7578"; ds[j].style.backgroundColor="#FF7578"; ds[i].innerHTML="2"; ds[j].innerHTML="2"; flag[i]=true; flag[j]=true; document.body.addEventListener('load',load(event),false); //var msg=parseInt(document.getElementsByClassName("authorized")[0].innerText); //alert(msg); } function max_score() //记录取得的最大分数 { for (var i=0;imax_num ) { max_num=c_num; } } document.getElementById("num_v").innerHTML= max_num; } function restart() //重新开始游戏,重新回到初始化页面 { if(lose_view==true) { var $h2=document.getElementById("reset1"); // var $bu2=document.getElementById("reset2"); var $par2=$("body"); $par2[0].removeChild($h2); // $par2[0].removeChild($bu2); lose_view=false; } for (var i=0;i Math.abs(Y)) { if (Math.abs(X)>20) { if( X > 0) { rightgo(); voice(); } else { leftgo(); voice(); } } } else if(Math.abs(X)< Math.abs(Y)) { if (Math.abs(Y)>20) { if(Y > 0) { bottomgo(); voice(); } else { topgo(); voice(); } } } } ); } function addcolor() //设置方块颜色 { for(var i=0;i =0;i2--) { if(flag[i2]==true) { if(flag[i2+4]==true) { if( ds[i2].innerHTML==ds[i2+4].innerHTML ) { isbottom=true; } } else { isbottom=true; } } } return isbottom; } function isleft(){ //判断是否可以继续左移,true则表示可以 var isleft=false; for(var i3=0;i3<4;i3++) { for(var j3=0;j3<3;j3++) { if(flag[j3+4*i3+1]==true) { if(flag[j3+4*i3]==true) { if( ds[j3+4*i3].innerHTML==ds[j3+4*i3+1].innerHTML ) { isleft=true; } } else { isleft=true; } } } } return isleft; } function isright(){ //判断是否可以继续右移,true则表示可以 var isright=false; for(var i4=3;i4>=0;i4--) { for(var j4=2;j4>=0;j4--) { if(flag[j4+4*i4]==true) { if(flag[j4+4*i4+1]==true) { if( ds[j4+4*i4].innerHTML==ds[j4+4*i4+1].innerHTML ) { isright=true; } } else { isright=true; } } } } return isright; } function islose() { //判断是否输掉游戏 if (lose_view==false) { var los=0; for(var i5=0;i5<16;i5++) { if(flag[i5]==true) { los++; } } if(los==16) { var left=isleft(); var right=isright(); var top=istop(); var bottom=isbottom(); if((left||right||top||bottom)==false) { max_score(); var $h1=$(' '); //var $bu1=$('css代码:
@charset "utf-8"; /* CSS Document */ body,html{ height:100vw; width: 100vw; padding: 0; margin: 0; background:fixed; background-color: papayawhip; } .authorized { color: grey; margin-left: 2%; text-align:center; font-style: normal; font-size:210%; margin-top:10%; width: 30%; } .restart { position: absolute; margin-left: 5%; width: 25vw; height: 10vw; padding-top:5%; text-align:center; font-size: 22px; background-color:#99CCCC; color: white; border-radius: 5% 5% 5% 5%; } .score { position: absolute; margin-left: 50%; padding-top: 2%; width:45vw ; background-color:#99CCCC; color: white; border-radius:5% 5% 5% 5%; } .maxnum { position: relative; float:left; margin-left: 3%; font-size: 120%; text-align: center; color: white; width: 40%; height: 4vw; } #num_p { margin-top: 5%; margin-left: 5%; } #num_v { margin-top: 5%; color:#ffd700; font-size: 25px;} .game{ position:absolute; top:30% ; left:2.5%; width:95vw; height:95vw; background-color:#AAAA; border-radius:5% 5% 5% 5%; } #reset1{ position:absolute; top:30% ; left:2.5%; width:95vw; height:60vw; font-size: 40px; background: rgba(250,250,250,0.5); text-align: center; padding-top: 35%; color: grey; border-radius:5% 5% 5% 5%;} #reset2 { position:absolute; width: 30vw; height: 13vw; margin:70% 20% 30% 35%; font-size: 20px; padding-left: 0.125rem; background-color: lightsalmon; font-weight: bold; color: white; border-radius:5% 5% 5% 5%; } .square{ position:relative; width:23%; height:23%; line-height: 180%; /*行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度 */ float:left; background-color:#DDDDDD; border-radius:15% 15% 15% 15%; margin:1% 1% 1% 1%; color:white; text-align:center; font-size:12vw; }以上就是关于用H5实现玩2048的全部内容了,感兴趣的小伙伴记得点击关注哦。