使用Javascript写的2048小游戏_javascript技巧
程序员文章站
2022-05-04 08:33:39
...
最近心血来潮,项目结束了,使用javascript写个小游戏,练练收吧,写的不好还请各位大侠给出批评建议。
HTML代码如下
Score:
Game Over!
Score:
Try again!
CSS代码如下
@charset "utf-8"; #gridPanel{width:480px;height:480px; margin:0 auto; background-color:#bbada0; border-radius:10px; position:relative; } .grid,.cell{width:100px; height:100px; border-radius:6px; } .grid{background-color:#ccc0b3; margin:16px 0 0 16px; float:left; } .cell{ /*margin:16px 0 0 16px; float:left; position:relative; z-index:10; top:-464px; left:0;*/ position:absolute; text-align:center; line-height:100px; font-size:60px; } #c00,#c01,#c02,#c03{top:16px;} #c10,#c11,#c12,#c13{top:132px;} #c20,#c21,#c22,#c23{top:248px;} #c30,#c31,#c32,#c33{top:364px;} #c00,#c10,#c20,#c30{left:16px;} #c01,#c11,#c21,#c31{left:132px;} #c02,#c12,#c22,#c32{left:248px;} #c03,#c13,#c23,#c33{left:364px;} .n2{background-color:#eee3da} .n4{background-color:#ede0c8} .n8{background-color:#f2b179} .n16{background-color:#f59563} .n32{background-color:#f67c5f} .n64{background-color:#f65e3b} .n128{background-color:#edcf72} .n256{background-color:#edcc61} .n512{background-color:#9c0} .n1024{background-color:#33b5e5} .n2048{background-color:#09c} .n4096{background-color:#a6c} .n8192{background-color:#93c} .n8,.n16,.n32,.n64, .n128,.n256,.n512, .n1024,.n2048,.n4096,.n8192{color:#fff} .n1024,.n2048,.n4096,.n8192{font-size:40px} /*分数显示*/ p{width:480px; margin:0 auto; font-family:Arial;font-weight:bold; font-size:40px; padding-top:15px; } /*Game Over*/ #gameOver{width:100%; height:100%; position:absolute; top:0; left:0; display:none; } #gameOver>div{width:100%; height:100%; background-color:#555; opacity:.5; } #gameOver>p{width:300px; height:200px; border:1px solid #edcf72; line-height:1.6em; text-align:center; background-color:#fff; border-radius:10px; position:absolute; top:50%; left:50%; margin-top:-135px; margin-left:-150px; } .button{padding:10px; border-radius:6px; background-color:#9f8b77; color:#fff; cursor:pointer; }
javascript代码如下
var game={ data:[],//保存所有数字的二维数组 rn:4, //总行数 cn:4, //总列数 state: 0, //游戏当前状态:Running|GameOver RUNNING:1, GAMEOVER:0, score:0, //分数 isGameOver:function(){//判断游戏状态为结束 //如果没有满,则返回false if(!this.isFull()){ return false; }else{//否则 //从左上角第一个元素开始,遍历二维数组 for(var row=0;row=0.5 // 2 4 // 随机生成一个数指下一个元素的列下标 //从col+1开始,遍历row行中剩余元素, 0结束 for(var col=this.cn-1;col>0;col--){ var nextc=this.getLeftNext(row,col); if(nextc==-1){ break; }else{ if(this.data[row][col]==0){ this.data[row][col]= this.data[row][nextc]; this.data[row][nextc]=0; col++; }else if(this.data[row][col]== this.data[row][nextc]){ this.data[row][col]*=2; this.data[row][nextc]=0; this.score+=this.data[row][col]; } } } }, /*找当前位置左侧,下一个不为0的数*/ getLeftNext:function(row,col){ //nextc从col-1开始,遍历row行中剩余元素,>=0结束 for(var nextc=col-1;nextc>=0;nextc--){ // 遍历过程中,同getRightNext if(this.data[row][nextc]!=0){ return nextc; } }return -1; }, /*获得任意位置下方不为0的位置*/ getDownNext:function(row,col){ //nextr从row+1开始,到 0结束,row-- for(var row=this.rn-1;row>0;row--){ var nextr=this.getUpNext(row,col); if(nextr==-1){ break; }else{ if(this.data[row][col]==0){ this.data[row][col]= this.data[nextr][col]; this.data[nextr][col]=0; row++; }else if(this.data[row][col]== this.data[nextr][col]){ this.data[row][col]*=2; this.data[nextr][col]=0; this.score+=this.data[row][col]; } } } }, /*获得任意位置上方不为0的位置*/ getUpNext:function(row,col){ for(var nextr=row-1;nextr>=0;nextr--){ if(this.data[nextr][col]!=0){ return nextr; } }return -1; } } //onload事件:当页面加载*后*自动执行 window.onload=function(){ game.start();//页面加载后,自动启动游戏 //当按键盘按键时,触发移动: document.onkeydown=function(){ //获得事件对象中键盘号:2步 //事件对象:在事件发生时自动创建 // 封装了事件的信息 if(game.state==game.RUNNING){ //Step1: 获得事件对象 var e=window.event||arguments[0]; //IE DOM标准 //Step2: 获得键盘号:e.keyCode if(e.keyCode==37){ game.moveLeft(); }else if(e.keyCode==39){ game.moveRight(); }else if(e.keyCode==38){ game.moveUp(); }else if(e.keyCode==40){ game.moveDown(); } //如果按左键,调用moveLeft //否则如果按右键,调用moveRight } } }
以上代码就是使用javascript写的2048小游戏,代码简单易懂并附有注释,希望大家喜欢。
推荐阅读
-
使用VSCode调试javascript/typescript的一个技巧
-
JavaScript ES6中的简写语法总结与使用技巧
-
5个技巧写更好的JavaScript条件语句
-
JavaScript小技巧:!!的使用
-
js对数字的格式化使用说明_javascript技巧
-
IE6中使用position导致页面变形的解决方案(js代码)_javascript技巧
-
使用apply方法处理数组的三个技巧[译]_javascript技巧
-
使用js解决由border属性引起的div宽度问题_javascript技巧
-
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法_javascript技巧
-
JavaScript中的this关键字介绍与使用实例_javascript技巧