标签 游戏 下的文章
在线“打飞机”，把飞机打到网页上
来自 http://www.xhily.cn/archives/104.html
它可以在当前网页上生成一个小飞机，你能用方向键控制移动方向（还有漂移效果，感觉很好），空格键发射子弹（有爆炸效果，子弹能穿越屏幕），目的就是消除网页上的任意HTML 元素，右下角有得分统计。
玩到中途时可用Esc 退出游戏，并且而且，退出后，网页上残留的元素依然能正常使用（长按字母 B 查看），所以在某些情况下也能用来恶搞。
我知道不上图你们是不会相信的
点我
代码必须分享出来吧
页面调用代码
javascript:var s = document.createElement('script');s.type='text/javascript';document.body.appendChild(s);s.src=' https://m69w.com/demo/fj.js ';void(0);
也可以使用浏览器自带的功能实现 比如Google的Console 国产浏览器的控制台 将以上代码输进去 敲回车 依然可以
JS版俄罗斯方块代码详细解说
来自：JS版俄罗斯方块代码详细解说
书写过程中的难点
方块变形算法的实现
边界检测和占用检测
方块旋转算法及BUG修复的两种方式
首先说明一下，方块我们是用一维数组来存储四个对象来实现的。方块表示代码如下：
switch (t){
case 0:{ //"田"字形
this.shape[0] = {x:0, y:0};
this.shape[1] = {x:1, y:0};
this.shape[2] = {x:0, y:1};
this.shape[3] = {x:1, y:1};
break;
}
case 1:{ //"|"字形
this.shape[0] = {x:0, y:0};
this.shape[1] = {x:0, y:1};
this.shape[2] = {x:0, y:2};
this.shape[3] = {x:0, y:3};
break;
}
case 2:{ //反"z"字形
this.shape[0] = {x:0, y:0};
this.shape[1] = {x:0, y:1};
this.shape[2] = {x:1, y:1};
this.shape[3] = {x:1, y:2};
break;
}
case 3:{ //"z"字形
this.shape[0] = {x:1, y:0};
this.shape[1] = {x:1, y:1};
this.shape[2] = {x:0, y:1};
this.shape[3] = {x:0, y:2};
break;
}
case 4:{ //"┖"字形
this.shape[0] = {x:0, y:0};
this.shape[1] = {x:0, y:1};
this.shape[2] = {x:1, y:1};
this.shape[3] = {x:2, y:1};
break;
}
case 5:{ //"┛"字形
this.shape[0] = {x:0, y:1};
this.shape[1] = {x:1, y:1};
this.shape[2] = {x:2, y:1};
this.shape[3] = {x:2, y:0};
break;
}
case 6:{ //"┻"字形
this.shape[0] = {x:1, y:0};
this.shape[1] = {x:0, y:1};
this.shape[2] = {x:1, y:1};
this.shape[3] = {x:2, y:1};
break;
}
}而上面的x,y代表着他的位置，看起来还真像数学里面学习的二维坐标系。那现在我们就先用数学方法来模拟旋转。请看下图：
俄罗斯广场旋转算法详解 向量CA = (X1 – X, Y1 - Y) 把向量CA顺时针旋转90度，得到向量CB，由（CA * CB =0）可知： 向量CB = (Y1 - Y, X – X1) 又由于 向量CB = (X2 – X , Y2 - Y) 故得X2= X – Y + Y1 Y2 = X + Y –X1 由以上的旋转方法，我们就可以对方块进行变形处理。代码如下：（以下是以逆时针方向旋转为基础）
block.prototype.rotate = function(){
this.copy();
//复制当前activeBlock方块,当旋转不符合要求时,可以还原方块
this.board.eraserActblock();
var cx = 0,cy = 0;
for(var i=0; i<this.shape.length; i++){
cx += this.shape[i].x;
cy += this.shape[i].y;
}
cx = Math.round(cx/this.shape.length);
cy = Math.round(cy/this.shape.length);
if(this.blockType == 4 || this.blockType == 5 || this.blockType == 6){
//对方块类型进行判断
for(i = 0; i<this.shape.length; i++){
//旋转方块
this.shape[i].x = cx + cy - this.backShape[i].y;
this.shape[i].y = cy - cx + this.backShape[i].x;
}
} else if(this.max("x")-this.min("x") == 1 || this.max('x')- this.min('x') == 3) {
for(i = 0; i<this.shape.length; i++){
//旋转方块
this.shape[i].x = cx + cy - this.backShape[i].y-1;
this.shape[i].y = cy - cx + this.backShape[i].x;
}
} else {
for(i = 0; i<this.shape.length; i++){
//旋转方块
this.shape[i].x = cx + cy - this.backShape[i].y;
this.shape[i].y = cy - cx + this.backShape[i].x;
}
}
if(!this.isIllegal()){
//旋转后的方块不符合要求,则还原方块
for( i=0; i< this.shape.length; i++){
this.shape[i].x = this.backShape[i].x;
this.shape[i].y = this.backShape[i].y;
}
}
this.board.paintActblock();
}你可以查看DEMO（点击查看演示DEMO），里面也是用逆时针方向来实现的旋转。其中bug，你一看就会知道。（产生的具体原因就自行分析吧！） 旋转算法引起水平偏移BUG的两种解决方案：
进行类型分析，不同类型单独处理（具体代码见上）
方块移动方向改为向下（即可以把旋转方向改为顺时针方向，具体算法实现见上讲旋转算法处），从而达到隐藏bug偏移产生的bug。
方块的边界检测和合法性检测
其实怎么说呢？合法性和边界这两个特性是分不开的。因为边界性如果检测不通过的话，那么合法性也就更不用说了。 边界检测就是检测board对象shape属性保存的数组中对象x、y的值是否在面板内。而占用检测也就是看当前board对象中shape属性保存的数组中对象x、y所对就面板的小方块不否为1，要是为1的话，证明已经被占用，相反则没有占用。实现的代码如下：
block.prototype.isIllegal = function(checkObj){//这个里面放被检测的对象
var checkObj = checkObj || this.shape;
for(var i=0; i<checkObj.length; i++){
if(checkObj[i].x < 0 || checkObj[i].x > (this.board.w-1) || checkObj[i].y<0 || this.board.status[checkObj[i].y][checkObj[i].x] ==1 ){
return false;
}
}
return true;
};欲看详源代码，请请试玩“俄罗斯方块重写”，并占击右键查看源代码。此版本会一直保存，后序版本将会在此版本上进行扩展。并最终实现在手机，电脑上都可以玩。 小结： 第一次利用原生的Javascript来写小游戏。感受颇多！
JavaScript真的很强大。只要你想得到，它几乎都能做得到（可能说的是有点夸张了）。
原来写JS代码多是面向过程来写的。而这次也是尝试着来用面向对象的方法来写，也就使得我对this关键字，作用域链等都有了更加深入的了解。
代码总体来讲是完整了写了两次，第一次写完了，自己实现是看不下去，所以又重写了。但是现在看来现在可以看到的版本，还是存在很多的问题。（在后面的时间里，我会在此基础上进行完善和扩展。）
60行JS代码编写的俄罗斯方块游戏
转载于：https://b.lxd.cc/Tetris_Worlds.html
这可能是史上最短小精悍的javascript编写的俄罗斯方块游戏，因为它仅仅只有60行代码，就实现了俄罗斯游戏所有经典：随机形状、变形、加速、消除。键盘方向键控制，上箭头变形，你要试一试吗？
<!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 domain="domain";
var author="author";
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>