加入JavaScript 定时器开发俄罗斯方块模式的2048项目

466人阅读 评论(0) 收藏 举报
2048项目开始的前一天才知道JavaScript能开发游戏,出于好奇(一直都没玩过这个游戏),就在手机上下载了2048这个游戏。发现其中除了原版的2048游戏外还有很多的模式,其中的下落模式(类似俄罗斯方块,因此我称之为俄罗斯方块模式)让我很感兴趣,便产生了开发这样模式的想法,同时也为后面用JavaScript开发俄罗斯方块做热身。下图为最终效果图:
 
俄罗斯方块模式的2048与原版2048相比,一开始以为也是简单的数据相加而已,似乎没什么,可是真正去做的时候才发现没有那么容易。首先,原版2048你每一次操作都是整体进行计算,但是俄罗斯方块模式的2048你每一次操作仅仅针对正在下落的那个方块,我将正在下落的方块称为“当前方块”,下一次出现的方块称为 next方块 ;其次,俄罗斯方块模式的2048的数据计算比较复杂些,“当前方块”下落后要与下面的方块进行合并,在与左边右边方块合并,然后还可能继续往下合并,同时与左边方块合并后也会影响其他方块,又要进行合并,合并过程有点复杂,担心表达不够清楚,下面一张图列举了一个合并的例子。因此在原有2048项目的基础上改为俄罗斯方块模式主要做了如下改变:
1、键盘上的方向键不是控制所有方块的移动,而是控制正在下落的方块即 当前方块,为了能单独控制该方块给game对象新增两个属性:curRow 和 curCol ;
2、当前方块 左右移动时候只需更新相邻两个方块的样式,不必要去更新整个game的视图,为此新定义了一个函数 updateViewTwo() ;
3、加入周期性定时器,实现 当前方块 缓慢向下移动,给game对象增加一个方法timerDown();
4、当前方块 下落到底部要进行与周围数据相加,比起原版 2048 游戏要复杂得多,这是这个模式难点,为此定义了一个递归函数addData(),来实现数据的相加;
 
部分主要代码如下:(curRow、curCol为game新增属性,用来定义正在下落的 当前方块 的坐标)
        updateViewTwo:function(row1,col1,row2,col2){//交换两个方块的视图更新函数                var myid1="c"+row1+col1;                var myid2="c"+row2+col2;                var mydiv1=document.getElementById(myid1);                var mydiv2=document.getElementById(myid2);                mydiv1.innerHTML=this.data[row1][col1];                mydiv1.className="gr n"+this.data[row1][col1];                mydiv2.innerHTML="";                mydiv2.className="gr";        },        initialize:function(){//页面加载完成后进行初始化游戏                this.score=0;                this.gold=0;                this.data=[[0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0],                                        [0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,0]];                this.dataNext=this.dataR[parseInt(Math.random()*6)];                this.data[this.curRow][this.curCol]=this.dataR[parseInt(Math.random()*6)];                var divnext=document.getElementById("cnext");                divnext.innerHTML=this.dataNext;                game.updateView();        },        addData:function(row,col){//实现数据相加计算                if (game.data[row][col]!=0) {                        if(row!=8&&game.data[row+1][col]==0){//向下移动                                game.data[row+1][col]=game.data[row][col];                                game.data[row][col]=0;                                game.addData(row-1,col);                                game.addData(row+1,col);                        }else if(row!=8&&game.data[row+1][col]==game.data[row][col]){//向下相加                                game.data[row+1][col]=2*game.data[row][col];                                game.score+=game.data[row+1][col];                                if (game.data[row+1][col]==512) game.gold++;                                game.data[row][col]=0;                                game.addData(row+1,col);                        }else if (col!=0&&game.data[row][col-1]==game.data[row][col]) {//向左相加                                game.data[row][col]*=2;                                game.score+=game.data[row][col];                                if (game.data[row][col]==512) game.gold++;                                game.data[row][col-1]=0;                                game.addData(row-1,col-1);                                game.addData(row,col);                        }                        else if (col!=7&&game.data[row][col+1]==game.data[row][col]) {//向左相加                                game.data[row][col]*=2;                                game.score+=game.data[row][col];                                if (game.data[row][col]==512) game.gold++;                                game.data[row][col+1]=0;                                game.addData(row-1,col+1);                                game.addData(row,col);                        }                }        }        timerDown:function(){//加入定时器实现当前方块块缓慢下落函数                gameTime=setInterval(                        function(){                                if (game.curRow!=8&&game.data[game.curRow+1][game.curCol]==0) {//判断条件不可调换,否则不能达到预期目的                                        game.data[game.curRow+1][game.curCol]=game.data[game.curRow][game.curCol];                                        game.data[game.curRow][game.curCol]=0;                                        game.curRow++;                                        game.updateViewTwo(game.curRow,game.curCol,game.curRow-1,game.curCol);                                }else{                                        clearInterval(gameTime);                                        game.addData(game.curRow,game.curCol);                                        game.nextGame();                                }                        }                        ,1000);        },        suspend:function(){//暂停游戏,专为上箭头键和A键设定用于暂停游戏                game.state=0;                btn.innerHTML="开始游戏";                clearInterval(gameTime);        },        keyDown:function(){                clearInterval(gameTime);                game.addData(game.curRow,game.curCol);                game.nextGame();        },        keyLeft:function(){//定义当前方块向左移动的函数                if(this.curCol>0&&this.data[this.curRow][this.curCol-1]==0){                        var temp=this.data[this.curRow][this.curCol];                        this.curCol--;                        this.data[this.curRow][this.curCol+1]=0;                        this.data[this.curRow][this.curCol]=temp;                        this.updateViewTwo(this.curRow,this.curCol,this.curRow,this.curCol+1);                }        },        keyRight:function(){//定义当前方块向右移动的函数                if(this.curCol<7&&this.data[this.curRow][this.curCol+1]==0){                        var temp=this.data[this.curRow][this.curCol];                        this.curCol++;                        this.data[this.curRow][this.curCol-1]=0;                        this.data[this.curRow][this.curCol]=temp;                        this.updateViewTwo(this.curRow,this.curCol,this.curRow,this.curCol-1);                }        },        nextGame:function(){//每次方块下落前进行初始设置                if(this.data[0][2]==0&&this.data[0][4]==0&&this.data[0][3]==0){                        this.curRow=0;                        this.curCol=3;                        this.data[this.curRow][this.curCol]=this.dataNext;                        this.dataNext=this.dataR[parseInt(Math.random()*6)];                        this.updateView();                        this.timerDown();                }else{                        this.state==0;                        btn.innerHTML="开始游戏";                        gameOver.style.display="block";                }        },document.getElementById("st").onclick=function(event){//绑定开始游戏的按钮,开始或者暂停游戏        var src=event.srcElement||event.target;        if (src.innerHTML=="开始游戏") {                game.timerDown();                game.state=1;                src.className="st_end";                src.innerHTML="暂停游戏";        }else{                src.innerHTML="开始游戏";                game.state=0;                src.className="st_start";                clearInterval(gameTime);        }        }document.getElementById('game_again').onclick=function(event){        gameOver.style.display="none";        game.initialize();}window.onload=function(){        game.initialize();        document.onkeydown=function(){                if(game.state==1){                        var event=window.event||arguments[0];                        var code=event.keyCode;                        if(code==37||code==65) game.keyLeft();                        if(code==38||code==87) game.suspend();//暂停                        if(code==39||code==68) game.keyRight();                        if(code==40||code==83) game.keyDown();                }        }}


查看评论

MVC架构学习--俄罗斯方块

MVC框架简介 MVC 是一种使用 MVC(Model View Controller 模型-视图-控制器)设计创建 Web 应用程序的模式:[1] Model(模型)表示应用程序核心(比如数据...
  • gsm958708323
  • gsm958708323
  • 2018-02-01 17:04:23
  • 203

纯js 实现 2048 游戏

  • 2015年08月03日 12:31
  • 8KB
  • 下载

原生JS实现网页版俄罗斯方块

  • 2017年05月06日 22:41
  • 26KB
  • 下载

屌丝也能开发安卓版2048(App Inventor)

想编写安卓游戏,java太难,来试试App Inventor,虽然有人认为他是中学生的玩具,但是也能编写2048这样的火爆游戏,不需要太复杂的算法。 整个游戏有几个模块: 一、游戏初始化 数列转化...
  • u011330225
  • u011330225
  • 2014-05-11 15:48:38
  • 7210

纯js实现俄罗斯方块详解与源码

对于小白来说用js实现俄罗斯方块还是有难度的,网上找了很多代码看,有的很长难懂,有的短小精悍,但不只用到了js还用到了框架,对于还未接触框架的小白宝宝,也只能无奈自己是小白了,自己写不出来那就找一篇纯...
  • d1105260363
  • d1105260363
  • 2017-08-23 17:54:45
  • 915

iOS swift 2048小游戏开发教程(一)

iOS开发 swift3  实战项目之 2048游戏 之前看过网上很多写小项目的文章,但大多是旧版或者不全的,这里推出swift3  项目之2048给大家分享...
  • m0_38076563
  • m0_38076563
  • 2017-04-05 12:50:39
  • 1269

js版俄罗斯方块设计思想及实现

俄罗斯方块方块是小时候的一个回忆,从最开始的掌上的黑白游戏机,到电视游戏机,到电脑,无不有它的痕迹,今天我们来一起重温它的一种实现方法,也算是整理一下我的思路吧...... 1.以中心点坐标代替整个...
  • luqin1988
  • luqin1988
  • 2013-01-18 09:50:33
  • 4429

关于2048小游戏项目的一些心得

一个关于2048小游戏的项目,主要使用了一些比较基础的技术,贴出来和大家分享一下...
  • Phoenix500526
  • Phoenix500526
  • 2015-04-03 22:22:46
  • 2281

Qt小游戏开发:俄罗斯方块

作为一个即将步入游戏行业的新人,手写经典小游戏是必备技能哦。 预览 由于录屏软件的问题,颜色和帧率与实际有所出入,不过不影响。 步骤 1 新建工程 建一个基类为QWidget的QT gui...
  • u012234115
  • u012234115
  • 2015-05-25 10:43:57
  • 3157

Java 俄罗斯方块(包含3种游戏模式)(遵循MVC模式开发)

  • 2017年06月07日 00:35
  • 53.1MB
  • 下载
    个人资料
    持之以恒
    等级:
    访问量: 2万+
    积分: 494
    排名: 10万+
    文章分类
    文章存档