JS 俄羅斯方塊完美注釋版代碼

2019-11-21 01:33:13

字體：大中小

來源：轉載

供稿：網友

<html> <head> <title>R</title> <style> #board tr td{ width: 20px; height: 20px; } </style> </head> <script language="javascript"> /** * JS俄羅斯方塊完美注釋版 v 1.01 * 從學c語言那一會兒都想寫一個俄羅斯方塊,可是每次動起手總覺得難度太大. * 今天終于用了大約4個小時寫出來了. 其中在涉及到方塊變型的時候還咨詢了 * 同學來幫忙; * * 個人覺得難點有這么幾個: * 1: 邊界檢查, 不多說, 想通了就行 * 2: 旋轉, 還是數學上的方法, 一個點相對另外一個點旋轉90度的問題. * 4: 讓整個程序在點開始之后, 怎么讓它一直自動的運行下去. 我以前一直沒有做完, * 主要是因為沒有想清楚到底要用一個什么機制讓游戲自動運行下去, * 這個過程可以這么理解: * 用戶點開始->構造一個活動圖形, 設置定時器, * 每次向下移動后, 都檢查是否觸底, 如果觸底了, 則嘗試消行, * 完了之后再構造一個活動圖形, 再設置定時器. */ //表示頁面中的table, 這個table就是將要顯示游戲的主面板 var tbl; //游戲狀態 0: 未開始;1 運行; 2 中止; var status = 0; //定時器, 定時器內將做moveDown操作 var timer; //分數 var score = 0; //board是一個18*10的數組,也和頁面的table對應. //用來標注那些方格已經被占據. 初始時都為0, 如果被占據則為1 var board = new Array(18); for(var i=0;i<18;i++){ board[i] = new Array(10); } for(var i=0;i<18;i++){ for(var j=0; j<10; j++){ board[i][j] = 0; } } //當前活動的方塊, 它可以左右下移動, 變型.當它觸底后, 將會更新board; var activeBlock; //生產方塊形狀, 有7種基本形狀. function generateBlock(){ activeBlock = null; activeBlock = new Array(4); //generate a random int number between 0-6; var t = (Math.floor(Math.random()*20)+1)%7; switch(t){ case 0:{ activeBlock[0] = {x:0, y:4}; activeBlock[1] = {x:1, y:4}; activeBlock[2] = {x:0, y:5}; activeBlock[3] = {x:1, y:5}; break; } case 1:{ activeBlock[0] = {x:0, y:3}; activeBlock[1] = {x:0, y:4}; activeBlock[2] = {x:0, y:5}; activeBlock[3] = {x:0, y:6}; break; } case 2:{ activeBlock[0] = {x:0, y:5}; activeBlock[1] = {x:1, y:4}; activeBlock[2] = {x:1, y:5}; activeBlock[3] = {x:2, y:4}; break; } case 3:{ activeBlock[0] = {x:0, y:4}; activeBlock[1] = {x:1, y:4}; activeBlock[2] = {x:1, y:5}; activeBlock[3] = {x:2, y:5}; break; } case 4:{ activeBlock[0] = {x:0, y:4}; activeBlock[1] = {x:1, y:4}; activeBlock[2] = {x:1, y:5}; activeBlock[3] = {x:1, y:6}; break; } case 5:{ activeBlock[0] = {x:0, y:4}; activeBlock[1] = {x:1, y:4}; activeBlock[2] = {x:2, y:4}; activeBlock[3] = {x:2, y:5}; break; } case 6:{ activeBlock[0] = {x:0, y:5}; activeBlock[1] = {x:1, y:4}; activeBlock[2] = {x:1, y:5}; activeBlock[3] = {x:1, y:6}; break; } } //檢查剛生產的四個小方格是否可以放在初始化的位置. for(var i=0; i<4; i++){ if(!isCellValid(activeBlock[i].x, activeBlock[i].y)){ return false; } } return true; } //向下移動 function moveDown(){ //檢查底邊界. if(checkBottomBorder()){ //沒有觸底, 則擦除當前圖形, erase(); //更新當前圖形坐標 for(var i=0; i<4; i++){ activeBlock[i].x = activeBlock[i].x + 1; } //重畫當前圖形 paint(); } //觸底, else{ //停止當前的定時器, 也就是停止自動向下移動. clearInterval(timer); //更新board數組. updateBoard(); //消行 var lines = deleteLine(); //如果有消行, 則 if(lines!=0){ //更新分數 score = score + lines*10; updateScore(); //擦除整個面板 eraseBoard(); //重繪面板 paintBoard(); } //產生一個新圖形并判斷是否可以放在最初的位置. if(!generateBlock()){ alert("Game over!"); status = 2; return; } paint(); //定時器, 每隔一秒執行一次moveDown timer = setInterval(moveDown,1000) } } //左移動 function moveLeft(){ if(checkLeftBorder()){ erase(); for(var i=0; i<4; i++){ activeBlock[i].y = activeBlock[i].y - 1; } paint(); } } //右移動 function moveRight(){ if(checkRightBorder()){ erase(); for(var i=0; i<4; i++){ activeBlock[i].y = activeBlock[i].y + 1; } paint(); } } //旋轉, 因為旋轉之后可能會有方格覆蓋已有的方格. //先用一個tmpBlock,把activeBlock的內容都拷貝到tmpBlock, //對tmpBlock嘗試旋轉, 如果旋轉后檢測發現沒有方格產生沖突,則 //把旋轉后的tmpBlock的值給activeBlock. function rotate(){ var tmpBlock = new Array(4); for(var i=0; i<4; i++){ tmpBlock[i] = {x:0, y:0}; } for(var i=0; i<4; i++){ tmpBlock[i].x = activeBlock[i].x; tmpBlock[i].y = activeBlock[i].y; } //先算四個點的中心點，則這四個點圍繞中心旋轉90度。 var cx = Math.round((tmpBlock[0].x + tmpBlock[1].x + tmpBlock[2].x + tmpBlock[3].x)/4); var cy = Math.round((tmpBlock[0].y + tmpBlock[1].y + tmpBlock[2].y + tmpBlock[3].y)/4); //旋轉的主要算法. 可以這樣分解來理解。 //先假設圍繞源點旋轉。然后再加上中心點的坐標。 for(var i=0; i<4; i++){ tmpBlock[i].x = cx+cy-activeBlock[i].y; tmpBlock[i].y = cy-cx+activeBlock[i].x; } //檢查旋轉后方格是否合法. for(var i=0; i<4; i++){ if(!isCellValid(tmpBlock[i].x,tmpBlock[i].y)){ return; } } //如果合法, 擦除 erase(); //對activeBlock重新賦值. for(var i=0; i<4; i++){ activeBlock[i].x = tmpBlock[i].x; activeBlock[i].y = tmpBlock[i].y; } //重畫. paint(); } //檢查左邊界,嘗試著朝左邊移動一個,看是否合法. function checkLeftBorder(){ for(var i=0; i<activeBlock.length; i++){ if(activeBlock[i].y==0){ return false; } if(!isCellValid(activeBlock[i].x, activeBlock[i].y-1)){ return false; } } return true; } //檢查右邊界,嘗試著朝右邊移動一個,看是否合法. function checkRightBorder(){ for(var i=0; i<activeBlock.length; i++){ if(activeBlock[i].y==9){ return false; } if(!isCellValid(activeBlock[i].x, activeBlock[i].y+1)){ return false; } } return true; } //檢查底邊界,嘗試著朝下邊移動一個,看是否合法. function checkBottomBorder(){ for(var i=0; i<activeBlock.length; i++){ if(activeBlock[i].x==17){ return false; } if(!isCellValid(activeBlock[i].x+1, activeBlock[i].y)){ return false; } } return true; } //檢查坐標為(x,y)的是否在board種已經存在, 存在說明這個方格不合法. function isCellValid(x, y){ if(x>17||x<0||y>9||y<0){ return false; } if(board[x][y]==1){ return false; } return true; } //擦除 function erase(){ for(var i=0; i<4; i++){ tbl.rows[activeBlock[i].x].cells[activeBlock[i].y].style.backgroundColor="white"; } } //繪活動圖形 function paint(){ for(var i=0; i<4; i++){ tbl.rows[activeBlock[i].x].cells[activeBlock[i].y].style.backgroundColor="red"; } } //更新board數組 function updateBoard(){ for(var i=0; i<4; i++){ board[activeBlock[i].x][activeBlock[i].y]=1; } } //消行 function deleteLine(){ var lines = 0; for(var i=0; i<18; i++){ var j=0; for(; j<10; j++){ if(board[i][j]==0){ break; } } if(j==10){ lines++; if(i!=0){ for(var k=i-1; k>=0; k--){ board[k+1] = board[k]; } } board[0] = generateBlankLine(); } } return lines; } //擦除整個面板 function eraseBoard(){ for(var i=0; i<18; i++){ for(var j=0; j<10; j++){ tbl.rows[i].cells[j].style.backgroundColor = "white"; } } } //重繪整個面板 function paintBoard(){ for(var i=0;i<18;i++){ for(var j=0; j<10; j++){ if(board[i][j]==1){ tbl.rows[i].cells[j].style.backgroundColor = "red"; } } } } //產生一個空白行. function generateBlankLine(){ var line = new Array(10); for(var i=0; i<10; i++){ line[i] = 0; } return line; } //更新分數 function updateScore(){ document.getElementById("score").innerText=" " + score; } //鍵盤控制 function keyControl(){ if(status!=1){ return; } var code = event.keyCode; switch(code){ case 37:{ moveLeft(); break; } case 38:{ rotate(); break; } case 39:{ moveRight(); break; } case 40:{ moveDown(); break; } } } //開始 function begin(e){ e.disabled = true; status = 1; tbl = document.getElementById("board"); if(!generateBlock()){ alert("Game over!"); status = 2; return; } paint(); timer = setInterval(moveDown,1000); } document.onkeydown=keyControl; </script> <body> <Input type="button" value="begin" onclick="begin(this);"/> Score: <span id="score"> 0</span> <table id="board" cellspacing=0 cellpadding=0 border=1 style="border-collapse:collapse;"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：JavaScript在IE中“意外地調用了方法或屬性訪問”

下一篇：$.ajax json數據傳遞方法