Html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>俄罗斯方块</title>
<style type="text/css">
* {font:Geneva, Arial, Helvetica, sans-serif;color:#0000FF;font-size:15px;}
div {width:410px;height:500px;position:absolute;background-color:#CCC;display:block;}
#game {width:300px;height:480px;left:10px;top:10px;background-color:#999999;}
#scoreDiv, #scoreDiv span {width:80px;height:30px;left:320px;top:10px;color:#FFF;text-align:center;line-height:30px;background-color:#000000;}
#level {width:80px;height:30px;left:320px;top:50px;background-color:#000000;}
#next {width:80px;height:80px;left:320px;top:90px;background-color:#000000;}
#ctrl {width:80px;height:50px;left:320px;top:440px;background-color:#999999;}
#btnStart, #btnPauseOrContinue {width:80px;}
</style>
<script type="text/javascript" src="tetris.js">
</script>
</head>
<body>
<div id="divMain">
<div id="game"><script>drawTable("game",18,10);</script></div>
<div id="scoreDiv">分数:<span id="score">0</span></div>
<div id="level"></div>
<div id="next"><script>drawTable("next",4,4);</script></div>
<div id="ctrl">
<input type="button" id="btnStart" value="开始" onclick="startGame();" />
<input type="button" id="btnPauseOrContinue" value="暂停" onclick="suspend();" />
</div>
</div>
</body>
</html>
Js:
var nowCube;
var nextCube;
var stateArray = new Array(18);
for(i = 0; i < 18; i++){
stateArray[i] = new Array(10);
}
for(i = 0; i < 18; i++){
for(j = 0; j < 10; j++){
stateArray[i][j] = 0;
}
}
var id;
var isGameOver = false;
var scoreArray = new Array(100,200,300,500,800,1300,2100,3400,5500,8900,14400,2330);
//画游戏区表格和下一方块区表格
function drawTable(pan,rows,cols){
var tableStr = "<table border='1' id='tb_" + pan + "' style='width:100%;height:100%;border-color:#000;background-color:#fff;'>";
for(i = 0;i < rows;i++){
tableStr += "<tr >";
for(j = 0;j < cols;j++){
tableStr += "<td style='background-color:#0ff;'></td>";
}
tableStr += "</tr>";
}
tableStr += "</table>";
document.getElementById(pan).innerHTML = tableStr;
}
//开始按钮相应
function startGame(){
start();
document.onkeydown = keyDown;
tbGame = document.getElementById("tb_game");//获取游戏区的id
nowCube = initCube(10);//随机生成方块
drawCube(tbGame,nowCube,"#00f");//在游戏区画方块
tbNext = document.getElementById("tb_next");//获取显示下一方块区的id
nextCube = initCube(4);//随机生成方块
drawCube(tbNext,nextCube,"#00f");//在下一方块去画下一方块
//让方块每隔1秒下降一次
id = window.setTimeout(down,500);
}
//开始的初始化
function start(){
suspend();
isGameOver = false;
document.getElementById("btnPauseOrContinue").value ="暂停";
document.getElementById("btnPauseOrContinue").disabled = false;
//重置当前矩阵数组
for(i = 0; i < 18; i++){
stateArray[i] = new Array(10);
}
//清理now区域
for(i = 0; i < 18; i++){
for(j = 0; j < 10; j++){
stateArray[i][j] = 0;
document.getElementById("tb_game").rows[i].cells[j].style.backgroundColor = "#0ff";
}
}
//清理next区域
for(i = 0; i < 4; i++){
for(j = 0; j < 4; j++){
document.getElementById("tb_next").rows[i].cells[j].style.backgroundColor = "#0ff";
}
}
}
//让方块不停的往下掉
function down(){
if(isGameOver == false){
move(1,0);
id = window.setTimeout(down,500);
}
}
//游戏暂停和继续
function suspend(){
if(document.getElementById("btnPauseOrContinue").value=="继续"){
id = window.setTimeout(down,500);
document.getElementById("btnPauseOrContinue").value ="暂停";
}else{
window.clearTimeout(id);
document.getElementById("btnPauseOrContinue").value ="继续";
}
}
//随机生成一块新的方块
function initCube(rows)
{
var row = Math.round(rows / 2);
var cubu = new Array(4);
var num = Math.floor(Math.random()*7);
switch(num){
case 0:{
cubu = [{x:0,y:row - 1},{x:0,y:row},{x:1,y:row - 1},{x:1,y:row}];
break;
}
case 1:{
cubu = [{x:0,y:row - 1},{x:1,y:row - 1},{x:2,y:row - 1},{x:3,y:row - 1}];
break;
}
case 2:{
cubu = [{x:0,y:row},{x:1,y:row - 1},{x:1,y:row},{x:2,y:row}];
break;
}
case 3:{
cubu = [{x:0,y:row - 1},{x:1,y:row - 1},{x:1,y:row},{x:2,y:row}];
break;
}
case 4:{
cubu = [{x:0,y:row},{x:1,y:row - 1},{x:1,y:row},{x:2,y:row - 1}];
break;
}
case 5:{
cubu = [{x:0,y:row - 1},{x:1,y:row - 1},{x:2,y:row - 1},{x:2,y:row}];
break;
}
case 6:{
cubu = [{x:0,y:row},{x:1,y:row},{x:2,y:row - 1},{x:2,y:row}];
break;
}
}
return cubu;
}
//画方块
function drawCube(tbName,cube,colr){
for(i = 0;i < 4;i++){
tbName.rows[cube[i].x].cells[cube[i].y].style.backgroundColor = colr;//"#00f";
}
}
//追加分数
function addScore(score){
var oldScore = window.parseInt((document.getElementById("score").innerHTML));
document.getElementById("score").innerHTML = oldScore + score;
}
//键盘事件
function keyDown(e){
var oEvent = e||event;
var keynum = oEvent.keyCode;
if(keynum >= 37 && keynum <= 40){
switch(keynum){
case 37: move(0,-1); break;//左
case 38: change(); break;//上(旋转)
case 39: move(0,1); break;//右
case 40: move(1,0); break;//下
}
}
}
//旋转
function change(){
var tempCube = copyCube(nowCube);
var sumX = 0,sumY = 0;
for(var i = 0; i < 4; i++){
sumX += tempCube[i].x;
sumY += tempCube[i].y;
}
//求出中点
var cX = Math.round(sumX / 4);
var cY = Math.round(sumY / 4);
//求出新的方块位置
for(var i = 0; i < 4; i++){
tempCube[i].x = cX + cY - nowCube[i].y;
tempCube[i].y = cY - cX + nowCube[i].x;
if(isExist(tempCube[i].x,tempCube[i].y) == false){
return;
}
}
tbGame = document.getElementById("tb_game");//获取游戏区的id
drawCube(tbGame,nowCube,"#0ff");
nowCube = tempCube;
drawCube(tbGame,nowCube,"#00f");//在游戏区画方块
}
//判断是不是会出界或有阻碍
function isExist(x,y){
if(x < 0 || x > 17 || y > 9 || y < 0){
return false
}
if(stateArray[x][y] == 1){
return false;
}
return true;
}
//创建方块的副本
function copyCube(cube){
newCube = [{x:0,y:0},{x:0,y:0},{x:0,y:0},{x:0,y:0}];
for(var i = 0; i < 4; i++){
newCube[i].x = cube[i].x;
newCube[i].y = cube[i].y;
}
return newCube;
}
//移动
function move(x,y){
if(canMove(x,y) == true){
for(i = 0; i < 4; i++){
document.getElementById("tb_game").rows[nowCube[i].x].cells[nowCube[i].y].style.backgroundColor = "#0ff";
}
for(i = 0; i < 4; i++){
nowCube[i].x += x;
nowCube[i].y += y;
document.getElementById("tb_game").rows[nowCube[i].x].cells[nowCube[i].y].style.backgroundColor = "#00f";
}
}else{
//如果不能在下移了
if(x == 1){
for(i = 0; i < nowCube.length; i++){
stateArray[nowCube[i].x][nowCube[i].y] = 1;
}
nowCube = copyCube(nextCube);
for(i = 0; i < nowCube.length; i++){
nowCube[i].y += 2;
document.getElementById("tb_game").rows[nowCube[i].x].cells[nowCube[i].y].style.backgroundColor = "#00f";
if(!canMove(1,0)){
isGameOver = true;
}
}
//如果游戏结束
if(isGameOver == true){
window.clearTimeout(id);
document.getElementById("btnPauseOrContinue").disabled = true;
alert("Game Over");
return;
}
//清行
doClearRow();
drawCube(tbNext,nextCube,"#0ff");//在下一方块去画下一方块
nextCube = initCube(4);//随机生成方块
tbNext = document.getElementById("tb_next");//获取显示下一方块区的id
drawCube(tbNext,nextCube,"#00f");//在下一方块去画下一方块
}
}
}
//清行操作
function doClearRow(){
var scoreGrade = 0;
var rowArray = checkClearRow();
scoreGrade = rowArray.length;//分数等级
if(scoreGrade != 0){
addScore(scoreArray[scoreGrade - 1]);
}
var i = rowArray.length - 1;
for(; i >= 0; i--){
clearRow(rowArray[i]);
}
}
//清掉指定的一行
function clearRow(row){
//从这一行开始
for(i = row; i > 0; i--){
var isNoCubu = true;
for(j = 0; j < stateArray[i].length; j++){
if(stateArray[i][j] == 1){
isNoCubu = false;
}
stateArray[i][j] = stateArray[i - 1][j];
document.getElementById("tb_game").rows[i].cells[j].style.backgroundColor = document.getElementById("tb_game").rows[i - 1].cells[j].style.backgroundColor;
}
if(isNoCubu == true){
break;
}
}
//第一行清空
for(j = 0; j < stateArray[0].length; j++){
stateArray[0][j] = 0;
document.getElementById("tb_game").rows[0].cells[j].style.backgroundColor = "#0ff";
}
}
//返回哪些行能是能清行的
function checkClearRow(){
var rowArray = new Array();
for(i = stateArray.length - 1; i > 0; i--){
var isBreak = false;
for(j = 0; j < stateArray[i].length; j++){
if(stateArray[i][j] == 0){
isBreak = true;
break;
}
}
if(isBreak == false){
rowArray.push(i);
}
}
return rowArray;
}
//判断能否移动
function canMove(x,y){
for(var i=0; i < 4; i++){
if(nowCube[i].x + x > 17){//到底
return false;
}
if(nowCube[i].y + y < 0 || nowCube[i].y + y > 9){//出了左右边界
return false;
}
if(stateArray[nowCube[i].x + x][nowCube[i].y + y] == 1){//旁边有方块
return false;
}
}
return true;
}
浙公网安备 33010602011771号