关闭

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

2024人阅读 评论(16) 收藏 举报
分类:

导读:在别人文章里看到了,然后写了一遍。结果出错了,然后调出来了,然后理解了一下,加了点注释,有一些想法。忘了在 哪一篇上面看的了,就贴不出来链接地址。原谅。呃,真没自己的东西,权当练打字了吧。其实,最开始的时候,我也想出来需要那几个方法的,但是不知道怎么用这纯爷们儿的Js去实现。想想吧,还是对于Js基础的知识了解的太少了。

一、代码

<span style="font-family:KaiTi_GB2312;font-size:18px;"><!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 author="Angel";  
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> </span>

二、效果图


三、思考

1,我在想,我当时学Js学的那么无聊,效率那么低,到底是什么原因导致的。我那时候真的知道这个对我很重要,但同时也在脑子里印下了这个也很难的想法。如果在我学习之前,能够以一种简单粗暴的方式告诉我自己,这个东西很好玩,那我是不是学习就不那么无聊、累、低下了。我需要反思我以后的学习。

2,看了好几篇文章,才弄出来一个全的。大体上是能看懂,但是细节上一时半会儿还真是不明白,小时候很喜欢玩这个游戏,但从来没有想过要自己去做。就跟看着别人学的多,学的好一样,从来没有想过自己怎么变成那样。

3,里面涉及到了位移,数组,正则,Js基本函数,循环,说起来谁都能说上那么两句,但为什么别人能写的出来,我就写不出来呢?想起来今天师傅提醒我的一句话:不要好高骛远,好好积累。


四、总结

其实这个游戏做到这里,然后,就可以接着往上做一些升级,比如没消灭一行,就累计一次,到了多少的时候,就升级,将 Interval设置快一点。然后还可以给这个方块设置颜色,给游戏配置背景音乐等等。突然觉得,写代码真心挺好的,以后要是穷,买不起玩具。咱就自己写,然后自己玩吧。唉


0
0
查看评论

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

JS写俄罗斯方块完美注释版/************************************************************* JS俄罗斯方块完美注释版 v 1.01* 作者: sunxing007* 转载请说明来自: http://blog.csdn.net/sunxing...
  • sunxing007
  • sunxing007
  • 2008-11-19 00:35
  • 14543

js版俄罗斯方块设计思想及实现

俄罗斯方块方块是小时候的一个回忆,从最开始的掌上的黑白游戏机,到电视游戏机,到电脑,无不有它的痕迹,今天我们来一起重温它的一种实现方法,也算是整理一下我的思路吧...... 1.以中心点坐标代替整个方块 2.以数学坐标点代表实际坐标 3.统一冲突检测方法 问题分析: 俄罗斯方块就是一个...
  • luqin1988
  • luqin1988
  • 2013-01-18 09:50
  • 4160

Html5+js实现俄罗斯方块

代码测试地址:测试 1、使用的知识点 html5 javascript 2、需要实现的功能 俄罗斯方块普通玩法 3、分析功能实现 (1)组合方块,共7中形状,可静态指定(由4个方块组合)      (2)实现组合方块的下移、左移和右移  ...
  • yixi524
  • yixi524
  • 2014-01-14 23:40
  • 1679

原生JS实现网页版俄罗斯方块

  • 2017-05-06 22:41
  • 26KB
  • 下载

js版俄罗斯方块

  • 2014-03-17 16:30
  • 23KB
  • 下载

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

对于小白来说用js实现俄罗斯方块还是有难度的,网上找了很多代码看,有的很长难懂,有的短小精悍,但不只用到了js还用到了框架,对于还未接触框架的小白宝宝,也只能无奈自己是小白了,自己写不出来那就找一篇纯js代码,弄懂也是一种收获吧。so 接下来就是我的理解咯,有不对的地方请多多包涵 个人觉得思路还是很...
  • d1105260363
  • d1105260363
  • 2017-08-23 17:54
  • 468

史上最短小精悍的javascript编写的俄罗斯方块游戏,仅仅60行代码

史上最短小精悍的javascript编写的俄罗斯方块游戏,仅仅60行代码,代码下载地址:http://www.zuidaima.com/share/1759652641295360.htm
  • yaerfeng
  • yaerfeng
  • 2014-04-28 09:52
  • 52386

JS代码版俄罗斯方块

  • 2014-11-19 23:58
  • 24KB
  • 下载

纯JS俄罗斯方块游戏源代码

  • 2013-01-10 10:23
  • 2KB
  • 下载

js-俄罗斯方块

  • 2017-09-14 13:51
  • 5KB
  • 下载
    联系方式
    QQ:1028335395
    邮箱:hehongxia626@163.com
    个人资料
    • 访问:311224次
    • 积分:15486
    • 等级:
    • 排名:第850名
    • 原创:287篇
    • 转载:1篇
    • 译文:25篇
    • 评论:4646条
    最新评论