使用JavaScript编写一个2048小游戏

　　介绍

今天就跟大家聊聊有关使用JavaScript编写一个2048小游戏,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

JavaScript可以做什么

1。可以使网页具有交互性,例如响应用户点击,给用户提供更好的体验。 　　2 .可以处理表单,检验用户的输入,并提供及时反馈节省用户时间。 　　3 .可以根据用户的操作,动态的创建页面。 　　4使用JavaScript可以通过设置饼干存储在浏览器上的一些临时信息。

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

& lt; div  id=癰ox"在//一个盒子里面16个小div 　　,& lt; div  id=皊on"祝辞& lt;/div> 　　,& lt; div  id=皊on"祝辞& lt;/div> 　　,& lt; div  id=皊on"祝辞& lt;/div> 　　,& lt; div  id=皊on"祝辞& lt;/div> 　　,& lt; div  id=皊on"祝辞& lt;/div> 　　,& lt; div  id=皊on"祝辞& lt;/div> 　　,& lt; div  id=皊on"祝辞& lt;/div> 　　,& lt; div  id=皊on"祝辞& lt;/div> 　　,& lt; div  id=皊on"祝辞& lt;/div> 　　,& lt; div  id=皊on"祝辞& lt;/div> 　　,& lt; div  id=皊on"祝辞& lt;/div> 　　,& lt; div  id=皊on"祝辞& lt;/div> 　　,& lt; div  id=皊on"祝辞& lt;/div> 　　,& lt; div  id=皊on"祝辞& lt;/div> 　　,& lt; div  id=皊on"祝辞& lt;/div> 　　,& lt; div  id=皊on"祝辞& lt;/div> 　　& lt;/div>

<强>设置对应的样式:(仅供参考)

#箱{ 　　,宽度:450 px; 　　,身高:450 px; 　　,背景颜色:棕色; 　　,显示:flex; 　　,flex-wrap:包装; 　　,justify-content: space-evenly; 　　,边界:1 px  solid  # 000; 　　,保证金:100 px 汽车; 　　,这个特性:10 px; 　　,} 　　,div> div { 　　,margin-top: 5 px; 　　,宽度:100 px; 　　,身高:100 px; 　　,这个特性:5 px; 　　背景颜色:大敌;陶瓷; 　　,text-align:中心; 　　,行高:100 px; 　　,字体大小:40像素; 　　以前,}

效果如下:

使用JavaScript编写一个2048小游戏

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

var  divs =, document.querySelectorAll (& # 39; [id ==的儿子]& # 39;);

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

var  arr =, [[]、[] [], []]; 　　var  a =, 0; 　　(var  i=0,小姐:& lt;, 4,,小姐:+ +){ 　　,(var  j=0, j  & lt;, 4,, j + +) { 　　所以,arr[我][j],=, div [a]; 　　,+ +; 　　,} 　　}

这就形成了:i和j轴

使用JavaScript编写一个2048小游戏

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

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

function  sj(){,//产生随机数 　　,var  a =, Math.floor (math . random (), *, 4); 　　,var  b =, Math.floor (math . random (), *, 4); 　　,如果(arr [a] [b] .innerHTML ==,““) { 　　,如果(math . random()在0.5){ 　　,arr[一][b] .innerHTML =, 2; 　　,其他}{ 　　,arr[一][b] .innerHTML =, 4; 　　,} 　　, 　　,其他}{//如果该格子不为空我们在执行函数 　　,sj (); 　　,} 　　}

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

function  js(){,//游戏是否结束 　　,var  bool =,真的; 　　,(var  i=0,小姐:& lt;, 4,,小姐:+ +){ 　　,(var  j=0, j  & lt;, 4,, j + +) { 　　所以,如果(arr[我][j] .innerHTML ==,““) { 　　时间=bool 才能;假; 　　,其他}{ 　　,, 　　,} 　　,} 　　}大敌; 　　,如果(bool) { 　　,警报(“游戏结束“); 　　,(var  i=0,小姐:& lt;, 4,,小姐:+ +){ 　　,(var  j=0, j  & lt;, 4,, j + +) { 　　所以,arr[我][j],=,零; 　　,} 　　,} 　　, 　　,} 　　}

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

<强>以按上键为例子:

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

使用JavaScript编写一个2048小游戏