溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了使用原生js實(shí)現(xiàn)俄羅斯方塊，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。
效果如下
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="../css/Demo.css" > <title>俄羅斯方塊</title> </head> <body> <div class="square" id="local"> <div class="title"><h3>我方游戲區(qū)域</h3></div> <div class="game" id="local_game"> </div> <div class="tip" id="local_tip"> </div> <div class="next" id="local_next"> </div> <div class="info"> <div>用時(shí)<span id="local_time"> 0</span></div> <div>得分<span id="local_score" class="score"> 0</span></div> </div> </div> <div class="square" id="remote"> <div class="title"><h3>對(duì)方游戲區(qū)域</h3></div> <div class="game" id="remote_game"> </div> <div class="tip" id="remote_tip"> </div> <div class="next" id="remote_next"> </div> <div class="info"> <div>用時(shí)<span id="remote_time"> 0</span></div> <div>得分<span id="remote_score" 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><!-- 產(chǎn)生下一個(gè) --> <button id="checkClear">checkClear</button><!-- 是否消行 --> <button id="gameover">gameover</button><!-- 游戲是否結(jié)束 --> <button id="settime">settime</button> <button id="addscore">addscore</button> <button id="gamestate">gamestate</button><!-- 游戲狀態(tài)贏或輸 --> <button id="addTaiLines">addTaiLines</button><!-- 底部增加一行 --> </div> </div> </div> </body> <script src="../js/square.js"></script> <script src="../js/squareFactory.js"></script> <script src="../js/game.js"></script> <script src="../js/local.js"></script> <script src="../js/remote.js"></script> <script type="text/javascript" src="../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
//核心邏輯 2
var Game = function(){
//這兩個(gè)div為游戲中的兩個(gè)最大的容器盒子 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 = [];
//定義兩個(gè)方塊
//當(dāng)前方塊
var cur;
//下一個(gè)方塊
var next;
//渲染游戲框中的div
/**
*
* @param {*} container 最大容器 也就是這個(gè)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 和提示下一個(gè)的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;//顯示時(shí)間的div
scoreDiv = doms.scoreDiv;//顯示分?jǐn)?shù)的dom
local_tipDiv = doms.local_tip;//顯示游戲狀態(tài)
//這里返回的是七種方塊的其中一種 這些方塊都繼承square對(duì)象的成員
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)){
//移動(dòng)組合方塊之前先清除數(shù)據(jù) 在重新添加
clearGameData();
//這里x加一 那么組合方塊的初始下標(biāo)位置變化加一 如從第十行開(kāi)始 那么變化變成
//第十一行
cur.onDown(); //這里x軸控制的上下 y控制的是左右
setData();
refresh(gameData,gameDivs);
//console.log(gameData);
return true;
}else{
return false;
}
//這里我們需要注意 若next提示框中的組合方塊四周都有空位時(shí) 我們就算不清除
//它也能正常移動(dòng) 這是因?yàn)楹髞?lái)方塊會(huì)替換現(xiàn)有的空位 而現(xiàn)有的空位便會(huì)
//向下移動(dòng)
//0 1 1 0
//0 0 0 0
//例如 我們?nèi)粝蛴壹右坏脑?那么它便會(huì)變成這樣
//0 0 1 1 這是因?yàn)樗緛?lái)前面有個(gè)空位 所以加1后 后來(lái)的空位便會(huì)替換
//原本1的位置 而原本1的位置由于加1了 所以也會(huì)整體向右移動(dòng)
};
//左
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引用的方法時(shí) 也要加上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 那么一級(jí)數(shù)組的開(kāi)始位置下標(biāo)就是 10+0
//二級(jí)數(shù)組中的開(kāi)始下標(biāo)就是5+0
//也就是data[10+0][5+0]
//第二次就是 data[10+1][5+1] 以此類推
//這里注意一級(jí)數(shù)組控制的是上下 二級(jí)數(shù)組控制的是左右
//也就是說(shuō) 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
//將所有的方塊往上移動(dòng)兩行
// i=0;i<20 - 2;i++
// gamedata[0] = gamedata[0+2] 例如從0開(kāi)始 第一行就變成了第三行
// 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)容顯示出來(lá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è)置時(shí)間顯示
this.setTime = function(times){
timeDiv.innerText = "--"+times+"s";
}
this.gameState = function(win){
if(win){
local_tipDiv.innerText = "你贏了"
}else{
local_tipDiv.innerText = "你輸了"
}
}
//產(chǎn)生下一個(gè)方塊
this.performNext = function(type,dir){
//首先先將下一個(gè)方塊賦值給當(dāng)前操作的方塊
cur = next;
//然后重新設(shè)置當(dāng)前游戲區(qū)域的方塊
setData();
//在顯示提示下一個(gè)方塊
next = squareFactory.prototype.make(type,dir);
//然后刷新游戲區(qū)和提示區(qū)
refresh(gameData,gameDivs)
refresh(next.data,nextDivs);
}
//消行
var Fraction = 0;
this.checkclear = function(){
Fraction = 0;
//從最后一行開(kāi)始 判斷是否全部為1 若為1 則表示那一行以及全部鋪滿
//否則clear為false 并跳出當(dāng)前循環(huán) 例如第一次 若19行沒(méi)有鋪滿 則跳出循環(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 說(shuō)明這一行全部鋪滿
if(clear){
Fraction += 1;
//例如 m=19;m>0;m--
for(var m = i;m>0;m--){
//n=0;n<10;n++ 注 gamedata為20 其中每一個(gè)數(shù)組的長(zhǎng)度為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)容移動(dòng)到下一行
}
}
//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)一個(gè)行
//然后在重新判斷當(dāng)前移動(dòng)后的18行(也就是19行)是否鋪滿
//因?yàn)槊看窝h(huán)完成后 i都會(huì)-1 如果底層沒(méi)有鋪滿我們便正常循環(huán) 如果底層鋪滿
//我們便重頭開(kāi)始檢測(cè)
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)前是否可以移動(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}
//這里是判斷如果我們落下的這個(gè)位置已經(jīng)有一個(gè)方塊的話 那也不合法
//若這個(gè)方塊已經(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)前方塊變得不可移動(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 也就是說(shuō)還處于操作狀態(tài)的話
//我們便將它賦值為 1 因?yàn)?等于操作中的方塊 1等于以及落下的方塊
//而以及落下的方塊是不可以移動(dòng) 這個(gè)判斷是寫(xiě)在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);
}
//檢測(cè)當(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ù)中的每一個(gè)位置是否等于0
//若不等于0則判斷當(dāng)前的點(diǎn)是否還能繼續(xù)下降
if(nextdata[i][j]!==0){
//若不能 則直接返回false
if(!check(pos,i,j))return false;
}
}
}
//若都沒(méi)有問(wèn)題則返回true
return true;
}
//將這個(gè)init導(dǎo)出 因?yàn)檫@里這個(gè)init是一個(gè)私有的方法
this.init = init;
this.addscore = addscore;
};local.js
//我的游戲區(qū)域 1
var local = function(){
// 先聲明游戲?qū)ο?
var game;
//定義定時(shí)器時(shí)間間隔
var INTERVAL = 500;
//定義定時(shí)器
var time = null;
//計(jì)算時(shí)間
var timeCount = 0;
var times = 0;
//定義一個(gè)start開(kāi)始方法
this.start = function(){
//獲取游戲中兩個(gè)界面的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();
//游戲開(kāi)始時(shí)定義一個(gè)定時(shí)器 讓方塊自動(dòng)下移
time = setInterval(move,INTERVAL);
};
function move(){
//時(shí)間計(jì)數(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)生下一個(gè)方塊
game.performNext(generateType(),generateDir())
}
}
}
var timeFunc = function(){
//計(jì)算秒數(shù) 因?yàn)槊窟^(guò)500毫秒會(huì)調(diào)用一次
timeCount+=1;
if(timeCount==2){
timeCount = 0;
times += 1;
//設(shè)置顯示時(shí)間
game.setTime(times);
}
if(times%5==0){
// game.addTaiLines(generrateBottomLine(1));
}
}
//隨機(jī)生成干擾行
/**
*
* @param {*} linenum 生成干擾行的行數(shù)
*/
var generrateBottomLine = function(linenum){
//定義一個(gè)二維數(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)生一個(gè)隨機(jī)數(shù) 代表著方塊的種類
function generateType(){
//產(chǎn)生0-6的整數(shù)
return Math.ceil(Math.random()*7)-1
}
//產(chǎn)生一個(gè)隨機(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;
}
//聲明鍵盤(pán)事件
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
//對(duì)方游戲區(qū)域
//這個(gè)js主要為對(duì)方的操作意識(shí)
var Remote = function(){
//游戲?qū)ο?
var game;
//開(kāi)始 決定方塊類型 和旋轉(zhuǎn)方向
var start = function(type,dir){
//獲取游戲中兩個(gè)界面的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
//所有的方塊的公共邏輯 3
var 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
}
};
//檢測(cè)當(dāng)前矩陣數(shù)據(jù)中的方塊位置能否下降
square.prototype.canDown=function(isvalue){
var test = {};
//console.log(this.origin.x,this.origin.x + 1);
//這里要加1的原因是因?yàn)?這個(gè)方法是在我們還沒(méi)有執(zhí)行到加1程序之前調(diào)用的
//所以我們需要手動(dòng)給它去加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);
};
//下落方法 這個(gè)方法我們放到原型對(duì)象上 因?yàn)橄侣浞椒ㄊ侵饕姆椒?
square.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
//工廠 用于生成不同的方塊
//所有的方塊的公共邏輯 3
var square1 = function(){
//這樣寫(xiě) 當(dāng)我們實(shí)例化square1的時(shí)候 square中this引用的成員將會(huì)添加到square1上
square.call(this);
//四個(gè)不同的旋轉(zhuǎn)方向 默認(rèn)是0 也就是第一個(gè)
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(){
//這樣寫(xiě) 當(dāng)我們實(shí)例化square1的時(shí)候 square中this引用的成員將會(huì)添加到square1上
square.call(this);
//四個(gè)不同的旋轉(zhuǎn)方向 默認(rèn)是0 也就是第一個(gè)
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(){
//這樣寫(xiě) 當(dāng)我們實(shí)例化square1的時(shí)候 square中this引用的成員將會(huì)添加到square1上
square.call(this);
//四個(gè)不同的旋轉(zhuǎn)方向 默認(rèn)是0 也就是第一個(gè)
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(){
//這樣寫(xiě) 當(dāng)我們實(shí)例化square1的時(shí)候 square中this引用的成員將會(huì)添加到square1上
square.call(this);
//四個(gè)不同的旋轉(zhuǎn)方向 默認(rèn)是0 也就是第一個(gè)
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(){
//這樣寫(xiě) 當(dāng)我們實(shí)例化square1的時(shí)候 square中this引用的成員將會(huì)添加到square1上
square.call(this);
//四個(gè)不同的旋轉(zhuǎn)方向 默認(rèn)是0 也就是第一個(gè)
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(){
//這樣寫(xiě) 當(dāng)我們實(shí)例化square1的時(shí)候 square中this引用的成員將會(huì)添加到square1上
square.call(this);
//四個(gè)不同的旋轉(zhuǎn)方向 默認(rèn)是0 也就是第一個(gè)
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(){
//這樣寫(xiě) 當(dāng)我們實(shí)例化square1的時(shí)候 square中this引用的成員將會(huì)添加到square1上
square.call(this);
//四個(gè)不同的旋轉(zhuǎn)方向 默認(rèn)是0 也就是第一個(gè)
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)橐粊?lái)square中的data矩陣默認(rèn)全是0 所以我們需要給它一個(gè)旋轉(zhuǎn)方向
//讓它有一個(gè)形狀
console.log(index,s);
s.origin.x = 0;
s.origin.y = 3;
s.onrotate(dir);
return s;
};上述內(nèi)容就是使用原生js實(shí)現(xiàn)俄羅斯方塊，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼