手机版

用Javascript编写俄罗斯方块的想法和示例

时间:2021-09-09 来源:互联网 编辑:宝哥软件园 浏览:

俄罗斯方块也是手机兼容的。这个游戏的难点是如何翻转方块。实现这一点的方法是将方块放入二维数组中,然后逆时针旋转二维数组。

还有其他的方法,比如直接用一个全局变量来表示一个方向,翻转的时候根据这个变量来转动盒子,但是要写更多的代码。

我在图书馆搜索中找到一篇关于算法的文章,看着善意:

游戏截图PC端:

游戏截图手机:

模板引擎中使用了HandlebarsJS,为了更好的模块化,还使用了requireJS.它是无用的;

运行以下代码

var cfg={ width:14,height:20,time : 400 };require js . config({ base URLs : ' libs ',paths: { app: './app ' } });require js([' app/controller/main controller ',' app/view/mobileDOM ',' app/util'],function(con,mobileDOM,util){ if(util . ismobile()){ mobile DOM . adddom();};con();});游戏主要有三个模型层:游戏盒子模型层、游戏评分模型层和游戏整体界面结构模型层;

只有一个控制层,就是当用户点击按钮开始游戏时,游戏就会开始。如果是个人电脑,它将监控按键事件。如果是移动终端,会新建一个四个方向键的DOM,监控方向键的点击事件。该事件将使当前块的数据模型旋转。至于显示,是视图层的问题,不用担心。主要逻辑包括随机生成块、块冲突检测、块消除和分数增加。

运行以下代码

定义(['app/util'],函数(util) { //分数模块,游戏开始的时候会用到;定义变量得分={ };需要(['app/model/score'],函数(defines core){ score=defines core;});var startGame=function() { //把当前的投入元素禁用;$(这个)。attr('disabled ',' true ');requirejs(['app/model/data ',' app/view/init ',' app/model/Block'],函数(数据,视图,Block){ //初始化方块;变化块=新块;var mapData={ };//方块发生改变的时候,我们用回调重新渲染界面;封锁。ONU pdate(function(){ var block data=this。get();//把数据格式转化成地图数据;mapData=数据。扩展(块数据);$('#table ').html(视图(mapData));});封锁。TestTouch=数据。TestTouch//如果元素触底了或者是元素已经被卡主不能动的情况下;block.onend(function() { //这个说明当前的街区触底了数据。set(mapData);//我们需要重新生成一个方块,直接调用新锁即可;封锁。new block();//通过数据计算,如果有连接起来的一条线,就执行得分回调,随之会更新当前界面的分值;//如果方块跑到了最上面就是游戏失败了;数据。计算分数。得分,盖帽。毁灭。绑定(块));});//现在才开始绑定事件if(!util.isMobile()) { $(window).向下键(函数(ev){ if(ev。键码===37){ block。添加(阻止。moveleft,‘left’);} else if(ev。键码===39){ block。添加(阻止。向右移动,‘向右’);} else if(ev。键码===40){ block。添加(阻止。向下移动,‘向下’);} else if(ev。KeyCode===38){ block。rotate();};});}else{ $(' .向上箭头')。点击(function(){ block。rotate();});$('.向下箭头')。点击(function(){ block。添加(阻止。向下移动,‘向下’);});$('.箭头-左')。点击(function(){ block。添加(阻止。向左移动,‘向左’);});$('.向右箭头')。点击(function(){ block。添加(阻止。moveright,‘right’);});};});};//绑定界面事件,KeyDownVar BindEvent=function(){//start.$(“# start”).点击(startGame)};//为移动端添加数字正射影像图节点, //然后绑定移动端的事件;返回函数(){ BindEvent();};});游戏的主要窗口直接看成是二维数组,所有要显示的方块都是数组中的数据,通过模板引擎,一秒钟更新一次数据到查看,模板如下:

运行下面代码

脚本类型=' text/x-handlers-template ' id=' TPL-TD ' { #每个此} } tr { { #每个此} } td类=' { }如果此} }阻止{ {/如果} } '/TD { {/每个} }/tr { {/每个} }/脚本为了让整体的内容和提示更加美观,用了提示插件泽普托警报和引导程序

在线演示:打开

版权声明:用Javascript编写俄罗斯方块的想法和示例是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。