您的位置：首页 > Web前端 > JavaScript

俄罗斯方块Tetris (javascript+HTML+CSS)

2016-01-28 14:35 711 查看

贪吃蛇倒是编写过很多次，但却是第一次编写俄罗斯方块。我没有参考任何其他代码，写了120行左右。

<!doctype html>
<html>
<head>
<title>Tetris</title>
<style>
.dot{width:23px;height:23px;margin:1px;border-radius:2px;float:left;}
.row{clear:both;width:250px;height:25px;}
#game_area{width:250px;margin:auto;border:10px rgb(166, 137, 124) solid;border-radius:2px;}
body{background-color:wheat;}
</style>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
</head>
<body onkeydown="onKeyDown(event)">
<div id='game_area'>
<script>
function $(name) {return document.getElementById(name);}
var w=10, h=20;
for (i = 0;i < h;++i){
document.write('<div class="row">');
for (j = 0;j < w;++j)
document.write('<div class="dot" id="'+(i*w+j)+'"></div>');
document.write('</div>');
}
</script>
</div>
<script>
var m=Array(), g_h=22, g_w=12, now=new Object(), color=['cornsilk','red','gold','blue','purple','green','orange','salmon'];
function G_display(){
for (var i = 1;i < g_h-1;++i)
for (var j = 1;j < g_w-1;++j)
$((i-1) * w + j-1).style.backgroundColor = color[m[i*g_w+j]];
}
function G_start(){
for (var i = 0;i < g_h;++i)
for (var j = 0;j < g_w;++j)
if (i == 0 || i == g_h-1 || j == 0 || j ==g_w-1)
m[i*g_w+j] = 1;
else
m[i*g_w+j] = 0;
G_display();
G_new();
}
var e = [[0x4444,0xf000,0x4444,0xf000],[0x4460,0x1700,0x6220,0xe800],[0x4e00,0x2620,0xe400,0x8c80],[0x6300,0x2640,0x6300,0x2640],
[0x2260,0x7100,0x6440,0x8e00],[0x6600,0x6600,0x6600,0x6600],[0x3600,0x4620,0x3600,0x4620]];
function G_drawEle(_x, _y, _which, _seq, _clear){
var _m = m.slice(0);
for (var i = 0;i < 4;++i)
for (var j = 0;j < 4;++j)
if (e[_which][_seq] >> (i*4+j) & 1){
if (!_clear){
if (m[(_y+3-i)*g_w+_x+3-j]){
m = _m.slice(0);
return false;
}
else
m[(_y+3-i)*g_w+_x+3-j] = _which % (color.length - 1) + 1;
}
else
m[(_y+3-i)*g_w+_x+3-j] = 0;
}
G_display();
return true;
}
function G_new(){
now = {'x':4, 'y':1, 'which':Math.floor(Math.random() * 100000) % e.length, 'seq':Math.floor(Math.random() * 100000) % 4};
if (!G_drawEle(now.x, now.y, now.which, now.seq, false)){
G_start();
return;
}
setTimeout("G_down()", 300);
}
function G_testPos(d_y, d_x, d_seq){
var _x = now.x, _y = now.y, _seq = now.seq;
G_drawEle(now.x, now.y, now.which, now.seq, true);
now.x += d_x;
now.y += d_y;
now.seq = (now.seq + d_seq) % 4;
if (!G_drawEle(now.x, now.y, now.which, now.seq, false)){
now.x = _x;
now.y = _y;
now.seq = _seq;
G_drawEle(now.x, now.y, now.which, now.seq, false);
return false;
}
return true;
}
function G_down(){
if (G_testPos(1, 0, 0))
setTimeout('G_down()', 200);
else{
for (var i = 1;i < g_h-1;++i){
var flag = true;
for (var j = 1;j < g_w-1;++j)
if (!m[i*g_w+j]){
flag = false;
break;
}
if (flag)
for (var ii = i;ii > 1;--ii)
for (var j = 1;j < g_w-1;++j)
m[ii*g_w+j] = m[ii*g_w+j-g_w];
}
G_new();
}
}
function onKeyDown(event){
if(window.event)// IE
keynum = event.keyCode;
else if(event.which)// Netscape/Firefox/Opera
keynum = event.which;
switch(keynum){
case 38: //up
G_testPos(0, 0, 1);	break;
case 37: //left
G_testPos(0, -1, 0); break;
case 39: //right
G_testPos(0, 1, 0);	break;
case 40: //down
G_testPos(1, 0, 0);	break;
}
}
G_start();
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航