一个简单的2048小游戏

2048小游戏的核心是：通过控制键盘上的“上”、“下”、“左”、“右”键来实现数字的移动、相加、以及生成新的数字。

上图为运行后的结果，我随便操作了几下，可以看到图片上有数字2，数字4，数字8，数字16，数字32，其中只有2和4是可以随机生成的，其他的都是根据上下左右操作获得的，下面提供2048的js代码：

var game={score :0,         //分数status :1,          //游戏处于的状态gameover :0,       //游戏结束gamerunning :1,       //游戏进行中data : [],start :function(){                  //开始this.status=this.gamerunning;this.score=0;this.data=[]; //生成一个数组用来存放格子里的数字for(var r=0;r<4;r++){this.data[r]=[];for(var c=0;c<4;c++){this.data[r][c]=0;    //初始化每个格子,使其值为0}}this.randomNum();  //在一个随机的格子上随机生成2或4this.randomNum();this.dataView();console.log(this.data);},randomNum:function(){                           //随机数var r=Math.floor(Math.random()*4);var c=Math.floor(Math.random()*4);if(this.data[r][c]==0){var num=Math.random() >0.2 ? 2 : 4;//三元表达式随机生成2或4this.data[r][c]=num;}else{    //这边我用的是else重新调用函数,也可以通过while死循环和break来实现在没有数值的格子上随机生成2或4.this.randomNum();}},dataView : function(){                         //数据可视化for(var r=0;r<4;r++){for(var c=0;c<4;c++){var div=document.getElementById("c"+ r + c);//通过不同的id名获取对应的div元素节点if(this.data[r][c]!=0){       //判断数字不为0(初始值),就将该数字显示在页面上div.innerHTML=this.data[r][c];div.className="cell n"+this.data[r][c];//通过修改class名来实现不同数字会有不同的样式}else{div.innerHTML="";    //没有数值就不显示内容div.className="cell";//class名为初始值}}}document.getElementById("score01").innerHTML=this.score;//把分数显示在页面上if(this.status==this.gameover){document.getElementById("score02").innerHTML=this.score;document.getElementById("gameover").style.display="block";}else{document.getElementById("gameover").style.display="none";}},//游戏结束时修改元素样式使其显现在页面上isGameover :function(){                             //游戏结束for(var r=0 ;r<4;r++){for(var c=0;c<4;c++){if(this.data[r][c]==0){  //如果还有格子的数值是0,证明游戏还没结束return false;}if(c<3){ if(this.data[r][c]==this.data[r][c+1]){return false;}}if(r<3){if(this.data[r][c]==this.data[r+1][c]){return false;}} //如果有上下或左右相邻的数是一样的,那么游戏还没有结束}}return true;//如果以上情况都没有,返回true,游戏结束.},moveLeft:function(){                        //点击左键var before=String(this.data);  //一个不为0的数for(var r=0; r<4;r++){this.moveLeftRow(r);}var after =String(this.data) //同一行相邻的另一个数(可能为0(就是格子上没有数))if(before!=after){ this.randomNum();  //如果两数不相等,在随机位置生成2或4;if(this.isGameover()){this.status=this.gameover; //判断游戏是否结束}this.dataView();   //渲染页面}},moveLeftRow:function(r){   //单独抽出一行进行写逻辑for(var c=0;c<3;c++){  //最左边的不需要移动，所以遍历3次var nextc=this.getNextinRow(r,c);// 找出r行c列后面不为0的数据的位置保存至nextc中if(nextc !=-1){  //这一行有需要移动的if(this.data[r][c]==0){//一定是把所有需要移动的数据移动到靠左的位置this.data[r][c]=this.data[r][nextc];this.data[r][nextc]=0;c--;//c留在原地继续左移}else if(this.data[r][c]==this.data[r][nextc]){this.data[r][c]=this.data[r][c]*2;this.score +=this.data[r][c];   //分数this.data[r][nextc]=0;                                          }}else{// 这一行中没有需要移动的数据break;}}},getNextinRow: function(r,c){for(var i=c+1;i<4;i++){// 如果数据不为0，表示找到了，返回i，i对应的是当前数据的列下标if(this.data[r][i]!=0){return i;}}return -1;},moveUp: function(){                             //向上var before=String(this.data);for(var c=0;c<4;c++){this.moveUpCell(c);}var after =String(this.data)if(before!=after){this.randomNum();if(this.isGameover()){this.status=this.gameover;}this.dataView();}},moveUpCell:function(c){for(var r=0;r<3;r++){var nextr=this.getUpCell(r,c);if(nextr!=-1){if(this.data[r][c]==0){this.data[r][c]=this.data[nextr][c];this.data[nextr][c]=0;r--;}else if(this.data[r][c]==this.data[nextr][c]){this.data[r][c]=this.data[nextr][c]*2;this.score +=this.data[r][c];this.data[nextr][c]=0;}}else{break;}}},getUpCell :function(r,c){   //向上for(var i=r+1;i<4;i++){if(this.data[i][c]!=0){return i;}}return -1;},getRightRow :function(r,c){            //向右for(var i=c-1;i>=0;i--){if(this.data[r][i]!=0){return i;}}return -1;},moveRightRow: function(r){for(var c=3;c>=0;c--){  //c需要=3,不然移动时会移动不到最右边(别问我怎么知道的!!!)var nextc=this.getRightRow(r,c);if(nextc !=-1){if(this.data[r][c]==0){this.data[r][c]=this.data[r][nextc];this.data[r][nextc]=0;c++;}else if(this.data[r][c]==this.data[r][nextc]){this.data[r][c]=this.data[r][c]*2;this.score +=this.data[r][c];   this.data[r][nextc]=0;                                          }}else{break;}}},  moveRight: function(){                 //向右var before=String(this.data);for(var r=3;r>=0;r--){this.moveRightRow(r);}var after =String(this.data)if(before!=after){this.randomNum();if(this.isGameover()){this.status=this.gameover;}this.dataView();}},getPreCell :function(r,c){          //向下for(var i=r-1;i>=0;i--){if(this.data[i][c]!=0){return i;}}return -1;},moveDownCell: function(c){for(var r=3;r>=0;r--){var nextr=this.getPreCell(r,c);if(nextr !=-1){if(this.data[r][c]==0){this.data[r][c]=this.data[nextr][c];this.data[nextr][c]=0;r++;}else if(this.data[r][c]==this.data[nextr][c]){this.data[r][c]=this.data[r][c]*2;this.score +=this.data[r][c];   //分数this.data[nextr][c]=0;                                          }}else{break;}}},  moveDown: function(){               //向下移动var before=String(this.data);for(var c=3;c>=0;c--){this.moveDownCell(c);}var after =String(this.data)if(before!=after){this.randomNum();if(this.isGameover()){this.status=this.gameover;}this.dataView();}},
}
game.start();  //调用函数,游戏开始
document.onkeydown=function(event){if(event.keyCode==37){game.moveLeft();}else if(event.keyCode==38){game.moveUp();}else if(event.keyCode==39){game.moveRight();}else if(event.keyCode==40){game.moveDown();}
}

上面把向左移动介绍的比较详细,向右,向上,向下的函数方法和向左方法差不多类似,只需要修改少量数据就行。
移动逻辑:根据需要移动的方向,从左往右,从上往下…循环来找第一个非零的数据在数组中的下标,循环查找完一行(列)中的所有数据,然后通过下标赋值来实现移动,之后判断相邻数是否相同,相同就相加,再循环操作每一行(列)的数据,判断游戏是否结束,没有就继续随机生成2或4；通过键盘按键点击事件触发对应的函数，实现2048小游戏。

快来自己写一个，看看可以玩到多少分。

一个简单的2048小游戏相关推荐

python简单小游戏代码_一个简单的python小游戏---七彩同心圆
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理用pygame做一个简单的python小游戏-七彩同心圆玩法:每次点击鼠标时,会以鼠标为圆心,不断 ...
用pygame做一个简单的python小游戏---贪吃蛇
用pygame做一个简单的python小游戏-贪吃蛇贪吃蛇游戏博客链接:(方法一样,语言不一样) c++贪吃蛇:https://blog.csdn.net/weixin_46791942/artic ...
用pygame做一个简单的python小游戏---七彩同心圆
用pygame做一个简单的python小游戏-七彩同心圆这个小游戏原是我同学python课的课后作业,并不是很难,就简单实现了一下,顺便加强一下pygame库的学习. 玩法:每次点击鼠标时,会以鼠标 ...
用pygame做一个简单的python小游戏---生命游戏
用pygame做一个简单的python小游戏-生命游戏生命游戏(Game of Life) 生命游戏(Game of Life)是剑桥大学约翰·何顿·康威(John Horton Conway)教授 ...
python七彩同心圆_用pygame做一个简单的python小游戏---七彩同心圆
用pygame做一个简单的python小游戏---七彩同心圆用pygame做一个简单的python小游戏-七彩同心圆这个小游戏原是我同学python课的课后作业,并不是很难,就简单实现了一下,顺便 ...
做一个简单的java小游戏--单机版五子棋
做一个简单的java小游戏–单机版五子棋学了java有一段时间了,今天就来搞一个简单的单机版五子棋游戏. 实现功能:那必须能进行基础的输赢判断.还有重新开始的功能,悔棋的功能,先手设置的功能和退出的 ...
一个简单的纸牌小游戏
一个简单的纸牌小游戏初始化页面布局 function initView(){var html = html2 = '';for(var i=1;i<=10;i++){html += '< ...
Friends——一个简单的Processing小游戏
Friends--一个简单的Processing小游戏背景前言人类永远是矛盾的个体,我们一边喜爱着无垠的夜空,一边又恐惧着深邃的孤独- 在无边无际的的黑夜中,每一个光点都是一个孤独的个体,他们本应 ...
制作一个简单的switch小游戏
好的,那么,我们可以这样来制作一个简单的 switch 小游戏: 首先,我们需要先引入所需的库,如 stdio.h 和 stdlib.h. 接着,我们可以使用 printf 和 scanf 函数来输出 ...

一个简单的2048小游戏

一个简单的2048小游戏相关推荐

最新文章

热门文章