60行代码俄罗斯方块[原创]

天际的海浪 2013-04-15 06:57:27

加精

前几天看了论坛中以前的一个俄罗斯方块小游戏，觉得有些意思，一时手痒也写了一个。
代码不长，不到2kb，大家看看。



<!doctype html><html><head></head><body>

<div id="box" style="width:252px;font:25px/25px 宋体;background:#000;color:#9f9;border:#999 20px ridge;text-shadow:2px 3px 1px #0f0;"></div>

<script>

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 keycom={"38":"rotate(1)","40":"down()","37":"move(2,1)","39":"move(0.5,-1)"};

var dia, pos, bak, run;

function start(){

	dia=tatris[~~(Math.random()*7)];

	bak=pos={fk:[],y:0,x:4,s:~~(Math.random()*4)};

	rotate(0);

}

function over(){

	document.onkeydown=null;

	clearInterval(run);

	alert("GAME OVER");

}

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,"\u25a1")))

			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,"\u25a0").replace(/0/g,"\u3000");

}

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; 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);

		if(map[1]!=0x801) return over();

		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(keycom[(e?e:event).keyCode]);

};

start();

run=setInterval("down()",400);

</script></body></html>

...全文

32802 367 打赏收藏转发到动态举报

写回复

用AI写文章

367 条回复

切换为时间正序

请发表友善的回复…

发表回复

雨下聽風 2015-11-20

打赏
举报

佩服楼主

人鱼传说 2015-11-16

打赏
举报

楼主的js功底让我仰视膜拜！除了学习，还是学习！

eyeder 2015-09-20

打赏
举报

引用 364 楼 jslang 的回复:

引用 363 楼 eyeder 的回复:
还想问一下is函数的作用一直没弄明白。。。。。
is函数的作用是检测活动的方块是否与界面上已有的方块有重合，如有重合则把活动的方块恢复到之前备份的状态

哦哦谢谢啦

天际的海浪 2015-09-20

打赏
举报

引用 363 楼 eyeder 的回复:

还想问一下is函数的作用一直没弄明白。。。。。

is函数的作用是检测活动的方块是否与界面上已有的方块有重合，如有重合则把活动的方块恢复到之前备份的状态

eyeder 2015-09-20

打赏
举报

RegExp.$_.length这句是什么意思主要是想问$_的意思

eyeder 2015-09-20

打赏
举报

还想问一下is函数的作用一直没弄明白。。。。。

天际的海浪 2015-09-20

打赏
举报

引用 361 楼 eyeder 的回复:

RegExp.$_.length这句是什么意思主要是想问$_的意思

返回执行规范表述查找的字符串。只读。也可以写成 RegExp.input

木头海上漂 2015-09-15

打赏
举报

光看这代码我就磕磕碰碰了。。。楼主威武啊。。啥时候我能写个贪吃蛇啊

思@& 2015-08-21

打赏
举报

楼主太厉害了，代码下载下来学习下

陌生的羁绊2014 2015-07-11

打赏
举报

问大神个别的问题，这指出{}+[]与[]+{}的值,为什么

天际的海浪 2015-06-13

打赏
举报

引用 356 楼 u011483807 的回复:

[quote=引用 23 楼 jslang 的回复:] [quote=引用 19 楼 ph_wuwuwu 的回复:] 刚学Javascript，想问一下取反两次变整数是什么原理？

位运算的操作值要求是整数，其结果也是整数，所以经过位运算的都会自动变成整数除了~~n 还可以用 n<<0 n>>0 n|0 取整 [/quote] 为什么测试发现~~Math.random()*7 的结果不是随机数了，只显示0[/quote] ~ 运算符优先级高于 * 运算符，要加括号的 ~~(Math.random()*7)

陌生的羁绊2014 2015-06-10