JavaScript 俄罗斯方块游戏实现方法与代码解释(2)

window.onload = function() { if (window.isIE) { document.attachEvent("onkeydown",function(e) { if (OLSFK.Options.Start) { var E = OLSFK.KeyCode(); OLSFK.EventFunc(E); } }); document.attachEvent("onkeyup",function(e) { if (!OLSFK.Options.Move && OLSFK.Options.Start) { OLSFK.Options.Move = true; OLSFK.Options.Eventing = false; OLSFK.Options.Timer = setTimeout(function() { OLSFK.play(); }, OLSFK.Options.Levels[OLSFK.Options.curLevel]); } }); } else { document.addEventListener("keydown",function(e) { if (OLSFK.Options.Start) { var E = OLSFK.KeyCode(); OLSFK.EventFunc(E); } },false); document.addEventListener("keyup",function(e) { if (!OLSFK.Options.Move && OLSFK.Options.Start) { OLSFK.Options.Move = true; OLSFK.Options.Eventing = false; OLSFK.Options.Timer = setTimeout(function() { OLSFK.play(); }, OLSFK.Options.Levels[OLSFK.Options.curLevel]); } },false); } OLSFK.Init(); }

主要是监听键盘事件,根据 键盘事件 返回的按钮编码与 OLSFK.Options.direct 设置方向键匹配来操作方块的移动,旋转等;

keydown 用于操作下落方块的移动方向,旋转等;并重新绘制方块位置;

keyup 后继续按本级速度向下落;

OLSFK.Options.Levels[OLSFK.Options.curLevel]

表示当前级别对应的速度,即定时器间隔执行时间(毫秒);

OLSFK.EventFunc = function(code) { switch (code) { case OLSFK.Options.direct.Left: //LEFT if (!OLSFK.Options.Deling) { clearTimeout(OLSFK.Options.Timer); OLSFK.Options.Eventing = true; OLSFK.Options.Move = false; OLSFK.Left(); } break; //... } }

该方法是 监听 keydown 事件执行的动作;code 为按键 编码;

当判断未在消行动作时,清除定时器,OLSFK.Options.Eventing 设置为事件中 true,OLSFK.Options.Move 为 false 表示停止移动;

进入 向左移动方法 OLSFK.Left();

OLSFK.Left = function() { var block = OLSFK.Items[OLSFK.Options.curBlock]; if (block) { var flag = true; for (var i=1; i<=4; i++) { var x = block[i].x; var y = block[i].y; if (x-1 < 0) { flag = false; break; } if (OLSFK.Options.GampMap[(x-1)+'_'+y] == 1 && !OLSFK.isMe(x-1,y)) { flag = false; break; } } if (flag) { for (var i=1; i<=4; i++) //清除图形 { var itm = block[i]; var box = Lib.Getid('box_'+itm.x+'_'+itm.y); box.style.background = '#ddd'; OLSFK.Options.GampMap[itm.x+'_'+itm.y] = 0; } for (var i=1; i<=5; i++) { var x = block[i].x; var y = block[i].y; OLSFK.Items[OLSFK.Options.curBlock][i] = {x:(x-1),y:y}; } OLSFK.draw(); } } }

var block = OLSFK.Items[OLSFK.Options.curBlock]; 表示获取当前移动方块;

if (OLSFK.Options.GampMap[(x-1)+'_'+y] == 1 && !OLSFK.isMe(x-1,y)) { flag = false; break; }

判断该方块四个小方块左边是否有被占用的方块,也即: OLSFK.Options.GampMap[(x-1)+'_'+y] 为 1; 并且该位置块不属于方块自己的;

当左边方向无占用格时,清除当前方块四个小方块位置,重新绘制方块新坐标位置;并重置 相应的 OLSFK.Options.GameMap [x+y] 相应格的值;

当按钮 keyup 时,继承正常向下落;

OLSFK.isMe 代码:

OLSFK.isMe = function(x,y) { var block = OLSFK.Items[OLSFK.Options.curBlock]; if (block) { for (var i=1; i<=4; i++) { if (block[i].x == x && block[i].y == y) { return true; } } } return false; }

即指定的 x,y (参数值) 是否还在当前方块四个坐标内;

OLSFK.Right () 与 Left() 一样;

旋转方块代码;

OLSFK.Rotate = function() { var block = OLSFK.Items[OLSFK.Options.curBlock]; if (block) { var flag = true; var R = block[5]; for (var i=1; i<=4; i++) { var x = block[i].x; var y = block[i].y; if (R.x == x && R.y == y) { } else { var nson = new Object(); nson.x = R.x + R.y - y; nson.y = R.y - R.x + x; if ( nson.x < 0 || nson.y < 0 || nson.x >= OLSFK.Options.width || nson.y >= OLSFK.Options.height ) { flag = false; break; } if (OLSFK.Options.GampMap[nson.x+'_'+nson.y] == 1 && !OLSFK.isMe(nson.x,nson.y)) { flag = false; break; } } } if (flag) { for (var i=1; i<=4; i++) //清除图形 { var itm = block[i]; var box = Lib.Getid('box_'+itm.x+'_'+itm.y); box.style.background = '#ddd'; OLSFK.Options.GampMap[itm.x+'_'+itm.y] = 0; } var Pnt = 1; for (var i=1; i<=4; i++) { var x = block[i].x; var y = block[i].y; if (R.x == x && R.y == y) { Pnt = i; } else { var nson = new Object(); nson.x = R.x + R.y - y; nson.y = R.y - R.x + x; OLSFK.Items[OLSFK.Options.curBlock][i] = {x:nson.x,y:nson.y}; } } OLSFK.Items[OLSFK.Options.curBlock][5] = OLSFK.Items[OLSFK.Options.curBlock][Pnt]; OLSFK.draw(); } } }

var R = block[5]; 就是获取旋转点;

就开始对方块四个小块以旋转点为中心,逆时针旋转(并不全是 90 度);当当前块不为旋转点时,旋转公式;

var nson = new Object(); nson.x = R.x + R.y - y; nson.y = R.y - R.x + x;

这个公式要这样看;

ResultX = RotateX + (RotateY - CurrentY); ResultY = RotateY - (RotateX - CurrentX); //Y的偏移量,就是X的增加值; //反之同

当旋转四周都无占用物时;清除当前图形,重绘旋转后的图形位置;

重置 OLSFK.Options.GampMap[itm.x+'_'+itm.y] 各个方块的占用值;

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/d58d1c16275c5fb838297a2f7eff20b6.html