文章詳情頁

原生js實(shí)現(xiàn)俄羅斯方塊

瀏覽：136日期：2024-04-15 09:38:08

本文實(shí)例為大家分享了js實(shí)現(xiàn)俄羅斯方塊的具體代碼，供大家參考，具體內(nèi)容如下

效果如下

html

<!DOCTYPE html><html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <link rel='stylesheet' href='http://m.propowerdrill.cn/css/Demo.css' > <title>俄羅斯方塊</title></head> <body> <div id='local'> <div class='title'><h2>我方游戲區(qū)域</h2></div> <div id='local_game'> </div> <div id='local_tip'> </div> <div id='local_next'> </div> <div class='info'> <div>用時<span id='local_time'>  0</span></div> <div>得分<span class='score'>  0</span></div> </div> </div> <div id='remote'> <div class='title'><h2>對方游戲區(qū)域</h2></div> <div id='remote_game'> </div> <div id='remote_tip'> </div> <div id='remote_next'> </div> <div class='info'> <div>用時<span id='remote_time'>  0</span></div> <div>得分<span class='score'>  0</span></div> <div class='btn'> <button id='down'>down</button> <button id='left'>left</button> <button id='right'>right</button> <button id='rotate'>rotate</button> <button id='fall'>fall</button> <button id='fixed'>fixed</button> <button id='performNext'>performNext</button> <button id='checkClear'>checkClear</button> <button id='gameover'>gameover</button> <button id='settime'>settime</button> <button id='addscore'>addscore</button> <button id='gamestate'>gamestate</button> <button id='addTaiLines'>addTaiLines</button> </div> </div> </div></body><script src='http://m.propowerdrill.cn/js/square.js'></script><script src='http://m.propowerdrill.cn/js/squareFactory.js'></script><script src='http://m.propowerdrill.cn/js/game.js'></script><script src='http://m.propowerdrill.cn/js/local.js'></script><script src='http://m.propowerdrill.cn/js/remote.js'></script><script type='text/javascript' src='http://m.propowerdrill.cn/js/Demo.js'></script> </html>

css

.square{ width: 400px; height: 500px; position: absolute; border: solid 1px red;}.title{ width: 400px; text-align: center; margin: 0 auto;}.game{ width: 200px;height: 400px; border-bottom: 1px solid blue; border-right: 1px solid blue; border-left: 1px solid blue; position: absolute; background-color: #f2faff; top: 70px; left: 10px;}.next{ width: 80px;height: 80px; position: absolute;top: 70px;left: 250px; border: solid 0px red;}.info{ position: absolute;top: 170px;left: 250px; border: solid 0px red} .none,.current,.done{ width: 20px;height: 20px; position: absolute; box-sizing: border-box;} .tip{ width: 100px; position: absolute; top: 270px; left: 250px; font-size: 20px; color:red; border: solid 0px red;} .score{ color:green;}/* 消失的方塊 */.none{ background-color: #414141; border: solid 1px white} /* 正在操作的方塊 */.current{ background-color: pink; border:solid 1px red;} /* 落下的方塊 */.done{ background:#d2f028; border:solid 1px black} #remote{ left: 500px;} .btn{ width: 70px; border: solid 0px red}

Demo.js

var local = new local();local.start(); var remote = new Remote();remote.start(2,2);remote.bindEvents();

game.js

//核心邏輯 2var Game = function(){ //這兩個div為游戲中的兩個最大的容器盒子 dom元素 var gameDiv; var nextDiv; var timeDiv; var scoreDiv; var local_tipDiv; //游戲界面框中的方塊坐標(biāo) var gameData=[ [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0], ] //裝載所有的div的容器數(shù)組 //next中的div var nextDivs = []; //游戲框中的div var gameDivs = []; //定義兩個方塊 //當(dāng)前方塊 var cur; //下一個方塊 var next; //渲染游戲框中的div /** * * @param {*} container 最大容器也就是這個div要被添加到容器 * @param {*} data div的矩陣數(shù)據(jù) * @param {*} divs 用于裝載所有的div */ var initDiv = function(container,data,divs){ for(var i=0;i<data.length;i++){ var DIV = []; for(var j=0;j<data[i].length;j++){ var div = document.createElement('div'); div.classList.add(’none’); div.style.top=i*20+'px'; div.style.left=j*20+'px'; container.appendChild(div); DIV.push(div); } divs.push(DIV) } }; //刷新游戲界面的div 和提示下一個的div /** * * @param {*} data div的矩陣數(shù)據(jù) * @param {*} divs 裝載div的容器 */ var refresh = function(data,divs){ for(var i = 0;i<data.length;i++){ for(var j=0;j<data[i].length;j++){ if(data[i][j]==0){ divs[i][j].className = 'none' } else if(data[i][j]==1){ divs[i][j].className = 'done' } else if(data[i][j]==2){ divs[i][j].className = 'current' } } } } ; //初始化方法 var init = function(doms,type,dir){ gameDiv = doms.gameDiv;//游戲區(qū)域的大div nextDiv = doms.nextDiv;//提示區(qū)域的大div timeDiv = doms.timeDiv;//顯示時間的div scoreDiv = doms.scoreDiv;//顯示分?jǐn)?shù)的dom local_tipDiv = doms.local_tip;//顯示游戲狀態(tài) //這里返回的是七種方塊的其中一種這些方塊都繼承square對象的成員 next = squareFactory.prototype.make(type,dir); initDiv(gameDiv,gameData,gameDivs); initDiv(nextDiv,next.data,nextDivs); refresh(next.data,nextDivs); //console.log(gameData) }; //下移 this.down = function(){ //這里是將isValue方法傳入到canDown中里canDown中判斷下落的點(diǎn)是否合法 if(cur.canDown(isValue)){ //移動組合方塊之前先清除數(shù)據(jù) 在重新添加 clearGameData(); //這里x加一那么組合方塊的初始下標(biāo)位置變化加一如從第十行開始那么變化變成 //第十一行 cur.onDown(); //這里x軸控制的上下 y控制的是左右 setData(); refresh(gameData,gameDivs); //console.log(gameData); return true; }else{ return false; } //這里我們需要注意若next提示框中的組合方塊四周都有空位時我們就算不清除 //它也能正常移動這是因?yàn)楹髞矸綁K會替換現(xiàn)有的空位而現(xiàn)有的空位便會 //向下移動 //0 1 1 0 //0 0 0 0 //例如我們?nèi)粝蛴壹右坏脑?那么它便會變成這樣 //0 0 1 1 這是因?yàn)樗緛砬懊嬗袀€空位所以加1后后來的空位便會替換 //原本1的位置而原本1的位置由于加1了所以也會整體向右移動 }; //左 this.left = function(){ if(cur.canLeft(isValue)){ clearGameData(); cur.onLeft(); setData(); refresh(gameData,gameDivs) //console.log(gameData) } }; //右 this.right = function(){ if(cur.canRight(isValue)){ clearGameData(); cur.onRight(); setData(); refresh(gameData,gameDivs) //console.log(gameData) } }; //上 this.up = function(){ if(cur.canRotate(isValue)){ cur.onrotate(); setData(); refresh(gameData,gameDivs) } }; //直接墜落 //在內(nèi)部調(diào)用自己用this引用的方法時也要加上this this.fall = function(){ while( this.down() ); }; //清除方塊 var clearGameData = function(){ for(var i=0;i<cur.data.length;i++){ for(var j=0;j<cur.data[i].length;j++){ if(check(cur.origin,i,j)) gameData[cur.origin.x+i][cur.origin.y+j] = 0 } } }; //用于設(shè)置當(dāng)前組合方塊的位置變化 var setData = function(){ //外循環(huán)四次 for(var i=0;i<cur.data.length;i++){ //內(nèi)循環(huán)四次 for(var j=0;j<cur.data[i].length;j++){ //將 square中的data矩陣的值賦給插入到gameData矩陣中的指定位置 //例如這里x為10 那么一級數(shù)組的開始位置下標(biāo)就是 10+0 //二級數(shù)組中的開始下標(biāo)就是5+0 //也就是data[10+0][5+0] //第二次就是 data[10+1][5+1] 以此類推 //這里注意一級數(shù)組控制的是上下二級數(shù)組控制的是左右 //也就是說 x軸是上下 y軸是左右 if(check(cur.origin,i,j)) gameData[cur.origin.x+i][cur.origin.y+j] = cur.data[i][j] } } }; //底部增加行this.addTaiLines = function(lines){ //lines為底部增加的行例如line為2 //將所有的方塊往上移動兩行 // i=0;i<20 - 2;i++ // gamedata[0] = gamedata[0+2] 例如從0開始第一行就變成了第三行 // gamedata[1] = gamedata[1+2] 第二行就變成了第四行 // gamedata[2] = gamedata[2+2] 第三行就變成了第五行 /** * 0 0 0 0 0 0 0 0 0 0 * 2 2 2 2 2 2 2 2 2 2 * 2 2 2 2 2 2 2 2 2 2 * 2 2 2 2 2 2 2 2 2 2 */ for(var i=0;i<gameData.length-lines.length;i++){ gameData[i] = gameData[i+lines.length]; } //再把所有底部增加的內(nèi)容顯示出來 //i=0 i<2 i++ //gamedata[20-2+0](18) = lines[0] //gamedata[20-2+1](19) = lines[1] for(var i=0;i<lines.length;i++){ gameData[gameData.length-lines.length+i] = lines[i]; } cur.origin.x-=lines.length; if(cur.origin.x<0){ cur.origin.x = 0; } refresh(gameData,gameDivs);} //設(shè)置時間顯示this.setTime = function(times){ timeDiv.innerText = '--'+times+'s';} this.gameState = function(win){ if(win){ local_tipDiv.innerText = '你贏了' }else{ local_tipDiv.innerText = '你輸了' }} //產(chǎn)生下一個方塊this.performNext = function(type,dir){ //首先先將下一個方塊賦值給當(dāng)前操作的方塊 cur = next; //然后重新設(shè)置當(dāng)前游戲區(qū)域的方塊 setData(); //在顯示提示下一個方塊 next = squareFactory.prototype.make(type,dir); //然后刷新游戲區(qū)和提示區(qū) refresh(gameData,gameDivs) refresh(next.data,nextDivs);} //消行var Fraction = 0;this.checkclear = function(){ Fraction = 0; //從最后一行開始判斷是否全部為1 若為1 則表示那一行以及全部鋪滿 //否則clear為false 并跳出當(dāng)前循環(huán) 例如第一次若19行沒有鋪滿則跳出循環(huán) for(var i=gameData.length-1;i>=0;i-=1){ var clear = true; for(var j=0;j<gameData[0].length;j+=1){ //gamedata[19][0]!=1 //or //gamedata[19][1]!=1 .... if(gameData[i][j]!=1){ clear = false; break; } } //若clear為true 說明這一行全部鋪滿 if(clear){ Fraction += 1; //例如 m=19;m>0;m-- for(var m = i;m>0;m--){ //n=0;n<10;n++ 注 gamedata為20 其中每一個數(shù)組的長度為10 for(var n=0;n<gameData[0].length;n++){ //例如外循環(huán)第一次 //gamendata[19][0] = gamedata[19-1][0]; //gamendata[19][1] = gamedata[19-1][1]; .... // 外循環(huán)第二次 //gamendata[18][0] = gamedata[18-1][0]; //gamendata[18][1] = gamedata[18-1][1]; .... gameData[m][n] = gameData[m-1][n]; //將上一行的內(nèi)容移動到下一行 } } //n=0;n<10;n++ for(var n=0;n<gameData[0].length;n++){ //gamedata[0][0] = 0 //gamedata[0][1] = 0 //gamedata[0][2] = 0 .... gameData[0][n] = 0; } //i++的作用是讓最下面一行被清除后比如 19行鋪滿我們便將18行往下移動一個行 //然后在重新判斷當(dāng)前移動后的18行(也就是19行)是否鋪滿 //因?yàn)槊看窝h(huán)完成后 i都會-1 如果底層沒有鋪滿我們便正常循環(huán) 如果底層鋪滿 //我們便重頭開始檢測 console.log('當(dāng)前i',i) i++; } } addscore(Fraction)} var score = 0;var addscore = function(scoreCount){ switch(scoreCount){ case 1: score +=10; break; case 2: score +=30; break; case 3: score +=50; break; case 4: score +=100; break; } scoreDiv.innerText = '--'+score;} //游戲結(jié)束this.gameover = function(){ var over = false; for(var i=0;i<gameData[0].length;i++){ if(gameData[1][i]==1){//若第二行以及有落下的方塊那么游戲便結(jié)束 over = true; } } return over;} /** * * @param {*} pos 等于當(dāng)前方塊的x 和 y的原點(diǎn) * @param {*} x 等于當(dāng)前方塊的上下位置的變化值 * @param {*} y 左右位置的變化值 */ //判斷當(dāng)前是否可以移動 var check = function(pos,x,y){ if(pos.x+x < 0){return false} else if(pos.x+x >= gameData.length){return false} else if(pos.y+y < 0){return false} else if(pos.y+y >= gameData[0].length){return false} //這里是判斷如果我們落下的這個位置已經(jīng)有一個方塊的話那也不合法 //若這個方塊已經(jīng)落下我們便判定它的矩陣數(shù)據(jù)為1 else if(gameData[pos.x+x][pos.y+y]==1){return false} else{return true} }; /* 10 + 0 > length ? 10 + 1 > length ? 0 0 1 0 0 5 + 1 > length ? 1 0 1 0 0 2 0 1 1 0 3 0 0 0 0 0 1 2 3 */ //讓當(dāng)前方塊變得不可移動this.fixed = function(){ for(var i=0;i<cur.data.length;i++){//0 1 2 3 for(var j=0;j<cur.data[0].length;j++){//0 1 2 3 if(check(cur.origin,i,j)){ //若當(dāng)前方塊的值是 2 也就是說還處于操作狀態(tài)的話 //我們便將它賦值為 1 因?yàn)?等于操作中的方塊 1等于以及落下的方塊 //而以及落下的方塊是不可以移動這個判斷是寫在check方法中的 if(gameData[cur.origin.x+i][cur.origin.y+j]==2){ gameData[cur.origin.x+i][cur.origin.y+j] = 1; } } } } refresh(gameData,gameDivs);} //檢測當(dāng)前next中的矩陣數(shù)據(jù)是否合法 /** * * @param {*} pos 當(dāng)前方塊的原點(diǎn) * @param {*} nextdata next中方塊矩陣 */ var isValue = function(pos,nextdata){ for(var i = 0;i<nextdata.length;i++){ for(var j=0;j<nextdata[0].length;j++){ //判斷當(dāng)前next的矩陣數(shù)據(jù)中的每一個位置是否等于0 //若不等于0則判斷當(dāng)前的點(diǎn)是否還能繼續(xù)下降 if(nextdata[i][j]!==0){ //若不能則直接返回false if(!check(pos,i,j))return false; } } } //若都沒有問題則返回true return true; } //將這個init導(dǎo)出因?yàn)檫@里這個init是一個私有的方法 this.init = init; this.addscore = addscore;};

local.js

//我的游戲區(qū)域 1var local = function(){ // 先聲明游戲?qū)ο?var game; //定義定時器時間間隔 var INTERVAL = 500; //定義定時器 var time = null; //計算時間 var timeCount = 0; var times = 0; //定義一個start開始方法 this.start = function(){ //獲取游戲中兩個界面的dom元素 var dom = { gameDiv:document.querySelector('#local_game'), nextDiv:document.querySelector('#local_next'), timeDiv:document.querySelector('#local_time'), scoreDiv:document.querySelector('#local_score'), local_tip:document.querySelector('#local_tip') }; //實(shí)例化Game; game = new Game(); //并將dom傳入到Game的初始化方法中 game.init(dom,generateType(),generateDir()); //產(chǎn)生初始方塊 game.performNext(generateType(),generateDir()); bindKeyEvent(); //游戲開始時定義一個定時器讓方塊自動下移 time = setInterval(move,INTERVAL); }; function move(){ //時間計數(shù) timeFunc(); if(!game.down()){ game.fixed(); //判斷是否消行 game.checkclear(); //判斷是否結(jié)束游戲 if(game.gameover()){ stop(); game.gameState(false); }else{ //當(dāng)當(dāng)前方塊已經(jīng)落到底部后我們便產(chǎn)生下一個方塊 game.performNext(generateType(),generateDir()) } } } var timeFunc = function(){ //計算秒數(shù) 因?yàn)槊窟^500毫秒會調(diào)用一次 timeCount+=1; if(timeCount==2){ timeCount = 0; times += 1; //設(shè)置顯示時間 game.setTime(times); } if(times%5==0){ // game.addTaiLines(generrateBottomLine(1)); } } //隨機(jī)生成干擾行 /** * * @param {*} linenum 生成干擾行的行數(shù) */ var generrateBottomLine = function(linenum){ //定義一個二維數(shù)組 var lines = []; for(var i=0;i<linenum;i++){ //二維數(shù)組中的一維數(shù)組 var line = []; for(var j=0;j<10;j++){ //隨機(jī)生成0-2的數(shù) line.push(Math.ceil(Math.random()*2)-1); } lines.push(line); } return lines; } //產(chǎn)生一個隨機(jī)數(shù) 代表著方塊的種類 function generateType(){ //產(chǎn)生0-6的整數(shù) return Math.ceil(Math.random()*7)-1 } //產(chǎn)生一個隨機(jī)數(shù) 代表方塊旋轉(zhuǎn)的方向 function generateDir(){ //產(chǎn)生0-6的整數(shù) return Math.ceil(Math.random()*4)-1 } //游戲結(jié)束 function stop(){ if(time){ clearInterval(time) time = null; } document.onkeydown = null; } //聲明鍵盤事件 var bindKeyEvent = function(){ document.onkeydown = function(e){ switch(e.keyCode){ case 38: //up game.up(); break; case 39: //right game.right(); break; case 40: //down game.down(); break; case 37: //left game.left(); break; case 32: //space game.fall(); break; } } } }

remote.js

//對方游戲區(qū)域//這個js主要為對方的操作意識var Remote = function(){ //游戲?qū)ο?var game; //開始決定方塊類型和旋轉(zhuǎn)方向 var start = function(type,dir){ //獲取游戲中兩個界面的dom元素 var dom = { gameDiv:document.querySelector('#remote_game'), nextDiv:document.querySelector('#remote_next'), timeDiv:document.querySelector('#remote_time'), scoreDiv:document.querySelector('#remote_score'), local_tip:document.querySelector('#remote_tip') }; //實(shí)例化Game; game = new Game(); //并將dom傳入到Game的初始化方法中 game.init(dom,type,dir); }; //綁定事件 var bindEvents = function(){ document.querySelector('#left').onclick = function(){ game.left(); } document.querySelector('#right').onclick = function(){ game.right(); } document.querySelector('#down').onclick = function(){ game.down(); } document.querySelector('#rotate').onclick = function(){ game.up(); } document.querySelector('#fall').onclick = function(){ game.fall(); } document.querySelector('#fixed').onclick = function(){ game.fixed(); } document.querySelector('#performNext').onclick = function(){ game.performNext(2,2); } document.querySelector('#checkClear').onclick = function(){ game.checkclear(); } document.querySelector('#gameover').onclick = function(){ game.gameover(); } document.querySelector('#settime').onclick = function(){ game.setTime(20); } document.querySelector('#addscore').onclick = function(){ game.addscore(3); } document.querySelector('#gamestate').onclick = function(){ game.gameState(true); } document.querySelector('#addTaiLines').onclick = function(){ game.addTaiLines([[1,0,0,1,0,1,0,1,1,1]]); } } //導(dǎo)出方法 this.start = start; this.bindEvents = bindEvents;}

square.js

//所有的方塊的公共邏輯 3var square = function(){ //方塊提示框中的方塊數(shù)據(jù) this.data = [ [0,0,0,0], [0,0,0,0], [0,0,0,0], [0,0,0,0] ]; this.dir = 0; //方塊坐標(biāo)原點(diǎn) this.origin={ x:0, y:0 }}; //檢測當(dāng)前矩陣數(shù)據(jù)中的方塊位置能否下降square.prototype.canDown=function(isvalue){ var test = {}; //console.log(this.origin.x,this.origin.x + 1); //這里要加1的原因是因?yàn)?這個方法是在我們還沒有執(zhí)行到加1程序之前調(diào)用的 //所以我們需要手動給它去加1 test.x = this.origin.x + 1; test.y = this.origin.y; return isvalue(test,this.data);}; square.prototype.canLeft=function(isvalue){ var test = {}; test.x = this.origin.x; test.y = this.origin.y - 1; return isvalue(test,this.data);}; square.prototype.canRight=function(isvalue){ var test = {}; test.x = this.origin.x; test.y = this.origin.y + 1; return isvalue(test,this.data);}; //下落方法這個方法我們放到原型對象上因?yàn)橄侣浞椒ㄊ侵饕姆椒╯quare.prototype.onDown = function(){ this.origin.x += 1;}; square.prototype.onLeft = function(){ this.origin.y -= 1;}; square.prototype.onRight = function(){ this.origin.y += 1;}; //下面是旋轉(zhuǎn)的功能square.prototype.canRotate = function(isvalue){ var testdir = (this.dir + 1)%4;//因?yàn)槭窃谛D(zhuǎn)指向前進(jìn)行的判斷所以我們先加1 var testrotate = [ [0,0,0,0], [0,0,0,0], [0,0,0,0], [0,0,0,0] ]; for(var i=0;i<this.data.length;i++){ for(var j=0;j<this.data[i].length;j++){ testrotate[i][j] = this.rotate[testdir][i][j] } } return isvalue(this.origin,testrotate);}; square.prototype.onrotate = function(num){ num = num|1; this.dir = (this.dir+num)%4;//因?yàn)槭窃谛D(zhuǎn)指向前進(jìn)行的判斷所以我們先加1 for(var i=0;i<this.data.length;i++){ for(var j=0;j<this.data[i].length;j++){ this.data[i][j] = this.rotate[this.dir][i][j] } }};

squareFactory.js

//工廠用于生成不同的方塊//所有的方塊的公共邏輯 3var square1 = function(){ //這樣寫當(dāng)我們實(shí)例化square1的時候 square中this引用的成員將會添加到square1上 square.call(this); //四個不同的旋轉(zhuǎn)方向默認(rèn)是0 也就是第一個 this.rotate = [ [ [0,2,0,0], [0,2,0,0], [0,2,2,0], [0,0,0,0] ], [ [0,0,0,0], [2,2,2,0], [2,0,0,0], [0,0,0,0] ], [ [2,2,0,0], [0,2,0,0], [0,2,0,0], [0,0,0,0] ], [ [0,0,2,0], [2,2,2,0], [0,0,0,0], [0,0,0,0] ] ];};square1.prototype = square.prototype;//打通原型鏈 var square2 = function(){ //這樣寫當(dāng)我們實(shí)例化square1的時候 square中this引用的成員將會添加到square1上 square.call(this); //四個不同的旋轉(zhuǎn)方向默認(rèn)是0 也就是第一個 this.rotate = [ [ [0,2,0,0], [0,2,0,0], [0,2,0,0], [0,2,0,0] ], [ [0,0,0,0], [2,2,2,2], [0,0,0,0], [0,0,0,0] ], [ [0,2,0,0], [0,2,0,0], [0,2,0,0], [0,2,0,0] ], [ [0,0,0,0], [2,2,2,2], [0,0,0,0], [0,0,0,0] ] ];};square2.prototype = square.prototype; var square3 = function(){ //這樣寫當(dāng)我們實(shí)例化square1的時候 square中this引用的成員將會添加到square1上 square.call(this); //四個不同的旋轉(zhuǎn)方向默認(rèn)是0 也就是第一個 this.rotate = [ [ [0,2,0,0], [2,2,2,0], [0,0,0,0], [0,0,0,0] ], [ [2,2,2,0], [0,2,0,0], [0,0,0,0], [0,0,0,0] ], [ [0,2,0,0], [2,2,0,0], [0,2,0,0], [0,0,0,0] ], [ [2,0,0,0], [2,2,0,0], [2,0,0,0], [0,0,0,0] ] ];};square3.prototype = square.prototype; var square4 = function(){ //這樣寫當(dāng)我們實(shí)例化square1的時候 square中this引用的成員將會添加到square1上 square.call(this); //四個不同的旋轉(zhuǎn)方向默認(rèn)是0 也就是第一個 this.rotate = [ [ [2,2,0,0], [2,2,0,0], [0,0,0,0], [0,0,0,0] ], [ [2,2,0,0], [2,2,0,0], [0,0,0,0], [0,0,0,0] ], [ [2,2,0,0], [2,2,0,0], [0,0,0,0], [0,0,0,0] ], [ [2,2,0,0], [2,2,0,0], [0,0,0,0], [0,0,0,0] ] ];};square4.prototype = square.prototype; var square5 = function(){ //這樣寫當(dāng)我們實(shí)例化square1的時候 square中this引用的成員將會添加到square1上 square.call(this); //四個不同的旋轉(zhuǎn)方向默認(rèn)是0 也就是第一個 this.rotate = [ [ [0,0,0,0], [2,2,0,0], [0,2,2,0], [0,0,0,0] ], [ [0,0,2,0], [0,2,2,0], [0,2,0,0], [0,0,0,0] ], [ [0,0,0,0], [0,2,2,0], [2,2,0,0], [0,0,0,0] ], [ [2,0,0,0], [2,2,0,0], [0,2,0,0], [0,0,0,0] ] ];};square5.prototype = square.prototype; var square6 = function(){ //這樣寫當(dāng)我們實(shí)例化square1的時候 square中this引用的成員將會添加到square1上 square.call(this); //四個不同的旋轉(zhuǎn)方向默認(rèn)是0 也就是第一個 this.rotate = [ [ [0,2,0,0], [0,2,2,2], [0,0,0,0], [0,0,0,0] ], [ [0,0,2,0], [0,0,2,0], [0,2,2,0], [0,0,0,0] ], [ [2,2,2,0], [0,0,2,0], [0,0,0,0], [0,0,0,0] ], [ [0,2,2,0], [0,2,0,0], [0,2,0,0], [0,0,0,0] ] ];};square6.prototype = square.prototype; var square7 = function(){ //這樣寫當(dāng)我們實(shí)例化square1的時候 square中this引用的成員將會添加到square1上 square.call(this); //四個不同的旋轉(zhuǎn)方向默認(rèn)是0 也就是第一個 this.rotate = [ [ [2,2,0,0], [2,2,0,0], [2,2,0,0], [2,2,0,0] ], [ [0,0,0,0], [2,2,2,2], [2,2,2,2], [0,0,0,0] ], [ [2,2,0,0], [2,2,0,0], [2,2,0,0], [2,2,0,0] ], [ [0,0,0,0], [2,2,2,2], [2,2,2,2], [0,0,0,0] ] ];};square7.prototype = square.prototype; var squareFactory = function(){};squareFactory.prototype.make=function(index,dir){ var s; index+=1; switch (index) { case 1: s = new square1(); break; case 2: s = new square2(); break; case 3: s = new square3(); break; case 4: s = new square4(); break; case 5: s = new square5(); break; case 6: s = new square6(); break; case 7: s = new square7(); break; default: break; } //因?yàn)橐粊韘quare中的data矩陣默認(rèn)全是0 所以我們需要給它一個旋轉(zhuǎn)方向 //讓它有一個形狀 console.log(index,s); s.origin.x = 0; s.origin.y = 3; s.onrotate(dir); return s;};

更多有趣的經(jīng)典小游戲?qū)崿F(xiàn)專題，分享給大家：

C++經(jīng)典小游戲匯總

python經(jīng)典小游戲匯總

python俄羅斯方塊游戲集合

JavaScript經(jīng)典游戲玩不停

java經(jīng)典小游戲匯總

javascript經(jīng)典小游戲匯總

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。

JavaScript

上一條：js 圖片懶加載的實(shí)現(xiàn)下一條：JS實(shí)現(xiàn)4位隨機(jī)驗(yàn)證碼

相關(guān)文章：

1. PHP擴(kuò)展之APC——Alternative PHP Cache(可選PHP緩存)2. android RecycleView實(shí)現(xiàn)多級樹形列表3. python使用scapy模塊實(shí)現(xiàn)ping掃描的過程詳解4. Python 實(shí)現(xiàn)國產(chǎn)SM3加密算法的示例代碼5. Xpath語法格式總結(jié)6. 如何利用Python matplotlib繪制雷達(dá)圖7. Python使用pycharm導(dǎo)入pymysql教程8. Python基于unittest實(shí)現(xiàn)測試用例執(zhí)行9. 基于python實(shí)現(xiàn)百度語音識別和圖靈對話10. 如何使用ASP.NET Core 配置文件

排行榜

					
					PHP擴(kuò)展之APC——Alternative PHP Cache(可選PHP緩存)
android RecycleView實(shí)現(xiàn)多級樹形列表
android控件Banner實(shí)現(xiàn)簡單輪播圖效果
Vue實(shí)現(xiàn)簡單的留言板
如何在vue中使用kindeditor富文本編輯器
SpringBoot 簽到獎勵實(shí)現(xiàn)方案的示例代碼
Android自定義Dialog框樣式
VMware如何進(jìn)入BIOS方法
vue的ssr服務(wù)端渲染示例詳解
Vue Object 的變化偵測實(shí)現(xiàn)代碼
docker清理大殺器/docker的overlay文件占用磁盤太大的解決
				