JavaScript でテトリスを実装

[html] ; 俄罗斯方块 body{幅:530px;背景:#F7F7F7; margin:20px auto} table#gameBoard{ border:1px ソリッドブラック;境界崩壊: 崩壊; float:left;} table#gameBoard td{ width:30px;高さ:30ピクセル; border: 1px 点線 #0cc;} div#gameControl{ widows:160;フロート:右;高さ: 200ピクセル;; line-height: 200px;} .font{ font-family:'微软雅黑';フォントサイズ:18px; text-align:center;} div input { width: 60px;高さ:25ピクセル; }

var T = TETRIS = { aBoardGrids : [], aShapes: [ [0xCC00], 0 xF00]、 [0x8C40, 0x6C00], [0x4C80, 0xC600]、 [0x44C0, 0x8E00] 、0xC880、0xE200]、 [0x88C0、0xE800、0xC440、0x2E00]、 [0x4E00、0x8C80、0xE400] ], // 万方块の形状数 init : function(){ this.oDomBoard = document.getElementById("ゲームボード"); this.oDomScore = document.getElementById("スコア"); this.aBoardGrids = new Array(18); for (var rows = 0 ; rows this.aBoardGrids[rows] = new Array(10); var oDomTr = this.oDomBoard.insertRow(-1); for (varcols = 0 ;cols this.aBoardGrids[rows][cols] = 0; oDomTr.insertCell(cols); } }

this.iShapeIdx = th.random() * this.aShapes.length); this.index = 0; var vShape = this.aShapes[this.iShapeIdx][this.index]; var sShape = vShape.toString(2); //将16进制转换は二进制 sShape = new Array(17 - sShape.length).join(0) + sShape; //不够16位，在前用0补全 this.matrix = sshape.match（/d {4}/g）; ; (){ // パネル を更新します。 for(var i = 0; i var iLines = 0; If(this.aBoardGrids[j][ i] == 1) m num ++ ; if（num ==）{var m = 0; m ++） ] j++; } } iLine を返します。 }, setScore : function (iLines){ var iScore = parseInt(this.oDomScore.innerHTML); if(iLines == 1){ iScore += 100; } else if(iLines == 2){ iScore += 300; } else if(iLines == 3){ iScore += 500; } else if(iLines == 4){ iScore += 1000; } this.oDomScore.innerHTML = iScore; } }

TETRIS.Block = function (行列){

this.shape = (function(){

var aShape = [] ; for(var i = 0 ; i var sValue = math[i]; for(var j = 0 ; j if(sValue.charAt(j) == "1"){ aShape.push( { x : j+3 , y : i }); } } }

ペ;

})(); this.draw(); }

TETRIS.Block.prototype.move = function (direction){//移動 if(this.checkBlock(this.shape,direction)){ this.draw("clear"); for(var i = 0 ; i switch(方向){ case "左"://← this .shape[i].x--; 休憩。 「正しい」ケース: this.shape[i].x++; 休憩。 case "down": this.shape[i].y++; 休憩。 } } this.draw(); } else { if(direction == "下"){ this.draw(); T.updateBoard(); //面板更新 var iLines = T.eraseLines();

if(iLines > 0){

T.setScore(iLines);

}

T.next(); //再生成一个新的方块 } }

} TETRIS.Block.prototype.rotate = function (matrix){//变形

this.shape = (function(oBlock){

var aX = [ ]; var aY = [];

for(var i = 0 ; i aX.push(oBlock.shape[i].x); aY.push(oBlock.shape[ i].y); } var iMinX = aX.getMin(); var iMinY = aY.getMin();

var aShape = []; for(var i = 0 ; i var sValue = 行列[i]; for(var j = 0 ; j if(sValue.charAt(j) ){ aShape.push({ x : j+iMinX , y : i+iMinY }); } }}} if（！（oblock.checkblock（ashape））） oblock.shapeを返します。 oBlock.draw("clear"); aShape を返します。

})(これ);

this.draw(); }

TETRIS.Block.prototype.draw = function (opt){//绘图 for(var i = 0 ; i var oShape = this.shape[i] ; T.oDomBoard.rows[oShape.y].cells[oShape.x].style.background = (opt==unknown?"#09F":""); } } TETRIS.Block.prototype.checkBlock = 関数 (形状、方向){ 形状 = 形状 ||この形; for(var i = 0 ; i if(direction == "left"){ if(shape[i].x == 0 || T.aBoardGrids[shape[i]. y][shape[i].x - 1] == 1){ falseを返します。 } } else if(direction == "right"){ if(shape[i].x == 9 || T.aBoardGrids[shape[i].y][shape[i].x + 1 】 == 1){ falseを返します。 } } else if(direction == "down"){ if(shape[i].y == 17 || T.aBoardGrids[shape[i].y + 1][shape[i]. ×] ==1){ falseを返します。 } } if(shape[i].x 9 || Shape[i].y 17) false を返します。 if(T.aBoardGrids[shape[i].y][shape[i].x] == 1){ false を返す; } } trueを返します。

} Array.prototype.getMin = function (){ var iMin = this[0]; for(var i = 0 ; i if(this[i] iMin = this[i]; } iMin を返します。 } window.onload = function(){

T.init();

var oBtnPlay = document.getElementById("btnPlay"); oBtnPlay.onclick = function(){ if(this.value == "begin"){ T.next(); this.value = "以上"; } else { this.value = "開始"; アラート("ゲームオーバー~"); clearInterval(T.timer); }

} var oBtnPause = document.getElementById("btnPause"); oBtnPause.onclick = function (){ if(this.value == "一時停止"){ clearInterval(T.timer); this.value = "再開"; } else { T.timer = setInterval(function (){ T.oBlock.move("down"); }, 1000); this.value = "一時停止"; } }

}

スコア ： 0 俄罗斯方块

JavaScript でテトリスを実装

関連記事