俄罗斯方块2（完整版本） 加入计分 消除 旋转逻辑

/**
* Created by Administrator on 2016/10/22.
*/
var game = {
CSIZE: 26,
OFFSET: 15,
pg: null,//保存游戏容器元素
shape: null,
interval: 300,
timer: null,
RN: 20,
CN: 10,
wall: null,
shape: null,
nextshape: null,
lines: 0,//删除行数
score: 0,//总得分
state:1,//游戏状态
GAMEOVER:0,
RUNNING:1,
PAUSE:2,
Scores: [0, 10, 30, 60, 100],
start: function () {
this.state=this.RUNNING;
this.score = 0;
this.lines = 0;
this.wall = [];
for (var r = 0; r < this.RN; r++) {
this.wall[r] = new Array(this.CN);
}
this.pg = document.querySelector(".playground");
this.shape = new T();
this.shape = this.randomShape();
this.nextshape = this.randomShape();
this.paint();
this.timer = setInterval(this.moveDown.bind(this), this.interval);
document.onkeydown = (function (ev) {
switch (ev.keyCode) {
case 37:
this.state==this.RUNNING&&this.moveLeft();
break;
case 39:
this.state==this.RUNNING&&this.moveRight();
break;
case 40:
this.state==this.RUNNING&&this.hardDrop();
break;
case 38:
this.state==this.RUNNING&&this.rotateR();
break;
case 90:
this.state==this.RUNNING&&this.rotateL();
break;
case 83:
this.state==this.GAMEOVER&&this.start();break;
case 81:
this.state!=this.GAMEOVER&&this.quit();break;
case 80:  //p
this.state==this.RUNNING&&this.pause();break;
case 67:
this.state==this.PAUSE&&this.myContinue();break;
}
}).bind(this);
},
myContinue:function(){
this.state=this.RUNNING;
this.timer = setInterval(this.moveDown.bind(this), this.interval);
this.paint();
},
pause:function(){
this.state=this.PAUSE;
clearInterval(this.timer);
this.timer=null;
this.paint();
var img=new Image();
img.src="img/pause.png";
img.style.width="525px";
img.className="state"

this.pg.appendChild(img);

},
quit:function(){
this.state=this.GAMEOVER;
clearInterval(this.timer);
this.timer=null;
this.paint();
},
canRotate: function () {//判断是否越界
for (var i = 0; i < this.shape.cells.length; i++) {
var cell = this.shape.cells[i];
if (cell.r >= this.RN || cell.r < 0
|| cell.c >= this.CN || cell.c < 0)
return false;
else if (this.wall[cell.r][cell.c])
return false;
}
return true;
},
rotateR: function () {
this.shape.rotateR();
if (!this.canRotate())//如果旋转后越界，再转回来
this.shape.rotateL();
},
rotateL: function () {
this.shape.rotateL();
if (!this.canRotate())
this.shape.rotateR();
},
hardDrop: function () {//直接降下来

while (this.canDown()) {
this.moveDown();
}
},
canLeft: function () {//判断能否左移动
for (var i = 0; i < this.shape.cells.length; i++) {
var cell = this.shape.cells[i];
if (cell.c == 0) {
return false;
}
else if (this.wall[cell.r][cell.c - 1]) {
return false;
}
}
return true;
},
moveLeft: function () {//左移

if (this.canLeft()) {
this.shape.moveLeft();
this.paint();
}
},
canRight: function () {//判断能否右移动
for (i = 0; i < this.shape.cells.length; i++) {
var cell = this.shape.cells[i];
if (cell.c == this.CN - 1) {
return false;
}
else if (this.wall[cell.r][cell.c + 1]) {
return false;
}
}
return true;
},
moveRight: function () {//右移

if (this.canRight()) {
this.shape.moveRight();
this.paint();
}
},

paintShape: function () {//绘制主图形//未删存在的
var frag = document.createDocumentFragment();
for (var i = 0; i < 4; i++) {
var cell = this.shape.cells[i];
frag.appendChild(this.paintCell(cell));
}
this.pg.appendChild(frag);
},
moveDown: function () {  //下移动
if (this.canDown()) {
this.shape.moveDown();
}
else {   //到底了 替换
this.landIntoWall();
var ln=this.deleteRows();//删除行,计分
this.lines+=ln;
this.score+=this.Scores[ln];

if(!this.isGameover()){
this.shape = this.nextshape;
this.nextshape = this.randomShape();}
else{
this.state=this.GAMEOVER;
clearInterval(this.timer);
this.timer=null;
}
}
this.paint();
},
isGameover:function(){
for( var i=0;i<this.nextshape.cells.length;i++){
var cell=this.nextshape.cells[i];
if(this.wall[cell.r][cell.c]){
return true;
}
}
return false;
},
paintState:function(){
if(this.state==this.GAMEOVER){
var img=new Image();
img.src="img/game-over.png";
img.style.width="525px";
img.className="state"

this.pg.appendChild(img);

}
},
paintScore:function(){
var score=document.getElementById("score");
score.innerHTML=this.score;
var lines=document.getElementById("lines");
lines.innerHTML=this.lines;
},
paint: function () {//总的画
this.pg.innerHTML = this.pg.innerHTML.replace(/<img\s[^>]*>/g, "");
this.paintShape();
this.painWall();
this.painNext();
this.paintScore();
this.paintState();
},
canDown: function () { //能否下
for (var i = 0; i < this.shape.cells.length; i++) {
var cell = this.shape.cells[i];
if (cell.r == this.RN - 1) {
return false;
}
else if (this.wall[cell.r + 1][cell.c]) {
return false;
}
}
return true;
},
landIntoWall: function () {//保存在墙数组中
for (var i = 0; i < this.shape.cells.length; i++) {
var cell = this.shape.cells[i];
this.wall[cell.r][cell.c] = cell;
}
},
painWall: function () {//画墙
var frag = document.createDocumentFragment();
for (var r = this.RN - 1; r > 0; r--) {
if (this.wall[r].join("") == "") break;
else
for (var c = 0; c < this.CN; c++) {
if (this.wall[r][c]) {
frag.appendChild(this.paintCell(this.wall[r][c]))
}
;
}
}
this.pg.appendChild(frag);
},
paintCell: function (cell) {//画单元
var img = new Image();
img.style.left = cell.c * this.CSIZE + this.OFFSET + 'px';
img.style.top = cell.r * this.CSIZE + this.OFFSET + 'px';
img.src = cell.src;
return img;
},
randomShape: function () {//随机生成一个shape
var r = Math.floor(Math.random() * 6);
switch (r) {
case 0:
return new O();
case 1:
return new T();
case 2:
return new I();
case 3:
return new L();
case 4:
return new J();
case 5:
return new S();
case 6:
return new Z();
}
},
painNext: function () { //画nextShape
var frag = document.createDocumentFragment();
for (var i = 0; i < this.nextshape.cells.length; i++) {
var img = this.paintCell(this.nextshape.cells[i]);
img.style.left = parseFloat(img.style.left) + 10 * this.CSIZE + "px";
img.style.top = parseFloat(img.style.top) + this.CSIZE + "px";
var cell = this.nextshape.cells[i];
frag.appendChild(img);
}
this.pg.appendChild(frag);
},
deleteRow: function (r) {//删除行
for (; r >= 0; r--) {
this.wall[r] = this.wall[r - 1];
this.wall[r - 1] = [];
for (var j = 0; j < this.CN; j++) {
if (this.wall[r][j]) {//如过有格子
this.wall[r][j].r++;
}
}
if (this.wall[r - 2].join("") == "") {
break;
}
}

},

isFullRow: function (r) {//判断满格
return (String(this.wall[r]).search(/^,|,,|,$/) == -1);

},
deleteRows: function () {
for (var i = this.RN - 1, ln = 0; i > 0; i--) {
if (this.isFullRow(i)) {
this.deleteRow(i);
ln ++;
if (this.wall[i].join("") == "" || ln == 4) {
break;
}
i++;
}

}
return ln;
}

}
game.start();

/**
* Created by Administrator on 2016/10/22.
*/
//定义cell类型：3个属性：r,c,src
function cell(r,c,src){
this.r=r;
this.c=c;
this.src=src;
}

function State(arr){//创建状态对象  把相对坐标数据封装进去
for(var i=0;i<4;i++){
this["r"+i]=arr[2*i];
this["c"+i]=arr[2*i+1];
}

}
function shape(rcs,src,states,orgi) {
this.cells =[];
for (i = 0;i<4;i++){
this.cells.push(new cell(rcs[2*i],rcs[2*i+1],src));
}
this.states=states;//状态数组
this.orgCell=this.cells[orgi];//旋转参照的格子对象
this.statei=0;
}

shape.prototype={
IMGS:{
T:"img/T.png",
O:"img/O.png",
I:"img/I.png",
S:"img/S.png",
Z:"img/Z.png",
L:"img/L.png",
J:"img/J.png"
},
moveDown:function(){
for(i=0;i<this.cells.length;i++){
this.cells[i].r++;
}
},
moveLeft:function(){
for(i=0;i<this.cells.length;i++){
this.cells[i].c= this.cells[i].c-1;
}
},
moveRight:function(){
for(i=0;i<this.cells.length;i++){
this.cells[i].c++;
}
},
rotateR:function(){//右旋转
this.statei++;
if(this.statei==this.states.length){
this.statei=0;
}
this.rotate();
},
rotate:function(){
var state=this.states[this.statei];
for(i=0;i< this.cells.length;i++){
if(this.cells[i]!=this.orgCell){
if(this.cells[i]!=this.orgCell){   //使用状态数据修改当前shape里面格子坐标
this.cells[i].r=this.orgCell.r+state["r"+i];
this.cells[i].c=this.orgCell.c+state["c"+i];
}
}
}
},
rotateL:function(){
this.statei--;
if(this.statei==-1){
this.statei=3;
}
this.rotate();
}

};
function T(){
shape.call(this,[0,3,0,4,0,5,1,4],this.IMGS.T,[
new State([0,-1,0,0,0,+1,+1,0]),     //封装状态数据传进去
new State([-1,0,0,0,+1,0,0,-1]),
new State([0,+1,0,0,0,-1,-1,0]),
new State([+1,0,0,0,-1,0,0,+1])
],1);
};
Object.setPrototypeOf(T.prototype,shape.prototype);
function O(){
shape.call(this,[0,3,0,4,1,3,1,4],this.IMGS.O,[],1);
};
Object.setPrototypeOf(O.prototype,shape.prototype);
function I(){
shape.call(this,[0,3,0,4,0,5,0,6],this.IMGS.I,[
new State([0,-1, 0,0, 0,+1, 0,+2]),
new State([-1,0, 0,0, +1,0, +2,0])
],1);
};
Object.setPrototypeOf(I.prototype,shape.prototype);
function S(){
shape.call(this,[0,4,0,5,1,3,1,4],this.IMGS.S,[
new State([-1,0, -1,+1, 0,-1, 0,0]),
new State([0,+1, +1,+1, -1,0, 0,0])
],3);
};
Object.setPrototypeOf(S.prototype,shape.prototype);
function Z(){
shape.call(this,[0,3,0,4,1,4,1,5],this.IMGS.Z,[
new State([-1,+1, 0,+1, 0,0, +1,0]),
new State([-1,-1, -1,0, 0,0, 0,+1])
],2);
};
Object.setPrototypeOf(Z.prototype,shape.prototype);
function L(){
shape.call(this,[0,3,0,4,0,5,1,3],this.IMGS.L,[
new State([0,-1, 0,0, 0,+1, -1,+1]),
new State([-1,0, 0,0, +1,0, -1,-1]),
new State([0,-1, 0,0, 0,+1, +1,-1]),
new State([+1,0, 0,0, -1,0, +1,+1]),
],1);
};
Object.setPrototypeOf(L.prototype,shape.prototype);
function J(){
shape.call(this,[0,3,0,4,0,5,1,5],this.IMGS.J,[

new State([-1,0, 0,0, +1,0, +1,-1]),
new State([0,+1, 0,0, 0,-1, -1,-1]),
new State([+1,0, 0,0, -1,0, -1,+1]),
new State([0,-1, 0,0, 0,+1, +1,+1])
],1);
};
Object.setPrototypeOf(J.prototype,shape.prototype);