0、前言
最近在玩js，感知js确是一个强大的脚本语言，加之html5这样一个准标准的推出，相信js在未来的web app中发挥的作用会越来越大。过去几年时间都在做后台方面的一些开发，很少会触及到web方面的开发，作为一名软件工程师，多补充一点新的知识，为自己充充电还是很有必要，且有趣的。
一、游戏设计思想
是一款风靡全球的电视游戏机和掌上游戏机游戏，它由俄罗斯人阿列克谢·帕基特诺夫发明，故得此名。俄罗斯方块的基本规则是移动、旋转和摆放游戏自动输出的各种方块，使之排列成完整的一行或多行并且消除得分。由于上手简单、老少皆宜，从而家喻户晓，风靡世界。
在网页中设计这样一款游戏：
1.在界面方面，我们采用html标签“table”作用这款游戏的整体布局，“table”的子标签“td”为最基本的方块单元。
2.通过改变方块单元的颜色来表示每个方块形状的移动过程。
3.接收并处理DOM模型中的document的onkeydown事件，从而左、右、下移方块形状。
二、实现过程及用到的技巧
首先是设计游戏地图的数据结构。
游戏主界面如下图所示：
地图的数据结构为grid和gridBuf两部分，初始时gridBuf是grid的一个备份，只有当接收到了新的box（方块形状）从而产生变化时，grid和gridBuf相互配合保持图形和逻辑的一致，下面是grid的内容：
//map: 12x17
var grid = [
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1], [1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1,1,1]
]; var boxdata = [
[
[1,1,1,1],
[0,0,0,0],
[0,0,0,0],
[0,0,0,0]
],
[
[1,1,1,0],
[1,0,0,0],
[0,0,0,0],
[0,0,0,0]
],
[
[1,1,1,0],
[0,1,0,0],
[0,0,0,0],
[0,0,0,0]
],
[
[1,1,0,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0]
],
[[0,1,1,0],
[1,1,0,0],
[0,0,0,0],
[0,0,0,0]
],
[
[1,1,0,0],
[1,1,0,0],
[0,0,0,0],
[0,0,0,0]
]
];function Box(x, y, arr, color)
{
this.arr = arr;
this.x = x;
this.y = y;
this.w = getWidth(arr);
this.h = getHeight(arr);
this.color = color;
this.active = true;
this.clearOldBox = function()
{
for(var j = 0; j <= this.h; j++)
for(var i = 0; i <= this.w; i++)
if(this.arr[j][i] > 0)
grid[this.y+j][this.x+i] = 0;
}
this.putNewBox = function()
{
for(var j = 0; j <= this.h; j++)
for(var i = 0; i <= this.w; i++)
if(this.arr[j][i] > 0)
grid[this.y+j][this.x+i] = this.color;
}
this.moveLeft = function()
{
this.clearOldBox();
var _x = this.x - 1;
if(this.canMove(_x, this.y))
this.x = _x;
this.putNewBox();
drawGrid();
}
this.moveRight = function()
{
this.clearOldBox();
var _x = this.x + 1;
if(this.canMove(_x, this.y))
{
this.x = _x;
}
this.x = _x;
this.putNewBox();
drawGrid();
}
this.moveDown = function()
{
this.clearOldBox();
var _y = this.y + 1;
if(this.canMove(this.x, _y))
{
this.y = _y;
this.putNewBox();
drawGrid();
}
else
{
this.putNewBox();
drawGrid();
checkLineFull();
return ;
}
}
this.rotate = function()
{
var i,j;
var tmp = [[0,0,0,0], [0,0,0,0], [0,0,0,0], [0,0,0,0]];
for(j = 0; j <= this.h; j++)
for(i = 0; i <= this.w; i++)
tmp[this.w-i][j] = this.arr[j][i];
var newBox = new Box(this.x, this.y, tmp, this.color);
this.clearOldBox();
if(!newBox.canMove(this.x, this.y))
this.putNewBox();
else
{
box = newBox;
box.putNewBox();
drawGrid();
}
}
this.canMove = function(x, y)
{
for(var j = 0; j <= this.h; j++)
for(var i = 0; i <= this.w; i++)
{
if(grid[y+j][x+i] != 0 && this.arr[j][i] != 0)
return false;
}
return true;
}
}
function drawGrid()
{
for(var j = 0; j < 17 ; j++)
for(var i = 0; i < 12; i++)
{
if(grid[j][i] != gridBuf[j][i])
paintCell(j, i, grid[j][i]);
gridBuf[j][i] = grid[j][i];
}
}
// paint only one cell
function paintCell(i, j, color)
{
var htmlGrid = document.getElementById("TetrisGrid").firstChild;
htmlGrid.childNodes[i].childNodes[j].style.backgroundColor = colors[color];
}
function init()
{
var html = '<table id="TetrisGrid" cellspacing=1 style="background-color:green"><tbody>';
for(var i = 0; i < 17; i++)
{
html += '<tr>';
for(var j = 0; j < 12; j++)
{
html += '<td width="20" height="20" style="background-color:' +colors[grid[i][j]] + ';"></td>';
}
html += '</tr> \r\n';
}
html += '</tbody></table>';
document.write(html);
}function checkLineFull()
{
var full, i, j, i2;
var y3 = box.y + box.h;
var y4 = box.y;
for(i = y3; i >= y4;)
{
full = 1;
for(j = 1; j < 10; j++)
if(grid[i][j] == 0)
{
full = 0;
break;
}
if(full == 0)
{
--i;
continue;
}
for(i2 = i; i2 > 0; i2--)
for(j = 1; j < 10; j++)
grid[i2][j] = grid[i2-1][j];
drawGrid();
y4++;
gotLine++;
}
checkGameOver();
}
function checkGameOver()
{
var bOver = false;
for(var j = 1; j < 10; j++)
if(grid[1][j] > 0)
{
bOver = true;
break;
}
if(!bOver)
{
box = new Box(1,1,boxdata[Math.floor(Math.random()*7)], Math.floor(Math.random()*5)+1);
box.putNewBox();
}
else
{
isGameOver = true;
msg.innerHtml = "Game Over! You score is " + gotLine*100;
window.clearInterval();
}
}
function document_onkeydown()
{
if(isGameOver)
return;
switch(event.keyCode)
{
case 37:
box.moveLeft();
break;
case 39:
box.moveRight();
break;
case 38:
box.rotate();
break;
case 40:
box.moveDown();
break;
default:
break;
}
}
function moveDownBox()
{
var interval = 1000 - 10 * (gotLine>80 ? 80 : gotLine);
msg.innerHTML = "Level: " + Math.floor(gotLine/10) + " score:" + gotLine*100;
box.moveDown();
window.setTimeout('moveDownBox()', interval);
}1.box最基本的事件是MoveDownBox。
2.当box完全掉下时，判断是否可以抵消，通过checkLineFull函数判断。
3.检查游戏是否结束（checkGameOver）：
3.1 是，提示用户游戏结束，over了。
3.2 否，new一个新的box重复以上过程。
游戏的启动和事件设置如下：
function startGame()
{
init();
//setTimeout will delay for 1000ms and then execute moveDownBox().
window.setTimeout('moveDownBox()', 1000);
isGameOver = false;
box = new Box(1,1,boxdata[Math.floor(Math.random()*7)], Math.floor(Math.random()*5)+1);
box.putNewBox();
drawGrid();
} <script language="javascript" for="document" event="onkeydown">
if(document.all) document_onkeydown();
</script>
三、总结
使用javascript开发游戏是一个很有趣的过程，它的语法接近C语言，对于习惯于C语言开发的同学们，是比较容易上手的，它本身的语法也很简单，而且它也是一门面向对象的语言，本身拥有面向对象的特性；如果要深入对javascript的学习的话，可以结合jQuery，html5进一步学习。
四、参考资料
《javascript入门教程》
《javascript从入门到精通》
393
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
