关闭

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

389人阅读 评论(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();                }        }}


0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

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

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

[前端 3]纯Js制作俄罗斯方块游戏

导读:在别人文章里看到了,然后写了一遍。结果出错了,然后调出来了,然后理解了一下,加了点注释,有一些想法。忘了在 哪一篇上面看的了,就贴不出来链接地址。原谅。呃,真没自己的东西,权当练打字了吧。其实,...
  • u013034889
  • u013034889
  • 2016-04-10 00:08
  • 1936

史上最短小精悍的javascript编写的俄罗斯方块游戏,仅仅60行代码

史上最短小精悍的javascript编写的俄罗斯方块游戏,仅仅60行代码,代码下载地址:http://www.zuidaima.com/share/1759652641295360.htm
  • yaerfeng
  • yaerfeng
  • 2014-04-28 09:52
  • 52096

史上最短小精悍的javascript编写的俄罗斯方块游戏,仅仅60行代码

原创整理不易,转载请注明出处:史上最短小精悍的javascript编写的俄罗斯方块游戏,仅仅60行代码 代码下载地址:http://www.zuidaima.com/share/17596526...
  • oMingZi12345678
  • oMingZi12345678
  • 2014-05-08 13:16
  • 733

iOS中定时器和RunLoop的设定

1 + (NSTimer *)scheduledTimerWithTimeInterval:(NSTimeInterval)ti target:(id)aTarget selector:(SEL)aS...
  • shanchelicun
  • shanchelicun
  • 2015-12-22 14:16
  • 1307

编写俄罗斯方块思路

一、首先要分析有哪些对象并且
  • ouz123456m
  • ouz123456m
  • 2014-07-22 09:37
  • 927

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

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

2048经典版震撼来袭,多种游戏模式,三种布局,来迎接挑战吧!

2048经典版震撼来袭,多种游戏模式,三种布局(3*3、4*4、5*5),两种风格(厚重、灵巧),来迎接挑战吧! appstore下载地址:https://itunes.apple.com/cn...
  • ysysbaobei
  • ysysbaobei
  • 2015-09-12 17:37
  • 3663

极客学院Android之2048游戏开发全过程

2048完整开发 课1、游戏2048玩法介绍 同一条线上的相同数字折叠 课2、创建2048游戏项目 修改布局 <LinearLayout xmlns:android="http://schemas...
  • faith_yee
  • faith_yee
  • 2015-04-03 16:31
  • 2119

基于Qt5的俄罗斯方块的开发学习(1)

以此篇博文纪念走过的2014年以及我刚刚起步的编程学习生涯。 首先声明这篇关于俄罗斯方块的文章也许不是很好但是我会尽自己的努力去说清重点,而细枝末节希望大家下载下来共同学习,所以这里只展示核心代码。...
  • yrh159357
  • yrh159357
  • 2015-01-20 23:18
  • 2140
    个人资料
    • 访问:21000次
    • 积分:472
    • 等级:
    • 排名:千里之外
    • 原创:20篇
    • 转载:37篇
    • 译文:0篇
    • 评论:0条
    文章分类