window.onload = function(){
if(!document.getElementById) return false;
if(!document.getElementById("canvas")) return false;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
// width：列数 对应横坐标
// height: 行数 对应纵坐标
var width = 10;
var height = 10;
canvas.width = width * 50;
canvas.height = height * 50;
// 当前图形的位置
var xpos = 3;
var ypos = 0;
// 随机生成的图形
var cube;
// 随机生成的图像
order = Math.floor(Math.random() * 20);
//order = 9;
// 用于取消TimeInterval的变量
var timeInterval;
document.onkeydown = function(event){
// true 表示可以左移
var checkLeft = function(x_offset, y_offset){
var flag = false;
for(var j = 0; j < 4; j++){
for(var i = 0; i < 4; i++){
flag = checkMainPos(i + x_offset, j + y_offset);
if(cube[Math.floor(order / 4)][order % 4][i][j] === 1){
// 已经到边上了
if(i + xpos === 0){
return false;
}
flag = checkMainPos(i + x_offset + 1, j + y_offset);
if(flag){
if(main[i + x_offset - 1][j + y_offset] === 1){
return false;
}
}
break;
}
}
}
return true;
};
// x_offset表示横向坐标
var checkRight = function(x_offset, y_offset){
var flag = false;
for(var j = 0; j < 4; j++){
for(var i = 3; i > 0; i--){
flag = checkMainPos(i + x_offset, j + y_offset);
if(cube[Math.floor(order / 4)][order % 4][i][j] === 1){
// 已经到边上了
if(i + xpos === width - 1){
return false;
}
flag = checkMainPos(i + x_offset + 1, j + y_offset);
if(flag){
if(main[i + x_offset + 1][j + y_offset] === 1){
return false;
}
}
break;
}
}
}
return true;
};
var checkSwitch = function(){
clearCube();
var tmporder = (Math.floor(order / 4)) * 4 + (order % 4 + 1) % 4;
var i, j, flag;
for(var i = 0; i < 4; i++){
for(var j = 0; j < 4; j++){
if(cube[Math.floor(tmporder / 4)][tmporder % 4][i][j] === 1){
flag = checkMainPos(i + xpos + 1, j + ypos);
if(flag){
if(main[i + xpos - 1][j + ypos] === 1){
return false;
}
}else{
return false;
}
}
}
}
return true;
};
var charCode = event.which;
if(checkStop(xpos, ypos))
return;
// 向左移一个格子
if(charCode === 37){
var flag = checkLeft(xpos, ypos);
if(flag){
clearCube();
xpos--;
loadCube();
displayMain();
}
}
// 向右移一个格子
if(charCode === 39){
var flag = checkRight(xpos, ypos);
if(flag){
clearCube();
xpos++;
loadCube();
displayMain();
}
}
// 变换图形
if(charCode === 38){
if(checkSwitch()){
clearCube();
order = (Math.floor(order / 4)) * 4 + (order % 4 + 1) % 4;
loadCube();
displayMain();
}
else{
loadCube();
}
}
};
// 需要设置成其他颜色的数组
var main = [];
for(var i = 0; i < width; i++){
main[i] = [];
for(var j = 0; j < height; j++){
main[i][j] = 0;
}
}
var checkOver = function(){
for(var i = 0; i < 4; i++){
for(var j = 3; j >= 0; j--){
if(cube[Math.floor(order / 4)][order % 4][i][j] === 1){
if(j + ypos <= 0){
return true;
}else{
return false;
}
}
}
}
return false;
}
var cleanCube = function(){
var flag = false;
var i, j, i_i, j_j;
for(j = height - 1; j >= 0; j--){
var sum = 0;
for(i = 0; i < width; i++){
sum += main[i][j];
}
if(width === sum){
flag = true;
// j行向上的全部刷新一遍
for(i_i = 0; i_i < width; i_i++){
for( j_j = j; j_j > 0; j_j--){
main[i_i][j_j] = main[i_i][j_j - 1];
}
}
}
}
if(flag){
display();
}
}
// x_offset y_offset
// 在指定偏移量的情况下，看一个图形是否该停止下降，是则返回true
var checkStop = function(order, x_offset, y_offset){
for(var i = 0; i < 4; i++){
for(var j = 3; j >= 0; j--){
var flag = checkMainPos(i + x_offset, j + y_offset);
if(flag){
if(cube[Math.floor(order / 4)][order % 4][i][j] === 1){
//到底了
if(j + y_offset >= height - 1){
return true;
}
flag = checkMainPos(i + x_offset, j + y_offset + 1);
if(flag){
if(main[i + x_offset][j + y_offset + 1] === 1){
return true;
}
}
break;
}
}
continue;
}
}
return false;
}
// 显示当前图形
var displayMain = function(){
var i, j;
for(i = 0; i < width; i++){
for(j = 0; j < height; j++){
if(main[i][j] === 0){
context.fillStyle = "#000";
}else{
context.fillStyle = "#00f";
}
context.font = "20pt Calibri";
context.fillRect( i * 50, j * 50, 50, 50);
}
}
};
// 加载图形 只根据图形编号，图形坐标
var loadCube = function(){
var i, j, flag;
for(i = 0; i < 4; i++){
for(j = 0; j < 4; j++){
if(cube[Math.floor(order / 4)][order % 4][i][j] === 1){
flag = checkMainPos(i + xpos, j + ypos);
if(flag){
main[i + xpos][j + ypos] = 1;
}
}
}
}
};
// 图形清除功能 只根据图形编号，图形坐标
var clearCube = function(){
var i, j, flag;
for(i = 0; i < 4; i++){
for(j = 0; j < 4; j++){
if(cube[Math.floor(order / 4)][order % 4][i][j] === 1){
flag = checkMainPos(i + xpos, j + ypos);
if(flag){
main[i + xpos][j + ypos] = 0;
}
}
}
}
};
var move = function(event){
// true 表示可以左移
var checkLeft = function(x_offset, y_offset){
var flag = false;
for(var j = 0; j < 4; j++){
for(var i = 0; i < 4; i++){
flag = checkMainPos(i + x_offset, j + y_offset);
if(cube[Math.floor(order / 4)][order % 4][i][j] === 1){
// 已经到边上了
if(i + xpos === 0){
return false;
}
flag = checkMainPos(i + x_offset + 1, j + y_offset);
if(flag){
if(main[i + x_offset - 1][j + y_offset] === 1){
return false;
}
}
break;
}
}
}
return true;
};
// x_offset表示横向坐标
var checkRight = function(x_offset, y_offset){
var flag = false;
for(var j = 0; j < 4; j++){
for(var i = 3; i > 0; i--){
flag = checkMainPos(i + x_offset, j + y_offset);
if(cube[Math.floor(order / 4)][order % 4][i][j] === 1){
// 已经到边上了
if(i + xpos === xwidth - 1){
return false;
}
flag = checkMainPos(i + x_offset + 1, j + y_offset);
if(flag){
if(main[i + x_offset + 1][j + y_offset] === 1){
return false;
}
}
break;
}
}
}
return true;
};
var charCode = event.which;
if(checkStop(xpos_x, ypos_y))
return;
// 向左移一个格子
if(charCode === 37){
var flag = checkLeft(xpos, ypos);
if(flag){
xpos--;
displayCanvas();
}
}
// 向右移一个格子
if(charCode === 39){
var flag = checkRight(xpos, ypos);
if(flag){
xpos++;
displayCanvas();
}
}
// 变换图形
if(charCode === 38){
oldorder = order;
order = (Math.floor(order / 4)) * 4 + (order % 4 + 1) % 4;
//order = 10;
displayCanvas(); // old
}
};
// 若要检测位置不在main坐标中，false
var checkMainPos = function(i, j){
if(i >= 0 && i < width && j >= 0 && j < height)
return true;
return false;
};
var initCube = function(){
cube = [];
// i表示有多少个系列
for(var i = 0; i < 5; i++){
cube[i] = [];
// j表示每个系列的图形
for(var j = 0; j < 4; j++){
cube[i][j] = [];
for(var k = 0; k < 4; k++){
cube[i][j][k] = [];
for(var l = 0; l < 4; l++){
cube[i][j][k][l] = 0;
}
}
}
}
// 图形分为5个系列每个系列4种图形
// 系列0 @@@@
cube[0][0][1][0] = 1;
cube[0][0][1][1] = 1;
cube[0][0][1][2] = 1;
cube[0][0][1][3] = 1;
cube[0][1][0][2] = 1;
cube[0][1][1][2] = 1;
cube[0][1][2][2] = 1;
cube[0][1][3][2] = 1;
cube[0][2][1][0] = 1;
cube[0][2][1][1] = 1;
cube[0][2][1][2] = 1;
cube[0][2][1][3] = 1;
cube[0][3][0][2] = 1;
cube[0][3][1][2] = 1;
cube[0][3][2][2] = 1;
cube[0][3][3][2] = 1;
// 系列1 @
// @ @ @ @
cube[1][0][0][1] = 1;
cube[1][0][0][2] = 1;
cube[1][0][1][2] = 1;
cube[1][0][2][2] = 1;
cube[1][1][2][1] = 1;
cube[1][1][1][1] = 1;
cube[1][1][1][2] = 1;
cube[1][1][1][3] = 1;
cube[1][2][0][2] = 1;
cube[1][2][1][2] = 1;
cube[1][2][2][2] = 1;
cube[1][2][2][3] = 1;
cube[1][3][1][1] = 1;
cube[1][3][1][2] = 1;
cube[1][3][1][3] = 1;
cube[1][3][0][3] = 1;
// 系列2 @
// @ @ @
cube[2][0][1][1] = 1;
cube[2][0][0][2] = 1;
cube[2][0][1][2] = 1;
cube[2][0][2][2] = 1;
cube[2][1][2][2] = 1;
cube[2][1][1][1] = 1;
cube[2][1][1][2] = 1;
cube[2][1][1][3] = 1;
cube[2][2][0][2] = 1;
cube[2][2][1][2] = 1;
cube[2][2][2][2] = 1;
cube[2][2][1][3] = 1;
cube[2][3][1][1] = 1;
cube[2][3][1][2] = 1;
cube[2][3][1][3] = 1;
cube[2][3][0][2] = 1;
// 系列3 @ @
// @ @
cube[3][0][0][1] = 1;
cube[3][0][1][1] = 1;
cube[3][0][1][2] = 1;
cube[3][0][2][2] = 1;
cube[3][1][1][2] = 1;
cube[3][1][1][3] = 1;
cube[3][1][2][2] = 1;
cube[3][1][2][1] = 1;
cube[3][2][0][1] = 1;
cube[3][2][1][1] = 1;
cube[3][2][1][2] = 1;
cube[3][2][2][2] = 1;
cube[3][3][1][2] = 1;
cube[3][3][1][3] = 1;
cube[3][3][2][2] = 1;
cube[3][3][2][1] = 1;
// 系列4 @ @
// @ @
cube[4][0][1][1] = 1;
cube[4][0][1][2] = 1;
cube[4][0][2][1] = 1;
cube[4][0][2][2] = 1;
cube[4][1][1][1] = 1;
cube[4][1][1][2] = 1;
cube[4][1][2][1] = 1;
cube[4][1][2][2] = 1;
cube[4][2][1][1] = 1;
cube[4][2][1][2] = 1;
cube[4][2][2][1] = 1;
cube[4][2][2][2] = 1;
cube[4][3][1][1] = 1;
cube[4][3][1][2] = 1;
cube[4][3][2][1] = 1;
cube[4][3][2][2] = 1;
};
initCube();
loadCube();
displayMain();
timeInterval = setInterval(function(){
return function(){
var flag = checkStop(order, xpos, ypos);
if(flag){
//消肿
cleanCube();
if(checkOver()){
alert("game over!");
clearInterval(timeInterval);
return;
}
xpos = 3;
ypos = -4;
order = Math.floor(Math.random() * 20);
//order = 10;
oldorder = order;
}
clearCube();
ypos++;
loadCube();
displayMain();
}
}(), 1000);
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
