[html]
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>俄罗斯方块</title>
<style type="text/css">
body{ width:530px; background:#f7f7f7; margin:20px auto}
table#gameboard{ border:1px solid black; border-collapse: collapse; float:left;}
table#gameboard td{ width:30px; height:30px; border: 1px dotted #0cc;}
div#gamecontrol{ widows:160; float:right; height: 200px;; line-height: 200px;}
.font{ font-family:'微软雅黑'; font-size:18px; text-align:center;}
div input { width: 60px; height:25px; }
</style>
<script type="text/javascript">
var t = tetris = {
aboardgrids : [],
ashapes: [
[0xcc00],
[0x8888, 0xf00],
[0x8c40, 0x6c00],
[0x4c80, 0xc600],
[0x44c0, 0x8e00, 0xc880, 0xe200],
[0x88c0, 0xe800, 0xc440, 0x2e00],
[0x4e00, 0x8c80, 0xe400, 0x4c40]
], //代表所有方块的形状数
init : function(){
this.odomboard = document.getelementbyid(gameboard);
this.odomscore = document.getelementbyid(score);
this.aboardgrids = new array(18);
for (var rows = 0 ; rows < 18 ; rows++){
this.aboardgrids[rows] = new array(10);
var odomtr = this.odomboard.insertrow(-1);
for (var cols = 0 ; cols < 10 ; cols++){
this.aboardgrids[rows][cols] = 0;
odomtr.insertcell(cols);
}
}
document.onkeydown = function(keyevent){
keyevent = keyevent || window.event;
var ikeynum = keyevent.which || keyevent.keycode;
switch(ikeynum){
case 37://←
t.oblock.move("left");
break;
case 38://↑
t.oblock.rotate((function (){
var vshape = t.ashapes[t.ishapeidx][ (++t.index)%t.ashapes[t.ishapeidx].length];
var sshape = vshape.tostring(2);
sshape = new array(17 - sshape.length).join(0) + sshape;
t.matrix = sshape.match(/\d{4}/g);
return t.matrix;
})()); //变形
break;
case 39://→
t.oblock.move("right");
break;
case 40://↓
t.oblock.move("down");
break;
}
}
},
next : function (){
this.ishapeidx = parseint(math.random() * this.ashapes.length);
this.index = 0;
var vshape = this.ashapes[this.ishapeidx][this.index];
var sshape = vshape.tostring(2); //将16进制转换为二进制
sshape = new array(17 - sshape.length).join(0) + sshape; //不够16位，在前面用0补全
this.matrix = sshape.match(/\d{4}/g); //利用正则表达式匹配
this.oblock = new tetris.block(this.matrix);
clearinterval(t.timer);
//注册定时器
t.timer = setinterval(function (){
t.oblock.move("down");
}, 1000);
if( !t.oblock.checkblock() ){
alert("game over~");
clearinterval(t.timer);
}
},
updateboard : function (){ //更新面板
for(var i = 0 ; i < 4 ; i++){
this.aboardgrids[t.oblock.shape[i].y][t.oblock.shape[i].x] = 1;
}
},
eraselines : function (){
var ilines = 0;
for(var j = 17 ; j >= 0 ; j--){
var num = 0;
for(var i = 0 ; i< 10 ; i++){
if(this.aboardgrids[j][i] == 1)
num ++;
}
if(num == 10){
ilines ++;
for(var m = 0 ; m < i ; m++){
for(var n = j ; n > 0 ; n--){
this.aboardgrids[n][m] = this.aboardgrids[n-1][m];
t.odomboard.rows[n].cells[m].style.background = t.odomboard.rows[n-1].cells[m].style.background;
}
this.aboardgrids[0][m] = 0;
}
j++;
}
}
return ilines;
},
setscore : function (ilines){
var iscore = parseint(this.odomscore.innerhtml);
if(ilines == 1){
iscore += 100;
} else if(ilines == 2){
iscore += 300;
} else if(ilines == 3){
iscore += 500;
} else if(ilines == 4){
iscore += 1000;
}
this.odomscore.innerhtml = iscore;
}
}
tetris.block = function (matrix){
this.shape = (function(){
var ashape = [];
for(var i = 0 ; i < matrix.length ; i++){
var svalue = matrix[i];
for(var j = 0 ; j < svalue.length ; j++){
if(svalue.charat(j) == "1"){
ashape.push({ x : j+3 , y : i });
}
}
}
return ashape;
})();
this.draw();
}
tetris.block.prototype.move = function (direction){//移动
if(this.checkblock(this.shape,direction)){
this.draw("clear");
for(var i = 0 ; i < 4 ; i++){
switch(direction){
case "left"://←
this.shape[i].x--;
break;
case "right":
this.shape[i].x++;
break;
case "down":
this.shape[i].y++;
break;
}
}
this.draw();
} else {
if(direction == "down"){
this.draw();
t.updateboard(); //更新面板
var ilines = t.eraselines();
if(ilines > 0){
t.setscore(ilines);
}
t.next(); //再生成一个新的方块
}
}
}
tetris.block.prototype.rotate = function (matrix){//变形
this.shape = (function(oblock){
var ax = [];
var ay = [];
for(var i = 0 ; i < 4 ; i++){
ax.push(oblock.shape[i].x);
ay.push(oblock.shape[i].y);
}
var iminx = ax.getmin();
var iminy = ay.getmin();
var ashape = [];
for(var i = 0 ; i < matrix.length ; i++){
var svalue = matrix[i];
for(var j = 0 ; j < svalue.length ; j++){
if(svalue.charat(j) == "1"){
ashape.push({ x : j+iminx , y : i+iminy });
}
}
}
if( !( oblock.checkblock(ashape)) )
return oblock.shape;
oblock.draw("clear");
return ashape;
})(this);
this.draw();
}
tetris.block.prototype.draw = function (opt){//绘图
for(var i = 0 ; i < this.shape.length ; i++){
var oshape = this.shape[i];
t.odomboard.rows[oshape.y].cells[oshape.x].style.background = (opt==undefined?"#09f":"");
}
}
tetris.block.prototype.checkblock = function (shape, direction){
shape = shape || this.shape;
for(var i = 0 ; i < 4 ; i++){
if(direction == "left"){
if(shape[i].x == 0 || t.aboardgrids[shape[i].y][shape[i].x - 1] == 1){
return false;
}
} else if(direction == "right"){
if(shape[i].x == 9 || t.aboardgrids[shape[i].y][shape[i].x + 1] == 1){
return false;
}
} else if(direction == "down"){
if(shape[i].y == 17 || t.aboardgrids[shape[i].y + 1][shape[i].x] ==1){
return false;
}
}
if(shape[i].x < 0 || shape[i].x > 9 || shape[i].y < 0 || shape[i].y > 17)
return false;
if(t.aboardgrids[shape[i].y][shape[i].x] == 1){
return false;
}
}
return true;
}
array.prototype.getmin = function (){
var imin = this[0];
for(var i = 0 ; i < this.length ; i++){
if(this[i] < imin)
imin = this[i];
}
return imin;
}
window.onload = function(){
t.init();
var obtnplay = document.getelementbyid("btnplay");
obtnplay.onclick = function(){
if(this.value == "begin"){
t.next();
this.value = "over";
} else {
this.value = "begin";
alert("game over~");
clearinterval(t.timer);
}
}
var obtnpause = document.getelementbyid("btnpause");
obtnpause.onclick = function (){
if(this.value == "pause"){
clearinterval(t.timer);
this.value = "resume";
} else {
t.timer = setinterval(function (){
t.oblock.move("down");
}, 1000);
this.value = "pause";
}
}
}
</script>
</head>
<body>
<table id="gameboard"></table>
<div id="gamecontrol">
score ： <span id="score">0</span><br />
<input type="button" id="btnplay" value="begin" />
<input type="button" id="btnpause" value="pause" /><br/>
<span>俄罗斯方块</span>
</div>
</body>
</html>