纯JS俄罗斯方块

俄罗斯方块(Tetris, 俄文:Тетрис)是一款电视游戏机和掌上游戏机游戏,它由俄罗斯人阿列克谢·帕基特诺夫发明,故得此名。

俄罗斯方块的基本规则是移动、旋转和摆放游戏自动输出的各种方块,使之排列成完整的一行或多行并且消除得分。由于上手简单、老少皆宜,从而家喻户晓,风靡世界。

那么,我们的问题来了,学挖掘机技术哪家强?

俄罗斯方块可以说是风靡全世界,老少皆知的一款游戏, 那么我们作为web开发是否可以使用代码简单实现这个小游戏呢?

html代码部分:

  
  
  
  
  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4. </head> 
  5. <body> 
  6.     <h2 style="background-color:yellow;">博客园:请叫我头头哥</h2> 
  7.     <div id="box"></div> 
  8.     <div id="info"
  9.         NEXT: 
  10.         <div id="next"></div> 
  11.         <div id="text"></div> 
  12.     </div> 
  13. </body> 
  14. </html> 

css部分: 

  
  
  
  
  1. body { 
  2.         background: blue; 
  3.         font25px / 25px ËÎÌå; 
  4.     } 
  5.  
  6.     #box { 
  7.         float: left; 
  8.         width: 252px; 
  9.         border#999 20px ridge; 
  10.         color: #9f9; 
  11.         text-shadow2px 3px 1px #0f0; 
  12.     } 
  13.  
  14.     #info { 
  15.         float: left; 
  16.         color: #cfc; 
  17.         padding: 24px; 
  18.     } 
  19.  
  20.     #next { 
  21.         padding: 8px; 
  22.         width: 105px; 
  23.         color: #9f9; 
  24.         text-shadow2px 3px 1px #0f0; 
  25.     } 

 js部分:

  
  
  
  
  1. var map = eval("[" + Array(23).join("0x801,") + "0xfff]"); 
  2.     var tatris = [[0x6600], [0x22220xf00], [0xc6000x2640], [0x6c000x4620], [0x44600x2e00x62200x740], [0x22600xe200x64400x4700], [0x26200x7200x23200x2700]]; 
  3.     var char = { x: "\u3000", s: "\u25a0", t: "\u25a1" }; 
  4.     var keycom = { "38""rotate(1)""40""down()""37""move(2,1)""39""move(0.5,-1)""32""0;pause=!pause" }; 
  5.     var dia, pos, bak, run, next, pause = false, info = { speed: 1, lines: 0, score: 0 }; 
  6.  
  7.     // 开始时间 
  8.     function start() { 
  9.         dia = next.d; 
  10.         bak = pos = { 
  11.             fk: [], 
  12.             y: 0
  13.             x: 4
  14.             s: next.s 
  15.         }; 
  16.         nextdia(); 
  17.         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); 
  18.         document.getElementById("text").innerHTML = "SCORE:" + info.score + "<br/><br/>LINES:" + info.lines + "<br/><br/>SPEED:" + info.speed; 
  19.         rotate(0); 
  20.         run = setInterval("pause||down()", ~ ~(Math.pow(1.312 - info.speed) * 30 + 20)); 
  21.     } 
  22.  
  23.     // 游戏结束时事件 
  24.     function over() { 
  25.         document.onkeydown = null
  26.  
  27.         // confirm, 是否再来一局 
  28.         var end = confirm("游戏结束, 是再来一局"); 
  29.         if (end) { 
  30.             window.location.href = window.location.href; 
  31.         } else { 
  32.             alert("骚年,自制力不错!"); 
  33.         } 
  34.     } 
  35.  
  36.     function nextdia() { 
  37.         next = { d: tatris[~ ~(Math.random() * 7)], s: ~ ~(Math.random() * 4) }; 
  38.     } 
  39.  
  40.     function update(t) { 
  41.         bak = { fk: pos.fk.slice(0), y: pos.y, x: pos.x, s: pos.s }; 
  42.         if (t) return
  43.         for (var i = 0, a2 = ""; i < 22; i++) a2 += map[i].toString(2).slice(1, -1) + "<br/>"
  44.         for (var i = 0, n; i < 4; i++) 
  45.             if (/([^0]+)/.test(bak.fk[i].toString(2).replace(/1/g, char.t))) 
  46.                 a2 = a2.substr(0, n = (bak.y + i + 1) * 15 - RegExp.$_.length - 4) + RegExp.$1 + a2.slice(n + RegExp.$1.length); 
  47.         document.getElementById("box").innerHTML = a2.replace(/1/g, char.s).replace(/0/g, char.x); 
  48.     } 
  49.  
  50.     function is() { 
  51.         for (var i = 0; i < 4; i++) 
  52.             if ((pos.fk[i] & map[pos.y + i]) != 0
  53.                 return pos = bak; 
  54.     } 
  55.  
  56.     function rotate(r) { 
  57.         var f = dia[pos.s = (pos.s + r) % dia.length]; 
  58.         for (var i = 0; i < 4; i++) 
  59.             pos.fk[i] = (f >> (12 - i * 4) & 15) << pos.x; 
  60.         update(is()); 
  61.     } 
  62.  
  63.     function down() { 
  64.         ++pos.y; 
  65.         if (is()) { 
  66.             for (var i = 0, r = 0; i < 4 && pos.y + i < 22; i++) 
  67.                 if ((map[pos.y + i] |= pos.fk[i]) == 0xfff) { 
  68.                     map.splice(pos.y + i, 1), map.unshift(0x801); 
  69.                     ++info.lines % 20 == 0 && info.speed++, r++; 
  70.                 } 
  71.             clearInterval(run); 
  72.             if (map[1] != 0x801
  73.                 return over(); 
  74.             info.score += ~ ~(Math.pow(r, 1.5) * 10) + 2
  75.             start(); 
  76.         } 
  77.         update(); 
  78.     } 
  79.  
  80.     function move(t, k) { 
  81.         pos.x += k; 
  82.         for (var i = 0; i < 4; i++) 
  83.             pos.fk[i] *= t; 
  84.         update(is()); 
  85.     } 
  86.  
  87.     document.onkeydown = function (e) { 
  88.         eval("pause||" + keycom[(e ? e : event).keyCode]); 
  89.     }; 
  90.     nextdia(); 
  91.     start(); 

实现效果图: 

纯JS俄罗斯方块_第1张图片

本文原始作者博客 http://www.cnblogs.com/toutou

你可能感兴趣的:(JS俄罗斯方块,简易JS俄罗斯方块,纯JS俄罗斯方块)