首頁 > 開發者 > JavaScript

純JS俄羅斯方塊，打造屬於你的遊戲帝國。

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

　js部分：

1 var map = eval("[" + Array(23).join("0x801,") + "0xfff]");
 2     var tatris = [[0x6600], [0x2222, 0xf00], [0xc600, 0x2640], [0x6c00, 0x4620], [0x4460, 0x2e0, 0x6220, 0x740], [0x2260, 0xe20, 0x6440, 0x4700], [0x2620, 0x720, 0x2320, 0x2700]];
 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.3, 12 - 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();

實現：

另外提供源碼下載。

特此聲明：所有評論和私信都會在第一時間回複。也歡迎園子的大大們指正錯誤，共同進步。

本文原始作者部落格 http://www.cnblogs.com/toutou

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More