相思资源网 Design By www.200059.com
最近心血来潮,项目结束了,使用javascript写个小游戏,练练收吧,写的不好还请各位大侠给出批评建议。
HTML代码如下
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <link rel="stylesheet" href="2048.css"/> <script src="/UploadFiles/2021-04-02/2048.js">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<this.rn;row++){ for(var col=0;col<this.cn;col++){ //如果当前元素不是最右侧元素 if(col<this.cn-1){ // 如果当前元素==右侧元素 if(this.data[row][col]== this.data[row][col+1]){ return false; } } //如果当前元素不是最下方元素 if(row<this.rn-1){ // 如果当前元素==下方元素 if(this.data[row][col]== this.data[row+1][col]){ return false; } } } }return true; } }, start:function(){//游戏开始 this.state=this.RUNNING; //找到游戏结束界面,隐藏 var div=document.getElementById("gameOver"); div.style.display="none"; this.data=[//初始化二维数组 [0,0,0,0], [0,0,0,0], [0,0,0,0], [0,0,0,0] ]; this.score=0; //重置分数为0 /*for(var r=0;r<this.rn;r++){ this.data[r]=[];//向空数组中添加每一行数组 for(var c=0;c<this.cn;c++){ //向当前空行数组中加默认元素0 this.data[r][c]=0; } }*/ //在两个随机位置生成2或4 this.randomNum(); this.randomNum(); //将数据更新到页面 this.updateView(); }, isFull:function(){//判断当前数组是否已满 for(var row=0;row<this.rn;row++){//遍历二维数组 for(var col=0;col<this.cn;col++){ // 只要发现当前元素==0 if(this.data[row][col]==0){ return false; } } } //(如果循环正常退出) return true; }, randomNum:function(){//在随机空位置生成一个数 if(!this.isFull()){//如果*不*满,才{ while(true){//循环true //0-3随机生成一个行号row var row=parseInt(Math.random()*this.rn); //0-3随机生成一个列号col var col=parseInt(Math.random()*this.cn); //如果data[row][col]==0 if(this.data[row][col]==0){ // Math.random():<0.5 >=0.5 // 2 4 // 随机生成一个数<0.5"c"+row+col); //"c23" var curr=this.data[row][col]; //当前元素值 //修改div开始标签和结束标签之间的内容 div.innerHTML=curr!=0""; //修改div的class属性 div.className=curr!=0"cell n"+curr:"cell" // class } } var span=document.getElementById("score"); span.innerHTML=this.score; //判断并修改游戏状态为GAMEOVER if(this.isGameOver()){ this.state=this.GAMEOVER; var div=document.getElementById("gameOver"); var span=document.getElementById("finalScore"); span.innerHTML=this.score; //修改div的style属性下的display子属性为"block" div.style.display="block"; } },//updateView方法的结束 /*实现左移*/ /*找当前位置右侧,*下一个*不为0的数*/ getRightNext:function(row,col){ //循环变量:nextc——>指下一个元素的列下标 //从col+1开始,遍历row行中剩余元素,<cn结束 for(var nextc=col+1;nextc<this.cn;nextc++){ // 如果遍历到的元素!=0 if(this.data[row][nextc]!=0){ // 就返回nextc return nextc; } }return -1;//(循环正常退出,就)返回-1 }, /*判断并左移*指定行*中的每个元素*/ moveLeftInRow:function(row){ //col从0开始,遍历row行中的每个元素,<cn-1结束 for(var col=0;col<this.cn-1;col++){ // 获得当前元素下一个不为0的元素的下标nextc var nextc=this.getRightNext(row,col); // 如果nextc==-1,(说明后边没有!=0的元素了) if(nextc==-1){ break; }else{// 否则 // 如果当前位置==0, if(this.data[row][col]==0){ // 将下一个位置的值,当入当前位置 this.data[row][col]= this.data[row][nextc]; // 下一个位置设置为0 this.data[row][nextc]=0; col--;//让col退一格,重复检查一次 }else if(this.data[row][col]== this.data[row][nextc]){ // 否则,如果当前位置==nextc的位置 // 将当前位置*=2; this.data[row][col]*=2; // 下一个位置设置为0; this.data[row][nextc]=0; // 将当前位置的值,累加到score上 this.score+=this.data[row][col]; } } } }, /*移动所有行*/ moveLeft:function(){ var oldStr=this.data.toString(); //循环遍历每一行 for(var row=0;row<this.rn;row++){ // 调用moveLeftInRow方法,传入当前行号row this.moveLeftInRow(row); }//(循环结束后) var newStr=this.data.toString(); if(oldStr!=newStr){ //调用randomNum(),随机生成一个数 this.randomNum(); //调用updateView(),更行页面 this.updateView(); } }, moveRight:function(){ var oldStr=this.data.toString(); for(var row=0;row<this.rn;row++){ this.moveRightInRow(row); } var newStr=this.data.toString(); if(oldStr!=newStr){ this.randomNum(); this.updateView(); } }, /*判断并右移*指定行*中的每个元素*/ moveRightInRow:function(row){ //col从cn-1开始,到>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开始,到<this.rn结束 for(var nextr=row+1;nextr<this.rn;nextr++){ if(this.data[nextr][col]!=0){ return nextr; } }return -1; }, /*判断并上移*指定列*中的每个元素*/ moveUpInCol:function(col){ //row从0开始,到<rn-1,遍历每行元素 for(var row=0;row<this.rn-1;row++){ // 先获得当前位置下方不为0的行nextr var nextr=this.getDownNext(row,col); if(nextr==-1){ break; // 如果nextr==-1 }else{// 否则 // 如果当前位置等于0 if(this.data[row][col]==0){ // 将当前位置替换为nextr位置的元素 this.data[row][col]= this.data[nextr][col]; // 将nextr位置设置为0 this.data[nextr][col]=0; row--;//退一行,再循环时保持原位 }else if(this.data[row][col]== this.data[nextr][col]){ // 否则,如果当前位置等于nextr位置 // 将当前位置*=2 this.data[row][col]*=2; // 将nextr位置设置为0 this.data[nextr][col]=0; // 将当前位置的值累加到score属性上 this.score+=this.data[row][col]; } } } }, /*上移所有列*/ moveUp:function(){ var oldStr=this.data.toString(); //遍历所有列 for(var col=0;col<this.cn;this.moveUpInCol(col++)); var newStr=this.data.toString(); if(oldStr!=newStr){ this.randomNum(); this.updateView(); } }, /*下移所有列*/ moveDown:function(){ var oldStr=this.data.toString(); for(var col=0;col<this.cn;this.moveDownInCol(col++)); var newStr=this.data.toString(); if(oldStr!=newStr){ this.randomNum(); this.updateView(); } }, moveDownInCol:function(col){ //row从this.rn-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小游戏,代码简单易懂并附有注释,希望大家喜欢。
标签:
javascript2048
相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com
暂无使用Javascript写的2048小游戏的评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。