自学JS第一站-----一个只能在firefox下运行的俄罗斯方库

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// 在指定偏移量的情况下，看一个图形是否该停止下降，是则返回truevar 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坐标中，falsevar 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);}