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

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

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

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

游戏截图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 { {/每个} }/脚本为了让整体的内容和提示更加美观，用了提示插件泽普托警报和引导程序

在线演示：打开