微客导航 » 文章资讯 » 原生js实现2048小游戏

原生js实现2048小游戏

2023-07-04 13:25:03 205

2048小游戏，供大家参考，具体内容如下

首先2048小游戏离不开16个格子，我们通过html和css创建好对应的标签和样式，然后开始js逻辑

//一个盒子里面16个小div

设置对应的样式：(仅供参考)

#box{
width:450px;
height:450px;
background-color:brown;
display:flex;
flex-wrap:wrap;
justify-content:space-evenly;
border:1pxsolid#000;
margin:100pxauto;
border-radius:10px;
}
div>div{
margin-top:5px;
width:100px;
height:100px;
border-radius:5px;
background-color:bisque;
text-align:center;
line-height:100px;
font-size:40px;
}

效果如下：

然后真正的js部分真正开始了
先使用css选择器获取所有小格子的div

vardivs=document.querySelectorAll('[id==son]');

然后创建一个二维的数组来接收这16个小格子div的dom对象

vararr=[[],[],[],[]];
vara=0;
for(vari=0;i<4;i++){
for(varj=0;j<4;j++){
arr[i][j]=divs[a];
a++;
}
}

这就形成了:i和j轴

这样就便于我们后面的移动操作

现在我们写一个在该16各种里随机产生一个随机数2和4填入一个空格子里，我们后面在调用！

functionsj(){//产生随机数
vara=Math.floor(Math.random()*4);
varb=Math.floor(Math.random()*4);
if(arr[a][b].innerHTML==""){
if(Math.random()>0.5){
arr[a][b].innerHTML=2;
}else{
arr[a][b].innerHTML=4;
}

}else{//如果该格子不为空我们在执行函数
sj();
}
}

第二个就是要判断游戏是否结束时的函数：当格子你所有的值都不为空的时候结束游戏！（后面在调用）

functionjs(){//游戏是否结束
varbool=true;
for(vari=0;i<4;i++){
for(varj=0;j<4;j++){
if(arr[i][j].innerHTML==""){
bool=false;
}else{

}
}
}
if(bool){
alert("游戏结束");
for(vari=0;i<4;i++){
for(varj=0;j<4;j++){
arr[i][j]=null;
}
}

}
}

然后我们分别写如按下上下左右键执行的函数：

以按上键为例子：

①如果上面一个数为空，下面一个不为空上下值交换；
②如果上面一个为数字且和下面的相等，那么上面数*2下面的改值为空。其他情况不变。

functiondowntop(){//按上执行的函数
for(vari=0;i<4;i++){
for(varj=0;j<4;j++){
if(arr[i][j].innerHTML==""&&i<3&&arr[i+1][j].innerHTML!=""){
arr[i][j].innerHTML=arr[i+1][j].innerHTML;
arr[i+1][j].innerHTML="";
downtop();//如果条件满足就执行
//不满足了就不会进入到if里了
}elseif(i<3&&arr[i][j].innerHTML!=""&&arr[i+1][j].innerHTML!=""&&arr[i][j].innerHTML==arr[i+1][j].innerHTML){
arr[i][j].innerHTML=2*arr[i+1][j].innerHTML;
arr[i+1][j].innerHTML="";
}else{

}
}
}

}

同理只需要改变（一些参数）就完成另外3个键的逻辑：

functiondownbottom(){
for(vari=3;i>0;i--){
for(varj=0;j<4;j++){
if(arr[i-1][j].innerHTML!=""&&i>0&&arr[i][j].innerHTML==""){
arr[i][j].innerHTML=arr[i-1][j].innerHTML;
arr[i-1][j].innerHTML="";
downbottom();
}
elseif(arr[i-1][j].innerHTML!=""&&arr[i][j].innerHTML!=""&&i>0&&arr[i-1][j].innerHTML==arr[i][j].innerHTML){
arr[i][j].innerHTML=2*arr[i-1][j].innerHTML;
arr[i-1][j].innerHTML="";
}
}
}
}

functiondownleft(){
for(vari=0;i<4;i++){
for(varj=0;j<4;j++){
if(arr[i][j].innerHTML==""&&j<3&&arr[i][j+1].innerHTML!=""){
arr[i][j].innerHTML=arr[i][j+1].innerHTML;
arr[i][j+1].innerHTML="";
downleft();
}elseif(j<3&&arr[i][j].innerHTML!=""&&arr[i][j+1].innerHTML!=""&&arr[i][j].innerHTML==arr[i][j+1].innerHTML){
arr[i][j].innerHTML=2*arr[i][j+1].innerHTML;
arr[i][j+1].innerHTML="";
}
}
}

}


functiondownright(){

for(vari=0;i<4;i++){
for(varj=3;j>0;j--){
if(j>0&&arr[i][j].innerHTML==""&&arr[i][j-1].innerHTML!=""){
arr[i][j].innerHTML=arr[i][j-1].innerHTML;
arr[i][j-1].innerHTML="";
downright();
}elseif(j>0&&arr[i][j].innerHTML!=""&&arr[i][j-1].innerHTML!=""&&arr[i][j].innerHTML==arr[i][j-1].innerHTML){
arr[i][j].innerHTML=2*arr[i][j-1].innerHTML;
arr[i][j-1].innerHTML="";
}
}
}

}

为不同的值添加不同的背景颜色：(可要可不要)

functioncolor(){

for(vari=0;i<4;i++){
for(varj=0;j<4;j++){
switch(arr[i][j].innerHTML){
case"":arr[i][j].style.backgroundColor="bisque";break;
case"2":arr[i][j].style.backgroundColor="red";break;
case"4":arr[i][j].style.backgroundColor="orange";break;
case"8":arr[i][j].style.backgroundColor="yellow";break;
case"16":arr[i][j].style.backgroundColor="green";break;
case"32":arr[i][j].style.backgroundColor="blue";break;
case"64":arr[i][j].style.backgroundColor="#000";break;
case"128":arr[i][j].style.backgroundColor="aqua";break;
case"256":arr[i][j].style.backgroundColor="pink";break;
}


}
}

}

然后整个窗口设置键盘监听事件：

上的keyCode：38
下的keyCode：40
左的keyCode：37
右的keyCode：39
没按一次
①调用对应方向的函数
②调用随机参数一个数的函数
③调用判断游戏是否结束的函数
④调用不同的值不同元素的函数
⑤游戏开始调用2次（默认有2个）

window.onkeydown=function(e){
switch(e.keyCode){
case37:downleft();sj();color();js();break;//左
case38:downtop();sj();color();js();break;//上
case39:downright();sj();color();js();break;//右
case40:downbottom();sj();color();js();break;//下
}

}
sj();//开局自动有默认的2个数
sj();

就完成了简单的2048小游戏！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

原生js实现2048小游戏

热门推荐

随机推荐