html5在线俄罗斯方块,HTML5+JS实现俄罗斯方块

HTML

俄罗斯方块

@font-face{

font-family:tmb;

src:url("DS-DIGIB.TTF") format("TrueType");

}

body>div {

font-size:13pt;

padding-bottom:8px;

}

span{

font-family:tmb;

font-size:20pt;

color:green;

}

俄罗斯方块

 

速度:   

当前积分:

最高积分:

js

const TETRIS_ROWS=20;

const TETRIS_COLS=18;

const CELL_WIDTH=20;

const CELL_HEIGHT=20;

var isPlaying =true;

//const NO_BLOCK = 0;

//数据结构

var blockArr = [

[//Z

{x: TETRIS_COLS/2 -1 , y:0, color:"red"},

{x: TETRIS_COLS/2 , y:0, color:"red"},

{x: TETRIS_COLS/2 , y:1, color:"red"},

{x: TETRIS_COLS/2+1, y:1, color:"red"}

],

[//反Z

{x: TETRIS_COLS/2 +1 , y:0, color:"yellow"},

{x: TETRIS_COLS/2 , y:0, color:"yellow"},

{x: TETRIS_COLS/2 , y:1, color:"yellow"},

{x: TETRIS_COLS/2 -1 , y:1, color:"yellow"}

],

[//田

{x: TETRIS_COLS/2 -1 , y:0, color:"red"},

{x: TETRIS_COLS/2 , y:0, color:"yellow"},

{x: TETRIS_COLS/2 -1 , y:1, color:"yellow"},

{x: TETRIS_COLS/2 , y:1, color:"red"}

]

]

var tetris_status=[];

for(var i=0 ; i

{

tetris_status[i]=[];

for(var j=0 ; j

{

tetris_status[i][j] = "NO_BLOCK";

}

}

var drawBlock = function()

{

for(var i=0 ; i

{

for(var j=0 ; j

{

if( tetris_status[j][i] != "NO_BLOCK" )

{

tetris_ctx.fillStyle = "red";

tetris_ctx.fillRect(i*CELL_WIDTH+1, j*CELL_HEIGHT+1, CELL_WIDTH-2, CELL_HEIGHT-2);

}else{

tetris_ctx.fillStyle = 'white';

tetris_ctx.fillRect(i*CELL_WIDTH+1, j*CELL_HEIGHT+1, CELL_WIDTH-2, CELL_HEIGHT-2);

}

}

}

}

var createCanvas = function(rows, cols, cellwidth, cellheight)

{

tetris_canvas = document.createElement("canvas");

tetris_canvas.width = cols*cellwidth;

tetris_canvas.height = rows*cellheight;

tetris_canvas.style.border = "1px solid black";

tetris_ctx = tetris_canvas.getContext('2d');

tetris_ctx.beginPath();

for(var i = 1 ; i

{

tetris_ctx.moveTo(0, i*cellheight);

tetris_ctx.lineTo(cols*cellwidth, i*cellheight);

}

for(var i=1 ; i

{

tetris_ctx.moveTo(i*cellwidth, 0);

tetris_ctx.lineTo(i*cellwidth, rows*cellheight);

}

tetris_ctx.closePath();

tetris_ctx.strokeStyle = "black";

tetris_ctx.lineWidth = 1;

tetris_ctx.stroke();

}

var u=0;

//正在掉落的方块

var initBlock = function()

{

var rand ="";

rand= 2;

document.getElementById("maxScoreEle").innerHTML =" "+ rand;

currentFall =

[

{x: blockArr[rand][0].x , y:blockArr[rand][0].y , color:blockArr[rand][0].color},

{x: blockArr[rand][1].x , y:blockArr[rand][1].y , color:blockArr[rand][1].color},

{x: blockArr[rand][2].x , y:blockArr[rand][2].y , color:blockArr[rand][2].color},

{x: blockArr[rand][3].x , y:blockArr[rand][3].y , color:blockArr[rand][3].color}

]

}

var moveDown = function()

{

var canDown = true;

for (var i=0; i

var cur = currentFall[i]

tetris_ctx.fillStyle="red";

tetris_ctx.fillRect(cur.x*CELL_WIDTH+1, cur.y*CELL_HEIGHT+1,

CELL_WIDTH-2, CELL_HEIGHT-2);

setTimeout(function(){}, 200);

}

for (var i=0; i

var cur = "white";

tetris_ctx.fillStyle="white";

tetris_ctx.fillRect(cur.x*CELL_WIDTH+1, cur.y*CELL_HEIGHT+1,

CELL_WIDTH-2, CELL_HEIGHT-2);

}

for(var i=0 ; i

{

var cur = currentFall[i];

if(cur.y+1>= TETRIS_ROWS)

{

document.getElementById("curSpeedEle").innerHTML="1";

canDown = false;

break;

}

if(tetris_status[cur.y+1][cur.x] != "NO_BLOCK")

{

document.getElementById("curSpeedEle").innerHTML=cur.x;

canDown = false;

break;

}

}

if(canDown)

{

for (var i = 0; i

{

var cur = currentFall[i];

tetris_ctx.fillStyle = "white";

tetris_ctx.fillRect(cur.x*CELL_WIDTH+1, cur.y*CELL_HEIGHT+1,

CELL_WIDTH-2, CELL_HEIGHT-2);

tetris_status[cur.y][cur.x] = "NO_BLOCK";

// tetris_status[cur.y][cur.x]="NO_BLOCK";

}

for(var i=0; i

{

var cur = currentFall[i]

cur.y++;

document.getElementById("maxScoreEle").innerHTML=cur.y;

}

for(var i=0; i

{

var cur = currentFall[i];

tetris_ctx.fillStyle = "red";

tetris_ctx.fillRect(cur.x*CELL_WIDTH+1, cur.y*CELL_HEIGHT+1,

CELL_WIDTH-2, CELL_HEIGHT-2);

// tetris_status[cur.y][cur.x]="red";

}

}else

{

// for(var k=0; k

// {

// var cur = currentFall[k];

// tetris_status[cur.y][cur.x] = "red";

// }

for(var i=0; i

{

var cur = currentFall[i];

// confirm(canDown);

if(cur.y<=0)

{

localStorage.removeItem("curScore");

localStorage.removeItem("tetris_status");

localStorage.removeItem("curSpeed");

if(confirm("你已经输了"+cur.y))

{

maxScore = localStorage.getItem("maxScore");

maxScore = maxScore == null ? 0: parseInt(maxScore);

if(curScore >= maxScore)

{

localStorage.setItem("maxScore", curScore);

}

}

isPlaying = false;

clearInterval(curTimer);

return;

}

// if(cur.x>TETRIS_COLS&&cur.y>TETRIS_ROWS)

// {

tetris_status[cur.y][cur.x] = "red";

// }

}

lineFull();

// document.getElementById("curSpeedEle").innerHTML=u++;

// localStorage .setItem("tetris_status", JSON.stringify(tetris_status));

initBlock();

}

}

var lineFull = function()

{

for (var i=0; i< TETRIS_ROWS ; i++)

{

var flag = true;

for(var j=1; j

{

if(tetris_status[i][j] == "NO_BLOCK")

{

flag = false;

break;

}

}

if(flag)

{

confirm("10");

curScoreEle.innerHTML =curScore+= 100;

localStorage.setItem("curScore", curScore);

if(curScore >= curSpeed*curSpeed*500)

{

curSpeedEle.innerHTML = curSpeed+=1

localStorage.setItem("curSpeed", curSpeed);

clearInterval(curTimer);

curTimer = setInterval("moveDown", 500*curSpeed);

}

for(var k=i ;k >0 ;k--)

{

for(var l =0; l

{

tetris_status[k][l] = tetris_status[k-1][l];

}

}

drawBlock();

}

}

}

var moveLeft = function()

{

var canLeft = true;

for(var i=0 ; i

{

if(currentFall[i].x <=0)

{

canLeft = false;

break;

}

if(tetris_status[currentFall[i].y][currentFall[i].x-1] != "NO_BLOCK")

{

canLeft = false;

break

}

}

if(canLeft)

{

for(var i=0 ; i

{

var cur = currentFall[i];

tetris_ctx.fillStyle = "white";

tetris_ctx.fillRect(cur.x*CELL_WIDTH+2, cur.y*CELL_HEIGHT+2,

CELL_WIDTH-2, CELL_HEIGHT-2);

}

for(var i=0 ; i

{

var cur = currentFall[i];

cur.x-=1;

}

for( var i=0; i

{

var cur = currentFall[i];

tetris_ctx.fillStyle = cur.color;

tetris_ctx.fillRect(cur.x*CELL_WIDTH+2, cur.y*CELL_HEIGHT+2,

CELL_WIDTH-2, CELL_HEIGHT-2);

}

}

}

var moveRight = function()

{

var canRight = true;

for(var i=0 ; i

{

if(currentFall[i].x >=TETRIS_COLS)

{

canRight = false;

break;

}

if(tetris_status[currentFall[i].y ][currentFall[i].x +1] != "NO_BLOCK")

{

canRight = false;

break

}

}

if(canRight)

{

for(var i=0 ; i

{

var cur = currentFall[i];

tetris_ctx.fillStyle = "white";

tetris_ctx.fillRect(cur.x*CELL_WIDTH+2, cur.y*CELL_HEIGHT+2,

CELL_WIDTH-2, CELL_HEIGHT-2);

}

for(var i=0 ; i

{

var cur = currentFall[i];

cur.x+=1;

}

for( var i=0; i

{

var cur = currentFall[i];

tetris_ctx.fillStyle = currentFall[i].color;

tetris_ctx.fillRect(cur.x*CELL_WIDTH+2, cur.y*CELL_HEIGHT+2,

CELL_WIDTH-2, CELL_HEIGHT-2);

}

}

}

var rotate = function()

{

var canRotate = true;

for(var i=0; i

{

var preX = currentFall[i].x;

var preY = currentFall[i].y;

if(i!=2)

{

var afterRotateX = currentFall[2].x+ preY-currentFall[2].y;

var afterRotateY = currentFall[2].y+currentFall[2].x-preX;

if(tetris_status[afterRotateX][afterRotateY]!="NO_BLOCK")

{

canRotate = false;

break

}

if(afterRotateX<0&&afterRotateX>TETRIS_COLS-1&&afterRotateY<0&&afterRotateY>TETRIS_ROWS)

{

canRotate = false;

break

}

//

// if(tetris_status[afterRotateX][afterRotateY-1]!="NO_BLOCK")

// {

// canRotate = false;

// break

// }

// if(tetris_status[afterRotateX+1][afterRotateY]!="NO_BLOCK")

// {

// canRotate = false;

// break

// }

}

}

if(canRotate)

{

document.getElementById("maxScoreEle").innerHTML="OK";

for(var i=0 ; i

{

var cur = currentFall[i];

tetris_ctx.fillStyle = "white";

tetris_ctx.fillRect(cur.x*CELL_WIDTH+2, cur.y*CELL_HEIGHT+2,

CELL_WIDTH-2, CELL_HEIGHT-2);

}

for(var i=0 ; i

{

var preX = currentFall[i].x;

var preY = currentFall[i].y;

if(i!=2)

{

currentFall[i].x = currentFall[2].x+ preY-currentFall[2].y;

currentFall[i].y = currentFall[2].y+currentFall[2].x-preX;

}

}

for( var i=0; i

{

var cur = currentFall[i];

tetris_ctx.fillStyle = currentFall[i].color;

tetris_ctx.fillRect(cur.x*CELL_WIDTH+2, cur.y*CELL_HEIGHT+2,

CELL_WIDTH-2, CELL_HEIGHT-2);

// tetris_status[cur.y][cur.x]="red";

}

}

}

window.onkeydown = function(evt)

{

switch(evt.keyCode)

{

case 40:

if(!isPlaying)

return;

moveDown();

break;

case 37:

if(!isPlaying)

return;

moveLeft();

break;

case 39:

if(!isPlaying)

return;

moveRight();

break;

case 38:

if(!isPlaying)

return;

rotate();

break;

}

}

window.onload = function()

{

localStorage.removeItem("tetris_status");

createCanvas(TETRIS_ROWS,TETRIS_COLS,CELL_WIDTH,CELL_HEIGHT);

document.body.appendChild(tetris_canvas);

curScoreEle = document.getElementById("curScoreEle");

curSpeedEle = document.getElementById("curSpeedEle");

maxScoreEle = document.getElementById("maxScoreEle");

var tmpStatus = localStorage.getItem("tetris_status");

tetris_status = tmpStatus == null ? tetris_status: JSON.parse(tmpStatus);

drawBlock();

curScore = localStorage.getItem("curScore");

curScore = curScore == null ? 0: parseInt(curScore);

curScoreEle.innerHTML = curScore;

maxScore = localStorage.getItem("maxScore");

maxScore = maxScore == null ? 0: parseInt(maxScore);

maxScoreEle.innerHTML = maxScoreEle;

curSpeed = localStorage.getItem("curScore");

curSpeed = curSpeed == null ? 1: parseInt(curSpeed);

curScoreEle.innerHTML = curSpeed;

initBlock();

curTimer = setInterval("moveDown();", 500);

}

捕获.PNG

来自于疯狂的HTML+CSS+JS的最后一个项目有所修改。