首頁 > 開發者 > JavaScript
純JS實現俄羅斯方塊，打造屬於你的遊戲帝國
俄羅斯方塊可以說是風靡全世界，老少皆知的一款遊戲， 那麼我們作為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部分：
body { background: blue; font: 25px / 25px ËÎÌå; } #box { float: left; width: 252px; border: #999 20px ridge; color: #9f9; text-shadow: 2px 3px 1px #0f0; } #info { float: left; color: #cfc; padding: 24px; } #next { padding: 8px; width: 105px; color: #9f9; text-shadow: 2px 3px 1px #0f0; }
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.s15 };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();
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
