散分发布本人呕心之作：JavaScript漂亮俄罗斯方块

Question

俄罗斯方块，地球人都知道。网上流传的js俄罗斯方块也是多的像米，各有各的不方便，我这里代码全部自己书写，不参考任何现有俄罗斯方块游戏代码，功能及界面上博采众长，力争将我的Js俄罗斯方块做到脱颖而出。当然离尽善尽美还很远，但敢说比我见到过的所有js俄罗斯方块都要好（好玩、好看），如果你有看到更好的，请告诉我。一、优点：
1、按键反应灵敏（摒弃了onkeydown的系统自动repeat）
2、支持换皮肤，可以设置方块图案（预置5种方块图案）、背景图案(预置10位美女图)、网格。
3、自定义初始速度
4、积分历史记录
5、自定义按键（呕心之作！目前支持自定义按键的俄罗斯方块太少太少了。）
6、配置自动保存（存于Cookie中），下次游戏时，皮肤设置、速度设置、按键设置、积分记录会自动载入。
7、兼容性（搞过WEB前端的童鞋都知道兼容的痛），我测试通过了IE8.0，IE7.0，IE6.0，Firefox3.0，Opera9.6（为了它颇费一番工夫），其他浏览器因环境限制暂时没有测试。
8、全部采用DIV+CSS，摒弃传统的以表格显示方块的做法。二、问题：
1、玩到一半时，想从头开始，但这时候没有开始按钮，只有暂停或者继续，你可以直接刷新页面，或者快速按多次下落键到GameOver就可以再开始了。
2、如果在Opera浏览器下玩，且启用了半透明功能，那么很可能会导致CPU占用大增，游戏响应速度大减，在我的古董机+Opera9.6上非常明显。这个应该是Opera的BUG，不知道更高版本Opera如何。
3、配置保存在Cookie中，清除浏览器Cookie会导致配置恢复为预设状态。也有考虑过是否保存到服务端数据库，但又觉得意义不大，而且还要注册账号比较麻烦，所以作罢。三、提示：
按键自定义功能，增添了游戏的方便性和趣味性。（1）玩家可以一只手控制左右、另一只手控制旋转（我喜欢用左手按Ctrl旋转），双手配合比只使用一只手轻松多了！（2）也可以锻炼一下逆向思维，左右键功能互换，上下键功能互换，看看你脑子转不转得过来！在线试玩请点击这里，或者输入这个网址 http://www.cuixiping.com/jsgame/tetris-cxp/ 游戏的实现逻辑，我就不啰嗦了，代码都是一个个很容易理解的函数，一看就知道功能的，程序逻辑也很清晰。有兴趣的朋友自己右键看。源码比较长，就不贴了，上几张游戏截图：
截图1，开始之前： 截图2：换皮肤截图3：按键自定义截图4：积分历史记录截图5：Game Over在线试玩请点击这里，或者输入这个网址 http://www.cuixiping.com/jsgame/tetris-cxp/ cuixiping 2009年7月

Answer 1

忽然发现我的海口夸的有点儿大了，惭愧惭愧。简单说说代码相关的话题。1、部分主要功能函数列表:
function addCss(){
function setBlockSkin(x){
function setBg(i,b){
function setBgAlpha(b){
function $(id){
function $each(arr,func){
function viewObj(obj){
function display(obj,b){
function id2var(tag){
function saveUserData(n,v){
function loadUserData(n){
function saveScore(){
function loadScore(){
function stopEvent(evt){
function min(arr){
function max(arr){
function viewNext(){
function draw4(T,x,y,b){
function draw1(c,x,y,b){
function dropNewBlock(){
function move(T,x,y){
function printScore(){
function end(T){
function rotate(T){
function down_T(){
function move_1step(T,x,y){
function move_quickdown(T){
function canMove4(T,addx,addy){
function resetGame(){
function startNewGame(){
function switchGame(){
function handleKeydown(kcode){
function repeatKeydown(){
function clearTimer(){
function movie(){
function animate(){
function saveKeyCfg(){
function loadKeyCfg(){
function saveUICfg(){
function loadUICfg(){
2、采用DIV+CSS
    每一个方块都是一个DIV，每个方块看起来不一样，都是className的功劳，每一个方块的位置，还是className的功劳，不是直接赋style.left和style.top，这些已经定义到样式表去了。
    换皮肤，也就是切换className和隐藏/显示效果。    游戏区的显示采用DIV绝对定位 + z-index层层叠加；从上到下依次为：
        GameOver层
        GameOver背景层
        方块层**
        网格层
        背景图片遮罩层(for Opera)
        背景图片层
        背景颜色层
    脚本控制哪些层什么时候显示什么时候隐藏。3、代码片断之一：
//按键设置
var cfg={
  "key": {
"rotate":[17,38] //38↑ 17CTRL
,"left":37
,"right":39
,"down":[40,35] //直接落地 40↓ 35END 32空格
,"pause":[19,13] //Pause //Enter
  }
  ,"ui": {
"skin":0, "bgImg":3, "bgImgUse":true, "bgImgAlpha":false, "grid":true, "shadow":false, "next":true
  }
  ,"direction":1 //旋转方向: 1顺时针 -1逆时针
  ,"startLevel":7
  ,"topScores":[]
}4、代码片断之二
//每个keyCode对应到的键名称
var keymap={16:"<Shift>",17:"<Ctrl>",18:"<Alt>",20:"<Caps>",9:"<Tab>",27:"<Esc>",13:"<Enter>",8:"<Back>", 33:"<PgUp>",34:"<PgDn>",145:"<Scroll>",19:"<Pause>",36:"<Home>",35:"<End>",45:"<Ins>",46:"<Del>",37:"←",38:"↑",39:"→",40:"↓", 144:"<Num>",12:"<5*>",111:"<[/]>",106:"<[*]>",109:"<[-]>",107:"<[+]>",110:"<[.]>", 192:"~",189:"-",187:"+",220:"|", 219:"{",221:"}",186:":",222:"\"",188:",",190:".",191:"?"};
for(var i=112;i<=123;i++)keymap[i]="<F"+(i-111)+">";
for(var i=96;i<=105;i++)keymap[i]="<["+(i-96)+"]>";
for(var i=48;i<=57;i++)keymap[i]=(i-48)+"";
for(var i=65;i<=90;i++)keymap[i]=String.fromCharCode(i);5、代码片断之四：
//使非IE也可以直接使用id做变量名，省去每次$(id)或getElementById的繁琐。
if(typeof dvStage=="undefined"){
function id2var(tag){
var os=document.getElementsByTagName(tag);
for(var i=0;i<os.length;i++){if(os[i].id)window[os[i].id]=os[i]}
}
id2var("div");
id2var("span");
id2var("select");
id2var("input");
}6、代码片断之五：
//方块形状数据
var layout = {
    "length":7
    ,0: { //S
        "xy": [
            [[0,1,1,2],[0,0,-1,-1]]
            ,[[0,0,1,1],[-2,-1,-1,0]]
        ]
    }
    ,1: { //Z
        "xy": [
            [[0,1,1,2],[-1,-1,0,0]]
            ,[[0,0,1,1],[0,-1,-1,-2]]
        ]
    }
    ,2: { //L
        "xy": [
            [[0,0,1,2],[0,-1,-1,-1]]
            ,[[0,1,1,1],[-2,-2,-1,0]]
            ,[[0,1,2,2],[0,0,0,-1]]
            ,[[0,0,0,1],[-2,-1,0,0]]
        ]
    }
    ,3: { //J
        "xy": [
            [[0,1,2,2],[-1,-1,-1,0]]
            ,[[0,1,1,1],[0,0,-1,-2]]
            ,[[0,0,1,2],[-1,0,0,0]]
            ,[[0,0,0,1],[0,-1,-2,-2]]
        ]
    }
    ,4: { //I
        "xy": [
            [[1,1,1,1],[-3,-2,-1,0]]
            ,[[0,1,2,3],[0,0,0,0]]
        ]
    }
    ,5: { //O
        "xy": [
            [[0,0,1,1],[0,-1,0,-1]]
        ]
    }
    ,6: { //T
        "xy": [
            [[0,1,2,1],[-1,-1,-1,0]]
            ,[[1,1,1,0],[-2,-1,0,-1]]
            ,[[0,1,2,1],[0,0,0,-1]]
            ,[[0,0,0,1],[0,-1,-2,-1]]
        ]
    }
}

Answer 2

jf```玩不了，链接中带有game关键词

Answer 3

我用的是Firefox/3.0.11 切换显示/按键/成绩 这一栏没有用。总的来说非常不错，有时间学习下。

Answer 4

每次都在正中间下落。
1.编码风格没有特别注意，都在EditPlus里写的，按个人习惯的。你觉得有哪些问题呢？
2.关于封装，根据我的理解，封装是为了重用，作为一个独立游戏，不会重用什么，再者总共也才二三十个函数的样子，不封装阅读起来更方便。
3.过于灵敏的问题
代码里面有两个控制按键自动重复的延时时间的，调整一下就可以修改灵敏度：
      var repeat_delay=50,repeat_delay1=160; //自动重复keydown的毫秒间隔
在我的电脑上，调为
      var repeat_delay=100,repeat_delay1=500;
时与系统默认的一致（取决于控制面板中键盘选项的设置），但速度较快的第10级的时候，500太浪费了，所以我改短了。
本来想做一个类似控制面板鼠标选项里那样，做一个用户自定义键盘灵敏度的功能的，还没来得及就犯懒了。已修正。把按上下左右时都加上禁止事件冒泡了。
这都出现滚动条啊？那你屏幕太小了。
呵呵，有时候我也觉得太花，不过可以设置不显示背景图的，这样就比较简洁了。
你说的很对。这是我一开始就有考虑的问题，后来觉得快速下降意义不大，主要是因为这个速度的分级，目前分了10级，我觉得很冗余了，第1至7级我从来不玩，觉得太慢了，只玩8-10级，这个时候方块的下落速度基本上不需要快速下降了。
快速下降对于速度较低的级别确实比较有用，考虑要加上。
代码里面有两个控制按键自动重复的延时时间的，调整一下就可以修改灵敏度：
var repeat_delay=50,repeat_delay1=160; //自动重复keydown的毫秒间隔
数字越小越灵敏，越大越不灵敏。
我个人喜欢灵敏点儿，特别是玩第10级的时候，不灵敏还真来不及：）
你改为var repeat_delay=100,repeat_delay1=500;就跟系统默认的灵敏度差不多了（取决于控制面板中键盘选项的设置）。

Answer 5

那多练练哈，我基本在第9级和第10级玩，过关率一半。第8级稳过。我的Firefox/3.0.8正常。你那里有什么出错提示没？

Answer 6

强大 很完美 
   (__)　
　 /oo\\________
　 \　/　　　　 \---\
 　 \/　　　 /　 \　 \
 　　　\\_|___\\_|/　　*
 　　　  ||　 YY|  
 　　　  ||　　||  　

Answer 7

楼主发个源码吧：[email protected]

Answer 8

楼主太强大了， 新手学习中，能不能把源码发给我学习下 谢谢！ 邮箱：[email protected]

Answer 9

LZ能给个源码不     想学习下     [email protected]