純JS俄羅斯方塊，打造屬于你的游戲帝國(guó)。
俄羅斯方塊（Tetris， 俄文：Тетрис）是一款電視游戲機(jī)和掌上游戲機(jī)游戲，它由俄羅斯人阿列克謝·帕基特諾夫發(fā)明，故得此名。
俄羅斯方塊（Tetris， 俄文：Тетрис）是一款電視游戲機(jī)和掌上游戲機(jī)游戲，它由俄羅斯人阿列克謝·帕基特諾夫發(fā)明，故得此名。
俄羅斯方塊的基本規(guī)則是移動(dòng)、旋轉(zhuǎn)和擺放游戲自動(dòng)輸出的各種方塊，使之排列成完整的一行或多行并且消除得分。由于上手簡(jiǎn)單、老少皆宜，從而家喻戶曉，風(fēng)靡世界。
那么，我們的問(wèn)題來(lái)了，學(xué)挖掘機(jī)技術(shù)哪家強(qiáng)？
俄羅斯方塊可以說(shuō)是風(fēng)靡全世界，老少皆知的一款游戲， 那么我們作為web開(kāi)發(fā)是否可以使用代碼簡(jiǎn)單實(shí)現(xiàn)這個(gè)小游戲呢？
html代碼部分：
- <!doctype html>
- <html>
- <head>
- </head>
- <body>
- <h2 style="background-color:yellow;">博客園:請(qǐng)叫我頭頭哥</h2>
- <div id="box"></div>
- <div id="info">
- NEXT:
- <div id="next"></div>
- <div id="text"></div>
- </div>
- </body>
- </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部分：
- 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 char = { x: "\u3000", s: "\u25a0", t: "\u25a1" };
- var keycom = { "38": "rotate(1)", "40": "down()", "37": "move(2,1)", "39": "move(0.5,-1)", "32": "0;pause=!pause" };
- var dia, pos, bak, run, next, pause = false, info = { speed: 1, lines: 0, score: 0 };
- // 開(kāi)始時(shí)間
- function start() {
- dia = next.d;
- bak = pos = {
- fk: [],
- y: 0,
- x: 4,
- s: next.s
- };
- nextdia();
- 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);
- document.getElementById("text").innerHTML = "SCORE:" + info.score + "<br/><br/>LINES:" + info.lines + "<br/><br/>SPEED:" + info.speed;
- rotate(0);
- run = setInterval("pause||down()", ~ ~(Math.pow(1.3, 12 - info.speed) * 30 + 20));
- }
- // 游戲結(jié)束時(shí)事件
- function over() {
- document.onkeydown = null;
- // confirm， 是否再來(lái)一局
- var end = confirm("游戲結(jié)束, 是再來(lái)一局");
- if (end) {
- window.location.href = window.location.href;
- } else {
- alert("騷年，自制力不錯(cuò)!");
- }
- }
- function nextdia() {
- next = { d: tatris[~ ~(Math.random() * 7)], s: ~ ~(Math.random() * 4) };
- }
- 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, char.t)))
- 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, char.s).replace(/0/g, char.x);
- }
- 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, r = 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);
- ++info.lines % 20 == 0 && info.speed++, r++;
- }
- clearInterval(run);
- if (map[1] != 0x801)
- return over();
- info.score += ~ ~(Math.pow(r, 1.5) * 10) + 2;
- 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("pause||" + keycom[(e ? e : event).keyCode]);
- };
- nextdia();
- start();
實(shí)現(xiàn)效果圖：
特此聲明：所有評(píng)論和私信都會(huì)在第一時(shí)間回復(fù)。也歡迎園子的大大們指正錯(cuò)誤，共同進(jìn)步。
責(zé)任編輯：王雪燕
來(lái)源：
博客園
