原生js 实现2048小游戏

2048小游戏

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

<div id="box">//一个盒子里面16个小div<div id="son"></div><div id="son"></div><div id="son"></div><div id="son"></div><div id="son"></div><div id="son"></div><div id="son"></div><div id="son"></div><div id="son"></div><div id="son"></div><div id="son"></div><div id="son"></div><div id="son"></div><div id="son"></div><div id="son"></div><div id="son"></div></div>

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

 #box{width: 450px;height: 450px;background-color: brown;display: flex;flex-wrap: wrap;justify-content: space-evenly;border: 1px solid #000;margin: 100px auto;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

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

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

var arr = [[],[],[],[]];
var a = 0;
for(var i=0 ;i < 4; i ++){for(var j=0 ;j < 4; j++){arr[i][j] = divs[a];a++ ;}
}

这就形成了:i 和 j 轴

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

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

function sj(){    //产生随机数var a = Math.floor(Math.random() * 4);var b = 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();}
}

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

function  js(){    //游戏是否结束var bool = true;for(var i=0 ;i < 4; i ++){for(var j=0 ;j < 4; j++){if(arr[i][j].innerHTML == ""){bool = false;}else{}}}    if(bool){alert("游戏结束");for(var i=0 ;i < 4; i ++){for(var j=0 ;j < 4; j++){arr[i][j] = null;}}}
}

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

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

function downtop(){  //按上 执行的函数for(var i=0 ;i < 4; i ++){for(var j=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里了}else if(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个键的逻辑：

function downbottom(){for(var i=3 ;i > 0 ; i--){for(var j=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();}else if(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 = "";}}}
}function downleft(){for(var i=0 ;i < 4; i ++){for(var j=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();}else if( 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 = "";}}}}function downright(){for(var i=0 ;i < 4; i ++){for(var j = 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();}else if( 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 = "";}}}}

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

function color(){for(var i=0 ;i < 4; i ++){for(var j=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){case 37:  downleft();   sj(); color(); js();  break; //左case 38:  downtop();    sj(); color(); js();  break; //上case 39:  downright();  sj(); color(); js();  break; //右case 40:  downbottom(); sj(); color(); js();  break; //下}}
sj();   //开局自动有默认的2个数
sj();

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

原生js 实现2048小游戏相关推荐

原生JS实现2048小游戏
前几天玩了一款2048微信小程序,结果脑子一抽,想到了为什么不能自己用JS写一个于是,下面这个玩意儿就诞生了... 实现思路大概是这样的,首先使用table表格完成页面布局,其次使用JS实现数字动态 ...
使用JS实现2048小游戏
JS实现2048小游戏源码效果图: 代码如下,复制即可使用: (适用浏览器:360.FireFox.Chrome.Opera.傲游.搜狗.世界之窗. 不支持Safari.IE8及以下浏览器.) &l ...
如何用html5制作抽奖游戏,原生js实现抽奖小游戏
这个小游戏可以设置为抽奖小游戏,也可以设置为随机点名器,这个软件实现可以多次获取同一个元素的 1.HTML结构代码如下: 开始点名停止幸运的的你 2.css样式设置页面代码如下: css代码不仅仅 ...
原生js做h5小游戏之打砖块
前言首先,先说明一下做这个系列的目的:其实主要源于博主希望熟练使用 canvas 的相关 api ,同时对小游戏的实现逻辑比较感兴趣,所以希望通过这一系列的小游戏来提升自身编程能力:关于 es6 语 ...
web前端练手小项目——使用js实现2048小游戏
实现的效果图: 计分规则:每合并一次增加两个分游戏涉及到的文件: 实现的html代码: <!DOCTYPE html> <html lang="en">& ...
原生js完成拼图小游戏
废话不说,看代码,图片可以自己找,我这直接引用了百度的了 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/x ...
原生JS制作抽奖小游戏
<div class="box"><div id="grid1" class="grid">电信优惠卷</di ...
html5猜数字游戏代码,js猜数字小游戏的简单实现代码
复制代码代码如下: 简易计算机 //获取随机数 function GetRandomNum(Min,Max) { var Range = Max - Min; var Rand = Math.ran ...
2048小游戏（原生js基础代码篇）
今天在这里,我将给各位呈现一个简单的游戏代码. 想必大家都接触过2048这个小游戏吧,在悠闲时间用于消遣时间最好不过了,那么,我给大家写一个2048最基本的原生js代码. HTML: <!DOC ...

原生js 实现2048小游戏

2048小游戏

原生js 实现2048小游戏相关推荐

最新文章

热门文章