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

原创 2016年01月28日 14:35:49

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



版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/jupeizhong/article/details/50600449

纯js实现俄罗斯方块详解与源码

对于小白来说用js实现俄罗斯方块还是有难度的,网上找了很多代码看,有的很长难懂,有的短小精悍,但不只用到了js还用到了框架,对于还未接触框架的小白宝宝,也只能无奈自己是小白了,自己写不出来那就找一篇纯...
  • d1105260363
  • d1105260363
  • 2017年08月23日 17:54
  • 869

JS写俄罗斯方块完美注释版

JS写俄罗斯方块完美注释版/************************************************************* JS俄罗斯方块完美注释版 v 1.01* 作者:...
  • sunxing007
  • sunxing007
  • 2008年11月19日 00:35
  • 15196

[前端 3]纯Js制作俄罗斯方块游戏

导读:在别人文章里看到了,然后写了一遍。结果出错了,然后调出来了,然后理解了一下,加了点注释,有一些想法。忘了在 哪一篇上面看的了,就贴不出来链接地址。原谅。呃,真没自己的东西,权当练打字了吧。其实,...
  • u013034889
  • u013034889
  • 2016年04月10日 00:08
  • 2235

web前端 js写的俄罗斯方块

效果图: 代码: html: html> html> head lang="en"> meta charset="UTF-8"> title>俄罗斯方块title> sc...
  • zhaihaohao1
  • zhaihaohao1
  • 2015年08月30日 08:13
  • 841

H5 游戏 俄罗斯方块 双人互动游戏

最近在慕课网上看到了一个课程是关于俄罗斯方块的。用到了socket.io 做双屏互动的游戏。正好最近在看websocket所以就把整个课程看完了,感觉很有意思,这里用一篇文章仔细的分析下这个游戏的制作...
  • CJXBShowZhouyujuan
  • CJXBShowZhouyujuan
  • 2017年09月03日 17:34
  • 865

HTML网页之俄罗斯方块

效果显示:点击这里!            源代码下载:点击这里!
  • qq_21792169
  • qq_21792169
  • 2016年03月23日 12:16
  • 3190

俄罗斯方块javascript版本

这个俄罗斯方块游戏是用javascript脚本实现的,只需要将代码拷贝到文本文件中,然后将文件更名为eluosi.html. 用IE或者FireFox打开即可。 ¶íÂÞ˹·½¿éBODY{}.MB...
  • xiaotao_liu
  • xiaotao_liu
  • 2008年01月07日 14:49
  • 656

非常经典的俄罗斯方块源码!HTML5,可直接运行!

整理自己的360仓库时发现的,非常经典,HTML5,可直接运行,强力推荐!!
  • sinat_22657459
  • sinat_22657459
  • 2015年02月12日 15:25
  • 3068

HTML5边玩边学(8):俄罗斯方块就是这么简单 之 数据模型篇

HTML5边玩边学(9):俄罗斯方块就是这么简单 之 数据模型篇 特别提示: 本文中的运行效果需要 Chrome 浏览器或者 Firefox 浏览器。   一、从数据出发还是从...
  • houjun1988325
  • houjun1988325
  • 2014年08月14日 17:09
  • 2290

HTML5/CSS3简易版俄罗斯方块游戏

  • 2017年08月27日 10:51
  • 5KB
  • 下载
收藏助手
不良信息举报
您举报文章:俄罗斯方块Tetris (javascript+HTML+CSS)
举报原因:
原因补充:

(最多只允许输入30个字)