和第一版无差别,主要调整了下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
(function () {
var Cell = {
status: [
//------------------------------------------------------------------------------------------------
/****/
//------------------------------------------------------------------------------------------------
[ //长条****
[
[0, 0, 0, 0],
[1, 1, 1, 1],
[0, 0, 0, 0],
[0, 0, 0, 0]
],
[
[0, 1, 0, 0],
[0, 1, 0, 0],
[0, 1, 0, 0],
[0, 1, 0, 0]
],
[
[0, 0, 0, 0],
[1, 1, 1, 1],
[0, 0, 0, 0],
[0, 0, 0, 0]
],
[
[0, 1, 0, 0],
[0, 1, 0, 0],
[0, 1, 0, 0],
[0, 1, 0, 0]
]
] ,
//------------------------------------------------------------------------------------------------
/*
*
* */
//------------------------------------------------------------------------------------------------
[
[
[0, 0, 0, 0],
[0, 2, 0, 0],
[0, 2, 2, 2],
[0, 0, 0, 0]
],
[
[0, 0, 0, 0],
[0, 2, 2, 0],
[0, 2, 0, 0],
[0, 2, 0, 0]
],
[
[0, 0, 0, 0],
[2, 2, 2, 0],
[0, 0, 2, 0],
[0, 0, 0, 0]
],
[
[0, 0, 2, 0],
[0, 0, 2, 0],
[0, 2, 2, 0],
[0, 0, 0, 0]
]
] ,
//------------------------------------------------------------------------------------------------
/*
*
* */
//------------------------------------------------------------------------------------------------
[
[
[0, 0, 0, 0],
[0, 3, 3, 3],
[0, 3, 0, 0],
[0, 0, 0, 0]
],
[
[0, 3, 3, 0],
[0, 0, 3, 0],
[0, 0, 3, 0],
[0, 0, 0, 0]
],
[
[0, 0, 0, 0],
[0, 0, 3, 0],
[3, 3, 3, 0],
[0, 0, 0, 0]
],
[
[0, 3, 0, 0],
[0, 3, 0, 0],
[0, 3, 3, 0],
[0, 0, 0, 0]
]
] ,
//------------------------------------------------------------------------------------------------
/*
* *
*/
//------------------------------------------------------------------------------------------------
[
[
[0, 4, 0, 0],
[0, 4, 4, 0],
[0, 0, 4, 0],
[0, 0, 0, 0]
],
[
[0, 0, 0, 0],
[0, 4, 4, 0],
[4, 4, 0, 0],
[0, 0, 0, 0]
],
[
[0, 4, 0, 0],
[0, 4, 4, 0],
[0, 0, 4, 0],
[0, 0, 0, 0]
],
[
[0, 0, 0, 0],
[0, 4, 4, 0],
[4, 4, 0, 0],
[0, 0, 0, 0]
]
] ,
//------------------------------------------------------------------------------------------------
/*
* *
*/
//------------------------------------------------------------------------------------------------
[
[
[0, 0, 5, 0],
[0, 5, 5, 0],
[0, 5, 0, 0],
[0, 0, 0, 0]
],
[
[0, 0, 0, 0],
[5, 5, 0, 0],
[0, 5, 5, 0],
[0, 0, 0, 0]
],
[
[0, 0, 5, 0],
[0, 5, 5, 0],
[0, 5, 0, 0],
[0, 0, 0, 0]
],
[
[0, 0, 0, 0],
[5, 5, 0, 0],
[0, 5, 5, 0],
[0, 0, 0, 0]
]
] ,
//------------------------------------------------------------------------------------------------
/*
* * */
//------------------------------------------------------------------------------------------------
[
[
[0, 0, 0, 0],
[0, 6, 0, 0],
[6, 6, 6, 0],
[0, 0, 0, 0]
],
[
[0, 6, 0, 0],
[0, 6, 6, 0],
[0, 6, 0, 0],
[0, 0, 0, 0]
],
[
[0, 0, 0, 0],
[6, 6, 6, 0],
[0, 6, 0, 0],
[0, 0, 0, 0]
],
[
[0, 6, 0, 0],
[6, 6, 0, 0],
[0, 6, 0, 0],
[0, 0, 0, 0]
]
] ,
//------------------------------------------------------------------------------------------------
/*
* * */
//------------------------------------------------------------------------------------------------
[
[
[0, 0, 0, 0],
[0, 7, 7, 0],
[0, 7, 7, 0],
[0, 0, 0, 0]
],
[
[0, 0, 0, 0],
[0, 7, 7, 0],
[0, 7, 7, 0],
[0, 0, 0, 0]
],
[
[0, 0, 0, 0],
[0, 7, 7, 0],
[0, 7, 7, 0],
[0, 0, 0, 0]
],
[
[0, 0, 0, 0],
[0, 7, 7, 0],
[0, 7, 7, 0],
[0, 0, 0, 0]
]
]
],
statusSum: 7,
color: ["", "red", "green", "blue", "yellow", "orange", "pink", "purple", "black"],
width: 10
};
function Box() {
return this._init();
};
Box.prototype = {
x: 0,
y: 0,
index: 0,
status: [],
divBox: null,
init:function(){
this.x = 5;
this.y = -4;
},
_init: function () {
this.init();
this._createBox();
},
_createBox: function () {
var statusIndex = Math.random() * Cell.statusSum;
this.status = Cell.status[parseInt(statusIndex) ];
this.divBox = this._createDivBox();
},
_createDivBox: function () {
var dbox = document.createElement("div");
dbox.style.position = "absolute";
var curMode = this.status[this.index]; //当前方块的形状
for (var y in curMode) {
for (var x in curMode[y]) {
if (curMode[y][x] == 0) continue;
var d = document.createElement("div");
d.style.position = "absolute";
d.style.top = y * Cell.width + "px";
d.style.left = x * Cell.width + "px";
d.style.width = Cell.width + "px";
d.style.height = Cell.width + "px";
d.style.overflow = "hidden";
d.style.backgroundColor = Cell.color[curMode[y][x]];
dbox.appendChild(d);
}
}
return dbox;
},
_dropDivBox: function (_divBox) {
if (_divBox) {
_divBox.parentNode.removeChild(_divBox);
}
},
_move: function (px, py) {
this.x = this.x + px;
this.y = this.y + py;
},
/*----------------------------------------------------------------------------------*/
drop: function () {
this._dropDivBox(this.divBox);
},
draw: function () {
this.divBox.style.left = this.x * Cell.width + "px";
this.divBox.style.top = this.y * Cell.width + "px";
},
move: function (x, y) {
this._move(x, y);
this.draw();
},
around: function () {
this.index++;
if (this.index >= 4) {
this.index = 0;
}
var bak = this.divBox;
this.divBox = this._createDivBox();
this._dropDivBox(bak);
}
/*----------------------------------------------------------------------------------*/
};
/**
* 游戏画布
* @returns {*}
* @constructor
*/
function Tetris() {
return this._init();
}
Tetris.prototype = {
LEFT: 37,
UP: 38,
RIGHT: 39,
DOWM: 40,
width: 15,
height: 20,
canvas:[], //二维数组,0值=无阻碍
canvasDivBox:null, //大div,装载着canvasDivCell每一个小格的DIV。整体
canvasDivCell:[], // 二维数组,每一个小格DIV
colorBlack: Cell.color.length - 1,
score: 0,
scoreDivBox:null,
time: 0,
delay: 250,
isMove: false,
curBox:null,
nextBox:null,
_init: function () {
this._initCanvas();
this._createScoreDivBox();
this.start();
} ,
_createScoreDivBox:function(){
var dbox = document.createElement("div");
dbox.style.position = "absolute";
dbox.style.border = "1px solid black";
dbox.style.overflow = "hidden";
dbox.style.width = 100 + "px";
dbox.style.height = 100 + "px";
dbox.style.top = this.canvasDivBox.style.top;
dbox.style.left = 110 + parseFloat(this.canvasDivBox.style.width) + "px";
document.getElementsByTagName("body")[0].appendChild(dbox);
this.scoreDivBox = dbox;
this.scoreDivBox.innerHTML = this.score;
},
_initCanvas: function(){
for (var y = 0; y < this.height; y++) {
this.canvas[y] = [];
for (var x = 0; x < this.width; x++) {
this.canvas[y][x] = 0; //无阻碍
//竖向围墙
if (y == 0 || y == this.height - 1) {
this.canvas[y][x] = this.colorBlack;
}
//横向围墙
if (x == 0 || x == this.width - 1) {
this.canvas[y][x] = this.colorBlack;
}
}
}
this._createCanvas();
this.paint();
},
_createCanvas: function () {
var dbox = document.createElement("div");
dbox.style.position = "absolute";
dbox.style.overflow = "hidden";
dbox.style.width = this.width * Cell.width + "px";
dbox.style.height = this.height * Cell.width + "px";
dbox.style.top = 100 + "px";
dbox.style.left = 100 + "px";
dbox.style.overflow = "hidden";
document.getElementsByTagName("body")[0].appendChild(dbox);
this.canvasDivBox = dbox;
for (var y = 0; y < this.height; y++) {
var dboxs = [];
for (var x = 0; x < this.width; x++) {
var b = document.createElement("div");
b.style.position = "absolute";
b.style.backgroundColor = Cell.color[this.canvas[y][x]];
b.style.width = Cell.width + "px";
b.style.height = Cell.width + "px";
b.style.left = x * Cell.width + "px";
b.style.top = y * Cell.width + "px";
b.style.overflow = "hidden";
this.canvasDivBox.appendChild(b);
dboxs.push(b)
}
this.canvasDivCell.push(dboxs);
}
},
_canMove: function (px, py) {
var curMode = this.curBox.status[this.curBox.index];
for (var y = curMode.length - 1; y >= 0; y--) {
for (var x = 0; x < curMode[y].length; x++) {
var wx = (this.curBox.x + x + px), wy = (this.curBox.y + y + py);
if (px != 0) {
if (wx <= 0) wx = 0;
if (wx >= this.width - 1) wx = this.width - 1;
if (curMode[y][x] > 0 && wy < 0) return false;
if (curMode[y][x] > 0 && this.canvas[wy][wx] > 0) return false;
continue;
}
if (py != 0) {
if (wy <= 0) wy = 1;
if (wy >= this.height - 1) wy = this.height - 1;
if (curMode[y][x] > 0 && wy >= this.height - 1) return false;
if (curMode[y][x] > 0 && this.canvas[wy][wx] > 0) return false;
}
}
}
return true;
},
_canRound: function(){
var nextIndex = this.curBox.index + 1;
if (nextIndex >= 4) nextIndex = 0
var nextMode = this.curBox.status[nextIndex];
for (var y = 0; y < nextMode.length; y++) {
for (var x = 0; x < nextMode[y].length; x++) {
var wx = (this.curBox.x + x), wy = (this.curBox.y + y);
if (nextMode[y][x] > 0 && this.canvas[wy] && this.canvas[wy][wx] != 0) {
return false;
}
}
}
return true;
},
_isOver: function(){
var curMode = this.curBox.status[this.curBox.index];
return this.curBox.y <= 0
},
_copyBoxToCanvas: function () {
var curMode = this.curBox.status[this.curBox.index];
for (var y = 0; y < curMode.length; y++) {
for (var x = 0; x < curMode[y].length; x++) {
var wx = this.curBox.x + x;
var wy = this.curBox.y + y;
if (wy <= 0) break;
if (curMode[y][x] > 0 && this.canvas[wy][wx] == 0) {
this.canvas[wy][wx] = curMode[y][x]
}
}
}
},
_keypress: function(event){
this.isMove = false;
event = fixEvent(event || window.event);
event.preventDefault();
var x = 0, y = 0;
if (event.which == this.LEFT) {
x = -1, y = 0;
} else if (event.which == this.UP) {
if (this._canRound()) {
this.curBox.around();
this.curBox.draw();
this.canvasDivBox.appendChild(this.curBox.divBox);
}
}
else if (event.which == this.RIGHT) {
x = 1, y = 0;
}
else if (event.which == this.DOWM) {
x = 0, y = 1;
}
if (this._canMove(x, y) && event.which != this.UP) {
this.curBox.move(x, y);
}
this.isMove = true;
},
_thread: function(){
if (this._canMove(0, 1) && this.isMove) {
this.curBox.move(0, 1);
} else {
this.isMove = false;
if (this._isOver()) {
clearInterval(this.time);
this.scoreDivBox.innerHTML = "<br/>game over!";
} else {
this._copyBoxToCanvas();
this._deleteLine();
this.paint();
this._createBox();
if (this.score % 2 == 0) {
this.delay = this.delay - this.score * this.score;
}
this.scoreDivBox.innerHTML = this.score;
}
this.isMove = true;
}
},
_deleteLine: function () {
//从边框内开始循环,所有减2
var delY = [];
for (var y = this.height - 2; y > 0; y--) {
if(this._isDelete(y)){
delY.push(y);
}
}
while(delY.length){
this.score = this.score + delY.length * 2;
for (var y = delY.pop(); y > 0; y--) {
for (var x = 1; x < this.width - 1; x++) {
if (y - 1 <= 0) {
this.canvas[y][x] = 0;
}else {
this.canvas[y][x] = this.canvas[y - 1][x];
}
}
}
}
},
_isDelete: function (y) {
for (var x = 1; x < this.width - 1; x++) {
if (this.canvas[y][x] == 0) {
return false;
}
}
return true;
},
_createBox: function(){
if(this.nextBox){
this.curBox.drop();
this.curBox = this.nextBox;
this.curBox.init();
this.nextBox = new Box();
this.paintNextBox();
}else{
this.curBox = new Box();
this.nextBox = new Box();
this.paintNextBox();
}
this.curBox.draw();
this.canvasDivBox.appendChild(this.curBox.divBox);
this.isMove = true;
},
/*------------------------------------------------------*/
paint: function(){
for (var y = 0; y < this.height; y++) {
var dboxs = this.canvasDivCell[y];
for (var x = 0; x < this.width; x++) {
dboxs[x].style.backgroundColor = Cell.color[this.canvas[y][x]];
}
}
},
paintNextBox:function(){
this.nextBox.divBox.style.left = parseFloat(this.scoreDivBox.style.left)+ this.width + "px";
this.nextBox.divBox.style.top = parseFloat(this.scoreDivBox.style.top) + 50 + "px";
document.body.appendChild(this.nextBox.divBox);
},
start: function () {
this._createBox();
document.onkeydown = applyFn(this, this._keypress);
this.time = setInterval(applyFn(this, this._thread), this.delay);
}
}
/*==============================================*/
function applyFn(obj, fn) {
return function () {
fn.apply(obj, arguments);
}
}
function callFn(obj, fn) {
return function () {
fn.apply(obj);
}
}
function fixEvent(event) {
if (event.preventDefault) event.preventDefault();
else {
event.preventDefault = function () {
event.returnValue = false;
};
}
if (event.which == null && (event.charCode != null || event.keyCode != null)) {
event.which = event.charCode != null ? event.charCode : event.keyCode;
}
return event;
}
/*==============================================*/
window.Tetris = Tetris;
})();
new Tetris();
</script>