/**
* 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"
},
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=4;
}
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);
};
Object.setPrototypeOf(I.prototype,shape.prototype);
/**
* Created by Administrator on 2016/10/22.
*/
var game={
CSIZE:26,
OFFSET:15,
pg:null,//保存游戏容器元素
shape:null,
interval:200,
timer:null,
RN:20,
CN:10,
wall:null,
shape:null,
nextshape:null,
start:function(){
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.moveLeft();break;
case 39:this.moveRight();break;
case 40:this.hardDrop();break;
case 38:this.rotateR();break;
case 90:this.rotateL();break;
}
}).bind(this);
},
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();
this.paint();
}
else{ //到底了 替换
this.landIntoWall();
this.shape=this.nextshape;
this.nextshape=this.randomShape();
}
},
paint:function(){//总的画
this.pg.innerHTML=this.pg.innerHTML.replace(/<img\s[^>]*>/g,"");
this.paintShape();
this.painWall();
this.painNext();
},
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()*3);
switch (r){
case 0: return new O();
case 1: return new T();
case 2: return new I();
}
},
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);
},
}
game.start();
时间： 2024-10-15 04:03:52