溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“怎么用Javascript實現俄羅斯方塊游戲”，在日常操作中，相信很多人在怎么用Javascript實現俄羅斯方塊游戲問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用Javascript實現俄羅斯方塊游戲”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
本俄羅斯方塊代碼采用 JavaScript 腳本代碼寫成，簡單易懂；
全代碼采用靜態類及靜態變量成員組成；
全腳本通過實現代碼全局配置 OLSFK.Options = {...}
定義方塊起始坐標及定義各自的旋轉點；
從初始化俄羅斯方塊界面開始，再監聽鍵盤事件；以及左右，向下及旋轉動作判斷，重新渲染方塊位置；
判斷是否消行，以及相應的加級判斷，執行速度，加分操作來執行；
***以判斷是否當前級別大于所定義的***級別來判斷是否結束；
代碼說明講解
OLSFK.Options = { //相關參數 width:12,//界面橫向方塊數 height:20,//界面縱向方塊數 boxWidth : '16px', curLevel:1, speed : 1000, //setInterval,setTimeout direct : { //可以設定是A S D W, 還是← ↓ → Down: 40 , /*run speed*/ Left: 37, Right: 39, Rotate: 38 }, Move:true,//是否正在移動 Eventing:false, Levels: { 1:1000, 2:900, 3:800, 4:700, 5:600, 6:500, 7:400, 8:300, 9:200, 10:100 }, curBlock:4, //當前移動的圖形名稱 nextBlock:0, GampMap:new Object(), Timer:null, deline:0, Score:0, Deling:false, Start:false, lineNum:10, //刪除幾行了，加級 ScoreNum:40 //消一行加分 }direct 表示 使用鍵盤方位鍵來操作方塊的移動方向；
使用哪種方向鍵按自由喜歡配置，比如字母鍵的A, S, D, W; 或右邊小數字鍵盤的數字鍵各自的鍵盤編碼；
比如 上(旋轉)、下、左、右 方向鍵的編碼分別為：38、40、37、39；
Levels：表示級別配置，本配置共分為10級，每個級別所對應的下落速度，即定時執行間隔；
curBlock：表示當前活動的方塊；
nextBlock：表示接下來執行的方塊索引，并顯示界面右上角的預覽框中；
GampMap：用于保存在根據定義行列數形成的游戲表格中保存每個格的數據信息；
OLSFK.Options.GampMap[x+'_'+y] = 0;
對象表格為: id: "box_"+x+"_"+y;
初始化數據為 ‘0’; 表示該表格還未占用；當有占用時，設置值為 ‘1’；
Timer：為定時執行器；setTimeout 定時執行方塊下落的的頻率；定時時間越小，速度越快；
Deling：當正在執行消行操作時，下次暫不顯示并下落；
lineNum：表示消超過 10 行，加一級；
ScoreNum：表示每消一行所加的分數；
OLSFK.ReItems = function (cur){ //key旋轉點 switch (cur) { case 1: OLSFK.Items[1] = {//長塊 LongBlock 1:{x:4,y:0}, 2:{x:5,y:0}, 3:{x:6,y:0}, 4:{x:7,y:0}, 5:{x:5,y:0} //旋轉點 }; break; //.... } }該方法用于恢復方塊的初始設置;
OLSFK.Next = { //key旋轉點 //長塊 LongBlock 1: { 1:{x:0,y:1}, 2:{x:1,y:1}, 3:{x:2,y:1}, 4:{x:3,y:1} }, //... }為不了不與游戲方塊的設置沖突，獨立出來下次隨機方塊的對象配置；
OLSFK.Items = { //key旋轉點 //長塊 LongBlock 1: { 1:{x:4,y:0}, 2:{x:5,y:0}, 3:{x:6,y:0}, 4:{x:7,y:0}, 5:{x:5,y:0} }, //方塊Box 2: { 1:{x:4,y:0}, 2:{x:5,y:0}, 3:{x:4,y:1}, 4:{x:5,y:1}, 5:{x:0,y:0} }, //凸塊 TuBlock 3: { 1:{x:4,y:1}, 2:{x:5,y:0}, 3:{x:5,y:1}, 4:{x:6,y:1}, 5:{x:5,y:1} }, //L塊 LBlock 4: { 1:{x:5,y:0}, 2:{x:5,y:1}, 3:{x:5,y:2}, 4:{x:6,y:2}, 5:{x:5,y:2} }, 5: { //反向L塊 FLBlock 1:{x:5,y:2}, 2:{x:6,y:2}, 3:{x:6,y:1}, 4:{x:6,y:0}, 5:{x:6,y:2} }, //Z塊 ZBlock 6: { 1:{x:4,y:0}, 2:{x:5,y:0}, 3:{x:5,y:1}, 4:{x:6,y:1}, 5:{x:5,y:0} }, 7: {//反向Z塊 FZBlock 1:{x:4,y:1}, 2:{x:5,y:1}, 3:{x:5,y:0}, 4:{x:6,y:0}, 5:{x:5,y:1} } }方塊共分為：長條塊，方塊，凸塊(T塊)，L塊，反L塊，Z塊，反Z塊幾種；
共7種方塊，以1,2,3,4,5,6,7 索引鍵表示，方塊是四個小塊組成，每塊都有各自的坐標，1-4表示組成該塊的初始坐標位置，5表示旋轉點；
OLSFK.Init = function() { //初始化界面 //... }俄羅斯方塊的界面初始化方法；將在 window.onload 中調用執行；
var w = OLSFK.Options.width; var h = OLSFK.Options.height; var total = w * h; var x=0,y=0; for (var i=0; i<total; i++) { OLSFK.Options.GampMap[x+'_'+y] = 0; Lib.Tag('SPAN',{id:"box_"+x+"_"+y,name:"cbox",style:{ width:OLSFK.Options.boxWidth, height:OLSFK.Options.boxWidth, border:"2px outset #669", background:"#ddd", float:"left", overflow:"hidden" },innerHTML:" ",className:"cssbox"},back); var end = i + 1; x++; if (end >= w && end % w == 0) { x=0; y++; Lib.Tag('DIV',{style:{ clear:"both" }},back); } }通過設置的 Options.width, Options.height 列數與行數，以及設置的小方格寬度，初始化了一個寬：Options.width列，高為 Options.height 的表格界面出來；
Lib.Tag 用于創建標簽對象；
Lib.Tag = function(TAG,json,pnode) { //... }TAG為標簽名，比如: div, span 等;
json為設置標簽樣式 style；
pnode 是該創建所在的父容器；
OLSFK.Init = function() {} 還創建主游戲區域旁邊的下次隨機方塊預覽區，當前級別，及分數，以及操作“開始”，“暫停”按鈕等；
游戲初始入口點
window.onload = function() { if (window.isIE) { document.attachEvent("onkeydown",function(e) { if (OLSFK.Options.Start) { var E = OLSFK.KeyCode(); OLSFK.EventFunc(E); } }); document.attachEvent("onkeyup",function(e) { if (!OLSFK.Options.Move && OLSFK.Options.Start) { OLSFK.Options.Move = true; OLSFK.Options.Eventing = false; OLSFK.Options.Timer = setTimeout(function() { OLSFK.play(); }, OLSFK.Options.Levels[OLSFK.Options.curLevel]); } }); } else { document.addEventListener("keydown",function(e) { if (OLSFK.Options.Start) { var E = OLSFK.KeyCode(); OLSFK.EventFunc(E); } },false); document.addEventListener("keyup",function(e) { if (!OLSFK.Options.Move && OLSFK.Options.Start) { OLSFK.Options.Move = true; OLSFK.Options.Eventing = false; OLSFK.Options.Timer = setTimeout(function() { OLSFK.play(); }, OLSFK.Options.Levels[OLSFK.Options.curLevel]); } },false); } OLSFK.Init(); }主要是監聽鍵盤事件，根據 鍵盤事件 返回的按鈕編碼與 OLSFK.Options.direct 設置方向鍵匹配來操作方塊的移動，旋轉等；
keydown 用于操作下落方塊的移動方向，旋轉等；并重新繪制方塊位置；
keyup 后繼續按本級速度向下落；
OLSFK.Options.Levels[OLSFK.Options.curLevel]
表示當前級別對應的速度，即定時器間隔執行時間(毫秒)；
OLSFK.EventFunc = function(code) { switch (code) { case OLSFK.Options.direct.Left: //LEFT if (!OLSFK.Options.Deling) { clearTimeout(OLSFK.Options.Timer); OLSFK.Options.Eventing = true; OLSFK.Options.Move = false; OLSFK.Left(); } break; //... } }該方法是 監聽 keydown 事件執行的動作；code 為按鍵 編碼；
當判斷未在消行動作時，清除定時器，OLSFK.Options.Eventing 設置為事件中 true，OLSFK.Options.Move 為 false 表示停止移動；
進入 向左移動方法 OLSFK.Left();
OLSFK.Left = function() { var block = OLSFK.Items[OLSFK.Options.curBlock]; if (block) { var flag = true; for (var i=1; i<=4; i++) { var x = block[i].x; var y = block[i].y; if (x-1 < 0) { flag = false; break; } if (OLSFK.Options.GampMap[(x-1)+'_'+y] == 1 && !OLSFK.isMe(x-1,y)) { flag = false; break; } } if (flag) { for (var i=1; i<=4; i++) //清除圖形 { var itm = block[i]; var box = Lib.Getid('box_'+itm.x+'_'+itm.y); box.style.background = '#ddd'; OLSFK.Options.GampMap[itm.x+'_'+itm.y] = 0; } for (var i=1; i<=5; i++) { var x = block[i].x; var y = block[i].y; OLSFK.Items[OLSFK.Options.curBlock][i] = {x:(x-1),y:y}; } OLSFK.draw(); } } }var block = OLSFK.Items[OLSFK.Options.curBlock]; 表示獲取當前移動方塊；
if (OLSFK.Options.GampMap[(x-1)+'_'+y] == 1 && !OLSFK.isMe(x-1,y)) { flag = false; break; }判斷該方塊四個小方塊左邊是否有被占用的方塊，也即: OLSFK.Options.GampMap[(x-1)+'_'+y] 為 1; 并且該位置塊不屬于方塊自己的；
當左邊方向無占用格時，清除當前方塊四個小方塊位置，重新繪制方塊新坐標位置；并重置 相應的 OLSFK.Options.GameMap [x+y] 相應格的值；
當按鈕 keyup 時，繼承正常向下落；
OLSFK.isMe 代碼：
OLSFK.isMe = function(x,y) { var block = OLSFK.Items[OLSFK.Options.curBlock]; if (block) { for (var i=1; i<=4; i++) { if (block[i].x == x && block[i].y == y) { return true; } } } return false; }即指定的 x,y (參數值) 是否還在當前方塊四個坐標內；
OLSFK.Right () 與 Left() 一樣；
旋轉方塊代碼；
OLSFK.Rotate = function() { var block = OLSFK.Items[OLSFK.Options.curBlock]; if (block) { var flag = true; var R = block[5]; for (var i=1; i<=4; i++) { var x = block[i].x; var y = block[i].y; if (R.x == x && R.y == y) { } else { var nson = new Object(); nson.x = R.x + R.y - y; nson.y = R.y - R.x + x; if ( nson.x < 0 || nson.y < 0 || nson.x >= OLSFK.Options.width || nson.y >= OLSFK.Options.height ) { flag = false; break; } if (OLSFK.Options.GampMap[nson.x+'_'+nson.y] == 1 && !OLSFK.isMe(nson.x,nson.y)) { flag = false; break; } } } if (flag) { for (var i=1; i<=4; i++) //清除圖形 { var itm = block[i]; var box = Lib.Getid('box_'+itm.x+'_'+itm.y); box.style.background = '#ddd'; OLSFK.Options.GampMap[itm.x+'_'+itm.y] = 0; } var Pnt = 1; for (var i=1; i<=4; i++) { var x = block[i].x; var y = block[i].y; if (R.x == x && R.y == y) { Pnt = i; } else { var nson = new Object(); nson.x = R.x + R.y - y; nson.y = R.y - R.x + x; OLSFK.Items[OLSFK.Options.curBlock][i] = {x:nson.x,y:nson.y}; } } OLSFK.Items[OLSFK.Options.curBlock][5] = OLSFK.Items[OLSFK.Options.curBlock][Pnt]; OLSFK.draw(); } } }var R = block[5]; 就是獲取旋轉點;
就開始對方塊四個小塊以旋轉點為中心，逆時針旋轉(并不全是 90 度)；當當前塊不為旋轉點時，旋轉公式；
var nson = new Object(); nson.x = R.x + R.y - y; nson.y = R.y - R.x + x;
這個公式要這樣看;
ResultX = RotateX + (RotateY - CurrentY); ResultY = RotateY - (RotateX - CurrentX);//Y的偏移量，就是X的增加值;//反之同
當旋轉四周都無占用物時；清除當前圖形，重繪旋轉后的圖形位置；
重置 OLSFK.Options.GampMap[itm.x+'_'+itm.y] 各個方塊的占用值；
OLSFK.Random = function() { if (OLSFK.Options.nextBlock != 0) { OLSFK.Options.curBlock = OLSFK.Options.nextBlock; var block = OLSFK.Next[OLSFK.Options.nextBlock]; if (block) { for (var i=1; i<=4; i++) { var itm = block[i]; var box = Lib.Getid('cur_'+itm.x+'_'+itm.y); box.style.background = '#ddd'; //OLSFK.Options.GampMap[itm.x+'_'+itm.y] = 0; } } } else { OLSFK.Options.curBlock = Math.floor(Math.random() * 7 + 1); } OLSFK.Options.nextBlock = Math.floor(Math.random() * 7 + 1); OLSFK.drawNext(); }隨機生成下次預下落的方塊；并顯示到右上角的預覽表格里；
OLSFK.play = function(speed) { var block = OLSFK.Items[OLSFK.Options.curBlock]; if (block && OLSFK.Options.Move) { var flag = true; for (var i=1; i<=4; i++) { var x = block[i].x; var y = block[i].y; if (y+1 >= OLSFK.Options.height) { flag = false; break; } if (OLSFK.Options.GampMap[x+'_'+(y+1)] == 1 && !OLSFK.isMe(x,y+1)) { flag = false; break; } } if (flag) { for (var i=1; i<=4; i++) //清除圖形 { var itm = block[i]; var box = Lib.Getid('box_'+itm.x+'_'+itm.y); box.style.background = '#ddd'; OLSFK.Options.GampMap[itm.x+'_'+itm.y] = 0; } for (var i=1; i<=5; i++) { var x = block[i].x; var y = block[i].y; OLSFK.Items[OLSFK.Options.curBlock][i] = {x:x,y:(y+1)}; } OLSFK.draw(); var S = OLSFK.Options.Levels[OLSFK.Options.curLevel]; if (speed) { S = 50; } OLSFK.Options.Timer = setTimeout(function() { OLSFK.play(); }, S); } else { OLSFK.ReItems(OLSFK.Options.curBlock); OLSFK.newRun(); } } }OLSFK.play 正常下落的方法，也得判斷下落一格是否有被占用的格，如果沒有，清除當前方塊，繪制方塊新位置;
當方塊不能再下落時(flag = false)，重置當前方塊坐標配置; OLSFK.ReItems(OLSFK.Options.curBlock);
進入 OLSFK.newRun(); 新下落方塊下落過程準備；
OLSFK.newRun = function() { clearTimeout(OLSFK.Options.Timer); OLSFK.DelFunc(); if (OLSFK.Options.deline >= 10) { OLSFK.Options.deline = 0; OLSFK.Options.curLevel ++; OLSFK.Element.CurLevel.setHTML("級:"+OLSFK.Options.curLevel); } OLSFK.Element.Score.setHTML("分:"+OLSFK.Options.Score); if (OLSFK.Options.curLevel <= OLSFK.Options.lineNum) { OLSFK.Random(); //判斷是否結束 OLSFK.ChkEnd(); } else { OLSFK.Options.Move = false; OLSFK.Options.Start = false; OLSFK.Options.Eventing = false; OLSFK.Options.Deling = false; Lib.Getid('spn').innerHTML = 'Game Is Over! You Win the Game!'; Lib.Getid('dobtn').innerHTML = ' 開始 '; } }當下落結束時，清除定時器，暫停新方塊下落，檢測是否有可消除的行；減了多少行；
每減去一行 加分 OLSFK.Options.Score += OLSFK.Options.ScoreNum;
這個方法在 :
OLSFK.DelFunc = function() { OLSFK.Options.Deling = true; OLSFK.Options.Move = false; OLSFK.Options.Eventing = false; var Fn = 0; for (var i=OLSFK.Options.height-1; i>=0; i--) { Fn = 0; for (var j=0; j<OLSFK.Options.width; j++) { if (OLSFK.Options.GampMap[j+'_'+i] == 1) { Fn++; } } if (Fn == OLSFK.Options.width) { OLSFK.Options.deline ++; OLSFK.Options.Score += OLSFK.Options.ScoreNum; OLSFK.DelLine(i); i++; } } OLSFK.Options.Deling = false; OLSFK.Options.Move = true; OLSFK.Options.Eventing = true; }中執行；
減完一行，就重置該行以上所有行往下降一行；并重置 :
OLSFK.Options.GampMap[x+'_'+y] = OLSFK.Options.GampMap[x+'_'+(y-1)];
該減行為上行的數據；
if (Fn == OLSFK.Options.width) { OLSFK.Options.deline ++; OLSFK.Options.Score += OLSFK.Options.ScoreNum; OLSFK.DelLine(i); i++; }該判斷表示該行上所有格都被占用到；
回到 newRun 上，當判斷消行超過幾行時，即加級；
if (OLSFK.Options.curLevel <= OLSFK.Options.lineNum)
{
OLSFK.Random();//判斷是否結束 OLSFK.ChkEnd();
}如果級數小于配置的總級數，則進入 OLSFK.random();
設置當前下落方塊，并隨機生成下次下落方塊并預覽右上角表格上；
OLSFK.ChkEnd = function() { var block = OLSFK.Items[OLSFK.Options.curBlock]; if (block && OLSFK.Options.Move) { var flag = true; for (var i=1; i<=4; i++) { var x = block[i].x; var y = block[i].y; if (OLSFK.Options.GampMap[x+'_'+y] == 1) { flag = false; break; } } } if (flag ) { OLSFK.draw(); //定時往下掉 OLSFK.Options.Timer = setTimeout(function() { OLSFK.play(); }, OLSFK.Options.Levels[OLSFK.Options.curLevel]); } else { OLSFK.Options.Move = false; OLSFK.Options.Start = false; OLSFK.Options.Eventing = false; OLSFK.Options.Deling = false; Lib.Getid('spn').innerHTML = 'Game Is Over'; Lib.Getid('dobtn').innerHTML = ' 開始 '; } }當當前下落的方塊進入表格上有被占用的格子，即被卡住，游戲結束;
反之 則 setTimeout 開始新方塊的下落動作；
其他方法說明
OLSFK.Event = function() { if (window.isIE) return window.event; func = OLSFK.Event.caller; while(func!=null) { var arg0=func.arguments[0]; if(arg0) { return arg0; } func=func.caller; } return null; } OLSFK.KeyCode = function() { return OLSFK.Event().keyCode || OLSFK.Event().which; }OLSFK.Event = function();
這是一種獲取當前事件的方法，可以比較兼容獲取當前的事件；
俄羅斯方塊 JavaScript 代碼
http://files.cnblogs.com/editor/OLSFK.rar
到此，關于“怎么用Javascript實現俄羅斯方塊游戲”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
