First look at the effect:





100 lines of JavaScript code for the classic game Tetris

Create a new HTML file, copy the following code, and open it in your browser:

<! doctypehtml>
<html>
<head>
	<style type="text/css">
	body {background: # 000;font: 25px / 25pxSong typeface. }#box {float: left;width: 252px;border: # 999 20px ridge;color: #9f9;text-shadow: 2px 3px 1px #0f0; }#info {float: left;color: #cfc;padding: 24px; }#next {padding: 8px;width: 105px;color: #9f9;text-shadow: 2px 3px 1px #0f0; }</style>
</head>
<body>
	<div id="box"></div>
	<div id="info">
		NEXT:
		<div id="next"></div>
		<div id="text"></div>
	</div>
	<script type="text/javascript">
	var map = eval("[" + Array(23).join("0x801,") + "0xfff]");
	var tatris = [[0x6600], [0x2222.0xf00], [0xc600.0x2640], [0x6c00.0x4620], [0x4460.0x2e0.0x6220.0x740], [0x2260.0xe20.0x6440.0x4700], [0x2620.0x720.0x2320.0x2700]].var char = {x: "\u3000".s: "\u25a0".t: "\u25a1"};
	var keycom = {"38": "rotate(1)"."40": "down()"."37": "Move (2, 1)"."39": "The move (0.5, 1)"."32": "0; pause=! pause"};
	var dia, pos, bak, run, next, pause = false, info = {speed: 1.lines: 0.score: 0};
	function start(){
		dia = next.d;
		bak = pos = {
			fk: [].y: 0.x: 4.s: next.s
		};
		nextdia();
		document.getElementById("next").innerHTML = (next.d[next.s % next.d.length] | 0x10000).toString(2).slice(-16).replace(/..../g."$&<br/>").replace(/1/g, char.t).replace(/0/g, char.x);
		document.getElementById("text").innerHTML = "SCORE:" + info.score + "<br/><br/>LINES:" + info.lines + "<br/><br/>SPEED:" + info.speed;
		rotate(0);
		run = setInterval("pause||down()", ~ ~ (Math.pow(1.3.12 - info.speed) * 30 + 20));
	}

	function over(){
		document.onkeydown = null;
		alert("GAME OVER");
	}

	function nextdia(){
		next = {d: tatris[~ ~ (Math.random() * 7)].s: ~ ~ (Math.random() * 4)};
	}

	function update(t){
		bak = {fk: pos.fk.slice(0),y: pos.y,x: pos.x,s: pos.s};
		if (t) 
			return;
		for (var i = 0, a2 = ""; i < 22; i++) a2 += map[i].toString(2).slice(1, -1) + "<br/>";
			for (var i = 0, n; i < 4; i++) 
				if (/ [^ 0] +) /.test(bak.fk[i].toString(2).replace(/1/g, char.t))) 
					a2 = a2.substr(0, n = (bak.y + i + 1) * 15 - RegExp.$_.length - 4) + RegExp.$1 + a2.slice(n + RegExp.$1.length);
				document.getElementById("box").innerHTML = a2.replace(/1/g, char.s).replace(/0/g, char.x);
			}

			function is(){
				for (var i = 0; i < 4; i++) 
					if((pos.fk[i] & map[pos.y + i]) ! =0) 
						return pos = bak;
				}

				function rotate(r){
					var f = dia[pos.s = (pos.s + r) % dia.length];
					for (var i = 0; i < 4; i++) 
						pos.fk[i] = (f >> (12 - i * 4) & 15) << pos.x;
					update(is());
				}

				function down(){
					++pos.y;
					if (is()) {
						for (var i = 0, r = 0; i < 4 && pos.y + i < 22; i++) 
							if ((map[pos.y + i] |= pos.fk[i]) == 0xfff) {
								map.splice(pos.y + i, 1), map.unshift(0x801);
								++info.lines % 20= =0 && info.speed++, r++;
							}
							clearInterval(run);
							if (map[1] != 0x801) 
								return over();
							info.score += ~ ~ (Math.pow(r, 1.5) * 10) + 2;
							start();
						}
						update();
					}

					function move(t, k){
						pos.x += k;
						for (var i = 0; i < 4; i++) 
							pos.fk[i] *= t;
						update(is());
					}

					document.onkeydown = function(e){
						eval("pause||" + keycom[(e ? e : event).keyCode]);
					};
					nextdia();
					start();
				</script></body>
				</html>
Copy the code

For more of Jerry’s original articles, please follow the public account “Wang Zixi “: