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

最新推荐文章于 2024-08-21 13:57:41 发布

jupeizhong

最新推荐文章于 2024-08-21 13:57:41 发布

阅读量1.6k

点赞数 1

分类专栏： web 文章标签：俄罗斯方块

本文链接：https://blog.csdn.net/jupeizhong/article/details/50600449

版权

web 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

贪吃蛇倒是编写过很多次，但却是第一次编写俄罗斯方块。我没有参考任何其他代码，写了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 οnkeydοwn="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>