斌斌 (给我写信) 原创博文（http://blog.csdn.net/binbinxyz），转载请注明出处！
俄罗斯方块是一个经典的游戏，想必地球上找不到没玩过这个游戏的人吧？发布一个javascript版的俄罗斯方块，该版本基于之前开发的俄罗斯方块，算是该程序的升级版本吧~
既然是升级，就顺道把本次升级内容也发上来吧：
1、解决了旧版IE不兼容的问题，目前可以支持IE、360、Firefox等浏览器
2、优化了源代码，使之更加规范。
本系列第二版请参考：js版俄罗斯方块（二）
资源下载地址：
俄罗斯方块（http://download.csdn.net/detail/binbinxyz/7054513）
俄罗斯方块_经典游戏
rel="icon" href="http://www.ifeng.com/favicon.ico" type="image/x-icon" />
rel="shortcut icon" href="http://www.ifeng.com/favicon.ico" type="image/x-icon" />
rel="bookmark" href="http://www.ifeng.com/favicon.ico" type="image/x-icon" />
俄罗斯方块 V1.3
<script type="text/javascript">
var COLUMN = 10; //显示屏幕的宽度(相对列数)
var ROW = 20; //显示屏幕的高度(相对行数)
//定义方块数据数组，存储所有的方块数据
var TETROMINO_DATA = [
[
[[0,0,0,0],[1,1,1,1], [0,0,0,0], [0,0,0,0]],
[[0,1,0,0], [0,1,0,0], [0,1,0,0], [0,1,0,0]]
],
[
[[1,1,1,0], [1,0,0,0], [0,0,0,0], [0,0,0,0]],
[[1,1,0,0], [0,1,0,0], [0,1,0,0], [0,0,0,0]],
[[0,0,1,0], [1,1,1,0], [0,0,0,0], [0,0,0,0]],
[[0,1,0,0], [0,1,0,0], [0,1,1,0], [0,0,0,0]]
],
[
[[0,0,0,0], [1,1,1,0], [0,1,0,0], [0,0,0,0]],
[[0,1,0,0], [1,1,0,0], [0,1,0,0], [0,0,0,0]],
[[0,1,0,0], [1,1,1,0], [0,0,0,0], [0,0,0,0]],
[[0,1,0,0], [0,1,1,0], [0,1,0,0], [0,0,0,0]]
],
[
[[0,0,0,0], [1,1,1,0], [0,0,1,0], [0,0,0,0]],
[[0,1,0,0], [0,1,0,0], [1,1,0,0], [0,0,0,0]],
[[1,0,0,0], [1,1,1,0], [0,0,0,0], [0,0,0,0]],
[[0,1,1,0], [0,1,0,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,1,0], [0,1,1,0], [0,1,0,0], [0,0,0,0]]
],
[
[[0,1,0,0], [0,1,1,0], [0,0,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], [0,1,1,0], [0,1,1,0], [0,0,0,0]]
]
];
var POSSIBLE_COLORS = [
"aqua", "blue", "fuchsia", "gray", "green", "lime", "maroon", "navy",
"olive", "purple", "red", "silver", "teal", "yellow"]; //可能使用的颜色库
var DEFAULT_TETROMINO_COLOR = "GRAY"; //生成方块的默认颜色
var DEFAULT_BOTTOM_COLOR = "GRAY"; //底部方块的默认颜色
var DEFAULT_BLOCK_X = 4; //方块出现时左上角默认位置的X坐标
var bottom = []; //底部方块堆（实际是与屏幕大小相同的二维数组）
var bottomColor = []; //底部方块堆中各块的颜色
var level; //当前级别
var period; //各后续任务之间的时间间隔，单位是毫秒
var score; //当前分数
var runTime; //运行时间，单位秒
var block; //显示屏幕中的方块
var block_x; //方块出现时左上角的X坐标
var block_y; //方块出现时左上角的y坐标
var gameStatus; //游戏状态（offDuty|run|pause|end）
var lineVisible; //屏幕辅助线是否可见
var randomTetrominoColor; //生成的方块颜色随机
var randomBottomColor; //底部方块的颜色随机
var taskTimer = function(){}; //计时器，用于循环执行方块下落等事件
var updateTimer = function(){}; //计时器，游戏运行时用于更新游戏运行时间
//定义方块对象的构造方法
function Tetromino(color, index, status){
this.color = color; //方块的颜色
this.index = index;
this.status = status;
this.data = TETROMINO_DATA[index][status];
};
//获取当前方块的高度
Tetromino.prototype.getHeight = function(){
for(var i=3;i>=0;i--)
{
for(j=0;j<4;j++)
{
if(this.data[i][j] == 1)
{
return i + 1;
}
}
}
};
//获取方块对象的下一个状态
Tetromino.prototype.getNextStatus = function(){
this.status ++;
this.status %= TETROMINO_DATA[this.index].length;
return TETROMINO_DATA[this.index][this.status];
};
//alert(new Tetromino("blue", 2, 0).data);
//定义屏幕显示的方块
function Block(x, y, tetromino){
this.x = x; //方块所在4×4矩形的左上角x坐标
this.y = y; //方块所在4×4矩形的左上角y坐标
this.tetromino = tetromino; //方块
};
//方块工厂，用于生成各种方块
var TetrominoFactory = {
tetromino: [], //方块属性
createTetromino: function(){ //生成一个新的方块
var color = DEFAULT_TETROMINO_COLOR; //使用默认颜色初始化
//如果生成的方块颜色随机
if(randomTetrominoColor)
{
var i = Math.floor(Math.random() * POSSIBLE_COLORS.length);
color = POSSIBLE_COLORS[i];
//alert("0:" + color);
}
var index = Math.floor(Math.random() * TETROMINO_DATA.length);
var status = Math.floor(Math.random() * TETROMINO_DATA[index].length);
//alert(color + ":" + index + ":" + status);
this.tetromino = new Tetromino(color, index, status);
return this.getCurrentTetromino();
},
getCurrentTetromino: function(){ //返回当前的方块
return this.tetromino;
}
};
//alert("a:" + TetrominoFactory.createTetromino().data);
//alert("b:" + TetrominoFactory.getCurrentTetromino().data);
//初始化整个页面
function initBody()
{
//初始化控制区域的按钮
//document.getElementById("btnstart").removeAttribute("disabled");
//document.getElementById("btnpause").disabled = "disabled";
//document.getElementById("btnend").disabled = "disabled";
initButtonStatus();
//初始化全局变量
level = 1;
period = 800;
score = 0;
runTime = 0;
block_x = DEFAULT_BLOCK_X;
block_y = -3;
gameStatus = "offDuty";
lineVisible = true;
randomTetrominoColor = true;
randomBottomColor = true;
initScreen();
initSmallScreen();
//初始化底部方块堆及堆中各块的颜色
for(var i=0;i
=block.y && i
=block.x && j
=COLUMN && tetromino.data[i][j] == 1)
{
return false;
}
//到达底部了
if(block.y+tetromino.getHeight()>ROW)
{
return false;
}
//方块重合
if(block.y+i>=0 && tetromino.data[i][j]==1 &&
bottom[block.y + i][block.x + j] == 1)
{
return false;
}
}
}
return true;
}
//接收一个block
function accept(){
var tetromino = block.tetromino;
for(var i=0;i
< 0) gameover(); return; } bottom[block.y i][block.x j]="DEFAULT_BOTTOM_COLOR;" if(randombottomcolor) bottomcolor[block.y else var line score changelevel(); document.getelementbyid("score").innerhtml="score;" movetetromino2screen(); 消去满行 function disappear() 此次消去行数 r="block.y" block.tetromino.getheight() - 1; alert(bottom[i].length); 当前行是否可以消去，默认可消去 disapperable="false;" alert(r ":" bottom[r][j]); 如果有单元格为空，则当前行不可消去 if(bottom[r][j]="=" break; if(disapperable) ++; 更新消去行数 消去当前满行 k="r;k"> 0;k--) { for(var j=0;j
n) { level += 1; changeSpeed(); //升级后，方块下落的速度需要发生变化，所以清除旧的计时器，再新建一个 clearInterval(taskTimer); taskTimer = setInterval("down();", period); document.getElementById("level").innerHTML = level; } } //求1+2+3+...+n的结果 function sum(n) { if(n <= 1) { return 1; } return n + sum(n - 1); } //修改方块下落的速度 function changeSpeed() { //每升一级，方块下落的时间间隔减少40毫秒 period = 1200 - 40 * level; } function gameOver() { clearInterval(taskTimer); clearInterval(updateTimer); alert("您的得分是：" + score + "！\n游戏结束！"); initBody(); if(confirm("您想重新挑战吗？")) { startGame(); } } //更新显示区域的时间 function updateTime() { var runTimeLabel = document.getElementById("runTime"); runTime ++; runTimeLabel.innerHTML = formatTime(runTime); } //格式化时间 function formatTime(time) { var m = Math.floor(time / 60); //分钟 var s = time % 60; //秒数 var str = ""; if(m < 10) { str = "0"; } str += m + "："; if(s < 10) { str += "0"; } str += s; return str; } function keyEvent(e) { if(navigator.appName == "Microsoft Internet Explorer") { //var keycode = event.keyCode; //var realkey = String.fromCharCode(event.keyCode); //alert("按键码: " + keycode + " 字符: " + realkey); keyAction(event.keyCode); }else { //alert(e.which); keyAction(e.which); } } function keyAction(key) { switch(key) { case 32: //向下快速移动 quickDown(); break; case 37: //向左移动 left(); break; case 38: //向上移动 up(); break; case 39: //向右移动 right(); break; case 40: //向下移动 down(); break; } } //开始游戏 function startGame() { changeButtonStatus(); if(gameStatus == "offDuty") { gameStatus = "run"; moveTetromino2screen(); } taskTimer = setInterval("down()", period); updateTimer = setInterval("updateTime()", 1000); } //暂停游戏 function pauseGame() { var btnpause = document.getElementById("btnpause"); if(btnpause.value=="暂停") { btnpause.value = "恢复"; clearInterval(taskTimer); clearInterval(updateTimer); } else { btnpause.value = "暂停"; taskTimer = setInterval("down();", period); updateTimer = setInterval("updateTime()", 1000); } } //结束游戏 function endGame() { if(confirm("你确定要结束游戏吗？")) { clearInterval(taskTimer); clearInterval(updateTimer); initBody(); } } //更改按钮状态 function initButtonStatus() { document.getElementById("btnstart").disabled = false; document.getElementById("btnpause").disabled = true; document.getElementById("btnpause").value = "暂停"; document.getElementById("btnend").disabled = true; document.getElementsByName("lineVisible")[0].disabled = false; document.getElementsByName("lineVisible")[0].checked = "checked"; document.getElementsByName("lineVisible")[1].disabled = false; document.getElementsByName("randomTetrominoColor")[0].disabled = false; document.getElementsByName("randomTetrominoColor")[1].disabled = false; document.getElementsByName("randomTetrominoColor")[1].checked = "checked"; document.getElementsByName("randomBottomColor")[0].disabled = false; document.getElementsByName("randomBottomColor")[1].disabled = false; document.getElementsByName("randomBottomColor")[1].checked = "checked"; if(document.getElementsByName("randomTetrominoColor")[0].checked) { randomTetrominoColor = true; } else { randomTetrominoColor = false; } if(document.getElementsByName("randomBottomColor")[0].checked) { randomBottomColor = true; } else { randomBottomColor = false; } } //初始化按钮状态 function changeButtonStatus() { document.getElementById("btnstart").disabled = true; document.getElementById("btnpause").disabled = false; document.getElementById("btnend").disabled = false; document.getElementsByName("lineVisible")[0].disabled = true; document.getElementsByName("lineVisible")[1].disabled = true; document.getElementsByName("randomTetrominoColor")[0].disabled = true; document.getElementsByName("randomTetrominoColor")[1].disabled = true; document.getElementsByName("randomBottomColor")[0].disabled = true; document.getElementsByName("randomBottomColor")[1].disabled = true; } //设置方块颜色的生成方式（即是否随机） function setRTColor(flag) { randomTetrominoColor = flag; } //设置底部方块颜色的生成方式（即是否随机） function setRBColor(flag) { randomBottomColor = flag; } //设置是否显示屏幕辅助线 function setLineVisible(flag) { lineVisible = flag; } initBody(); document.onkeydown = keyEvent; </script>
288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
