使用原生js实现俄罗斯方块

<!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>我方游戏区域</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>用时<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>对方游戏区域</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>用时<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> <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="../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>

.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 }

//核心逻辑 2 var Game = function(){ //这两个div为游戏中的两个最大的容器盒子 dom元素 var gameDiv; var nextDiv; var timeDiv; var scoreDiv; var local_tipDiv; //游戏界面框中的方块坐标 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的容器数组 //next中的div var nextDivs = []; //游戏框中的div var gameDivs = []; //定义两个方块 //当前方块 var cur; //下一个方块 var next; //渲染游戏框中的div /** * * @param {*} container 最大容器也就是这个div要被添加到容器 * @param {*} data div的矩阵数据 * @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的矩阵数据 * @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;//游戏区域的大div nextDiv = doms.nextDiv;//提示区域的大div timeDiv = doms.timeDiv;//显示时间的div scoreDiv = doms.scoreDiv;//显示分数的dom local_tipDiv = doms.local_tip;//显示游戏状态 //这里返回的是七种方块的其中一种这些方块都继承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中判断下落的点是否合法 if(cur.canDown(isValue)){ //移动组合方块之前先清除数据在重新添加 clearGameData(); //这里x加一那么组合方块的初始下标位置变化加一如从第十行开始那么变化变成 //第十一行 cur.onDown(); //这里x轴控制的上下 y控制的是左右 setData(); refresh(gameData,gameDivs); //console.log(gameData); return true; }else{ return false; } //这里我们需要注意若next提示框中的组合方块四周都有空位时我们就算不清除 //它也能正常移动这是因为后来方块会替换现有的空位而现有的空位便会 //向下移动 //0 1 1 0 //0 0 0 0 //例如我们若向右加一的话那么它便会变成这样 //0 0 1 1 这是因为它本来前面有个空位所以加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) } }; //直接坠落 //在内部调用自己用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 } } }; //用于设置当前组合方块的位置变化 var setData = function(){ //外循环四次 for(var i=0;i<cur.data.length;i++){ //内循环四次 for(var j=0;j<cur.data[i].length;j++){ //将 square中的data矩阵的值赋给插入到gameData矩阵中的指定位置 //例如这里x为10 那么一级数组的开始位置下标就是 10+0 //二级数组中的开始下标就是5+0 //也就是data[10+0][5+0] //第二次就是 data[10+1][5+1] 以此类推 //这里注意一级数组控制的是上下二级数组控制的是左右 //也就是说 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]; } //再把所有底部增加的内容显示出来 //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); } //设置时间显示 this.setTime = function(times){ timeDiv.innerText = "--"+times+"s"; } this.gameState = function(win){ if(win){ local_tipDiv.innerText = "你赢了" }else{ local_tipDiv.innerText = "你输了" } } //产生下一个方块 this.performNext = function(type,dir){ //首先先将下一个方块赋值给当前操作的方块 cur = next; //然后重新设置当前游戏区域的方块 setData(); //在显示提示下一个方块 next = squareFactory.prototype.make(type,dir); //然后刷新游戏区和提示区 refresh(gameData,gameDivs) refresh(next.data,nextDivs); } //消行 var Fraction = 0; this.checkclear = function(){ Fraction = 0; //从最后一行开始判断是否全部为1 若为1 则表示那一行以及全部铺满 //否则clear为false 并跳出当前循环例如第一次若19行没有铺满则跳出循环 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 其中每一个数组的长度为10 for(var n=0;n<gameData[0].length;n++){ //例如外循环第一次 //gamendata[19][0] = gamedata[19-1][0]; //gamendata[19][1] = gamedata[19-1][1]; .... // 外循环第二次 //gamendata[18][0] = gamedata[18-1][0]; //gamendata[18][1] = gamedata[18-1][1]; .... gameData[m][n] = gameData[m-1][n]; //将上一行的内容移动到下一行 } } //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行往下移动一个行 //然后在重新判断当前移动后的18行(也就是19行)是否铺满 //因为每次循环完成后 i都会-1 如果底层没有铺满我们便正常循环如果底层铺满 //我们便重头开始检测 console.log("当前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; } //游戏结束 this.gameover = function(){ var over = false; for(var i=0;i<gameData[0].length;i++){ if(gameData[1][i]==1){//若第二行以及有落下的方块那么游戏便结束 over = true; } } return over; } /** * * @param {*} pos 等于当前方块的x 和 y的原点 * @param {*} x 等于当前方块的上下位置的变化值 * @param {*} y 左右位置的变化值 */ //判断当前是否可以移动 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} //这里是判断如果我们落下的这个位置已经有一个方块的话那也不合法 //若这个方块已经落下我们便判定它的矩阵数据为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 */ //让当前方块变得不可移动 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)){ //若当前方块的值是 2 也就是说还处于操作状态的话 //我们便将它赋值为 1 因为2等于操作中的方块 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); } //检测当前next中的矩阵数据是否合法 /** * * @param {*} pos 当前方块的原点 * @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++){ //判断当前next的矩阵数据中的每一个位置是否等于0 //若不等于0则判断当前的点是否还能继续下降 if(nextdata[i][j]!==0){ //若不能则直接返回false if(!check(pos,i,j))return false; } } } //若都没有问题则返回true return true; } //将这个init导出因为这里这个init是一个私有的方法 this.init = init; this.addscore = addscore; };

//我的游戏区域 1 var local = function(){ // 先声明游戏对象 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") }; //实例化Game; game = new Game(); //并将dom传入到Game的初始化方法中 game.init(dom,generateType(),generateDir()); //产生初始方块 game.performNext(generateType(),generateDir()); bindKeyEvent(); //游戏开始时定义一个定时器让方块自动下移 time = setInterval(move,INTERVAL); }; function move(){ //时间计数 timeFunc(); if(!game.down()){ game.fixed(); //判断是否消行 game.checkclear(); //判断是否结束游戏 if(game.gameover()){ stop(); game.gameState(false); }else{ //当当前方块已经落到底部后我们便产生下一个方块 game.performNext(generateType(),generateDir()) } } } var timeFunc = function(){ //计算秒数因为每过500毫秒会调用一次 timeCount+=1; if(timeCount==2){ timeCount = 0; times += 1; //设置显示时间 game.setTime(times); } if(times%5==0){ // game.addTaiLines(generrateBottomLine(1)); } } //随机生成干扰行 /** * * @param {*} linenum 生成干扰行的行数 */ var generrateBottomLine = function(linenum){ //定义一个二维数组 var lines = []; for(var i=0;i<linenum;i++){ //二维数组中的一维数组 var line = []; for(var j=0;j<10;j++){ //随机生成0-2的数 line.push(Math.ceil(Math.random()*2)-1); } lines.push(line); } return lines; } //产生一个随机数代表着方块的种类 function generateType(){ //产生0-6的整数 return Math.ceil(Math.random()*7)-1 } //产生一个随机数代表方块旋转的方向 function generateDir(){ //产生0-6的整数 return Math.ceil(Math.random()*4)-1 } //游戏结束 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; } } } }

//对方游戏区域 //这个js主要为对方的操作意识 var Remote = function(){ //游戏对象 var game; //开始决定方块类型和旋转方向 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") }; //实例化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]]); } } //导出方法 this.start = start; this.bindEvents = bindEvents; }

//所有的方块的公共逻辑 3 var square = function(){ //方块提示框中的方块数据 this.data = [ [0,0,0,0], [0,0,0,0], [0,0,0,0], [0,0,0,0] ]; this.dir = 0; //方块坐标原点 this.origin={ x:0, y:0 } }; //检测当前矩阵数据中的方块位置能否下降 square.prototype.canDown=function(isvalue){ var test = {}; //console.log(this.origin.x,this.origin.x + 1); //这里要加1的原因是因为这个方法是在我们还没有执行到加1程序之前调用的 //所以我们需要手动给它去加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); }; //下落方法这个方法我们放到原型对象上因为下落方法是主要的方法 square.prototype.onDown = function(){ this.origin.x += 1; }; square.prototype.onLeft = function(){ this.origin.y -= 1; }; square.prototype.onRight = function(){ this.origin.y += 1; }; //下面是旋转的功能 square.prototype.canRotate = function(isvalue){ var testdir = (this.dir + 1)%4;//因为是在旋转指向前进行的判断所以我们先加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;//因为是在旋转指向前进行的判断所以我们先加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] } } };

//工厂用于生成不同的方块 //所有的方块的公共逻辑 3 var square1 = function(){ //这样写当我们实例化square1的时候 square中this引用的成员将会添加到square1上 square.call(this); //四个不同的旋转方向默认是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(){ //这样写当我们实例化square1的时候 square中this引用的成员将会添加到square1上 square.call(this); //四个不同的旋转方向默认是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(){ //这样写当我们实例化square1的时候 square中this引用的成员将会添加到square1上 square.call(this); //四个不同的旋转方向默认是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(){ //这样写当我们实例化square1的时候 square中this引用的成员将会添加到square1上 square.call(this); //四个不同的旋转方向默认是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(){ //这样写当我们实例化square1的时候 square中this引用的成员将会添加到square1上 square.call(this); //四个不同的旋转方向默认是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(){ //这样写当我们实例化square1的时候 square中this引用的成员将会添加到square1上 square.call(this); //四个不同的旋转方向默认是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(){ //这样写当我们实例化square1的时候 square中this引用的成员将会添加到square1上 square.call(this); //四个不同的旋转方向默认是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; } //因为一来square中的data矩阵默认全是0 所以我们需要给它一个旋转方向 //让它有一个形状 console.log(index,s); s.origin.x = 0; s.origin.y = 3; s.onrotate(dir); return s; };

相关阅读