阅读更多
以前上中专的时候，在学校机房练习时，就看有些同学用c还是qbasic做的俄罗斯方块，当时感觉这些人真厉害，啥时候我也能亲手写一个就好了。只不过当时的我，不管再怎么努力，也还是写不出来，也就带着那个遗憾毕业了。之后阴差阳错的去了大连培训，学了c++,java.c++也就学到能写简单的类，简单的程序，能看懂代码的程度，java学得倒还行。后面学到了java的Swing组件，awt组件，就想着，要不就用java写个俄罗斯方块作为java课的毕业成果吧。当时也是努力的写，写了改，改了写，最后总算凑合着写出来了，在当时毕业的同学里面，还算是不错的吧，只不过只有我自己知道，那里面的代码写得有多烂，bug有多少，java老师也是简单运行了一下，玩了玩，就给了我一个优秀，呵呵。后来工作了，那份代码也没太珍惜，就慢慢的没了。现在觉得，不管哪个程序多简单，或是多复杂，也许在别人眼里根本什么都不是，但却是自己年轻时一个小小的梦想，我想亲手把这个小梦想实现。
好了，废话不多说了，贴我写的代码吧。代码感觉写得有点多，但这是按我自己的想法实现的。
觉得html和javascript分开贴比较好点。
先来html
下面是javascript，代码有点多，呵呵
//游戏区大小定义
var zone_row_max = 25;
var zone_col_max = 10;
//下一方块预览区大小定义
var next_row_max = 4;
var next_col_max = 4;
//当前分数
var point = 0;
//消除一行的得分数
var get_point_per = 100;
//等级提高一级需要的分数
var level_point_per = 1000;
var level = 1;
//不同等级对应的游戏速度
var pointLevel = [0,800, 600, 400, 200, 100, 50];
var contrllor = null;
var contrllor_next = null;
var elGameZone =null;
var elNextZone = null;
var timer = null;
var isPaused = false;
//游戏初始化
function initGame(){
elGameZone = document.getElementById('gamezone');
elNextZone = document.getElementById('nextzone');
elGameZone.innerHTML = createGameZone(zone_row_max, zone_col_max,false);
elNextZone.innerHTML = createGameZone(next_row_max, next_col_max,true);
//firefox下，不支持innerText,只支持textContent
if(document.getElementById("curLevel").innerText != undefined){
document.getElementById("curPoint").innerText = "0";
document.getElementById("curLevel").innerText = "1";
}else{
document.getElementById("curPoint").textContent = "0";
document.getElementById("curLevel").textContent = "1";
}
document.getElementById("btnPause").disabled = true;
}
//开始
function play(){
if(!isPaused){
//游戏区
contrllor = new Controller(elGameZone,false);
contrllor.generateBlock(0,4,-1);
//预览区
contrllor_next = new Controller(elNextZone,true);
contrllor_next.generateBlock(0,0,-1);
}
document.onkeydown = gameControl;
timer = window.setInterval(start, pointLevel[level]);
document.getElementById("btnPlay").disabled = true;
document.getElementById("btnPause").disabled = false;
//点击按钮后，焦点转移到了暂停按钮上，导致操作区不响应键盘事件
if (document.activeElement) {
document.activeElement.blur();
}
}
//暂停
function pause(){
isPaused = true;
document.getElementById("btnPlay").disabled = false;
document.getElementById("btnPause").disabled = true;
timer = window.clearInterval(timer);
document.onkeydown = null;
}
//重新开始
function restart(){
contrllor = null;
contrllor_next = null;
elGameZone =null;
elNextZone = null;
window.clearInterval(timer);
point = 0;
level = 1;
isPaused = false;
initGame();
play();
}
//键盘控制
function gameControl(event){
//在IE9下面，event为未定义，必须从window.event中才能取到。
var key = window.event ? window.event.keyCode : (event.which ? event.which : event.charCode);
if(key == 38){
//上
}else if(key == 40){
//下
contrllor.moveDown();
}else if(key == 37){
//左
contrllor.moveLeft();
}else if(key == 39){
//右
contrllor.moveRight();
}else if(key == 32){
//空格 变形
contrllor.transform();
}
}
//游戏主控逻辑
function start(){
if(contrllor.canMoveDown()){
contrllor.moveDown();
}else{
//行消除及下落处理
contrllor.processRows();
//生成新的方块元素
if(contrllor.block.getTop() <=0){
alert("Game Over!");
window.clearInterval(timer);
document.onkeydown = null;
return;
}
contrllor.block = null;
contrllor.generateBlock(0,4,contrllor_next.block.block_type);
//预览区元素擦除
contrllor_next.easerBlock();
window.clearInterval(timer);
//预览区生成新的预览元素
contrllor_next.generateBlock(0,0,-1);
timer = window.setInterval(start, pointLevel[level]);
}
}
//创建游戏区和预览显示区
function createGameZone(row,col,isNext){
var data = new Array();
data.push('');
for(var i=0; i < row; i++){
if(!isNext){
data.push('');
}else{
data.push('
');
}
for(var j=0; j< col; j++){
if(!isNext){
data.push(' | ');
}else{
data.push(' | ');
}
}
data.push('
');
}
data.push('
');
return data.join('');
}
//俄罗斯方块元素
function Block(row, col, block_type){
this.r = row;
this.c = col;
this.block_type = block_type;
this.transform = 0;
this.boxes = new Array();
this.createBoxes = function(boxes_data){
if(boxes_data != null && boxes_data.length > 0){
for(var i=0; i< 4;i++){
this.boxes[i] = new Box(boxes_data[i][0], boxes_data[i][1]);
}
}
}
this.generateBoxes = function(){
var boxes_data = {};
var tf = this.transform % 4;
switch(block_type){
case 0:// ■ ■ ■ ■
if(tf == 0 || tf == 2){
boxes_data = [[this.r, this.c],[this.r, this.c+1],[this.r, this.c+2],[this.r, this.c+3]];
}else if(tf == 1 || tf == 3){
boxes_data = [[this.r, this.c],[this.r+1, this.c],[this.r+2, this.c],[this.r+3, this.c]];
}
break;
case 1:
//■ ■
//■ ■
boxes_data = [[this.r, this.c],[this.r, this.c+1],[this.r+1, this.c],[this.r+1, this.c+1]];
break;
case 2:// ■ ■ ■
// ■
if(tf == 0){
boxes_data = [[this.r, this.c],[this.r, this.c+1],[this.r, this.c+2],[this.r+1, this.c+1]];
}else if(tf == 1){
// ■
//■ ■
// ■
boxes_data = [[this.r, this.c+1],[this.r+1, this.c],[this.r+1, this.c+1],[this.r+2, this.c+1]];
}else if(tf == 2){
// ■
//■ ■ ■
boxes_data = [[this.r, this.c+1],[this.r+1, this.c],[this.r+1, this.c+1],[this.r+1, this.c+2]];
}else if(tf == 3){
// ■
// ■ ■
// ■
boxes_data = [[this.r,this.c],[this.r+1, this.c],[this.r+1, this.c+1],[this.r+2, this.c]];
}
break;
case 3:// ■ ■
// ■ ■
if(tf == 0 || tf == 2){
boxes_data = [[this.r, this.c],[this.r, this.c+1],[this.r+1, this.c+1],[this.r+1, this.c+2]];
}else if(tf == 1 || tf == 3){
// ■
//■ ■
//■
boxes_data = [[this.r, this.c+1],[this.r+1, this.c],[this.r+1, this.c+1],[this.r+2, this.c]];
}
break;
case 4:// ■ ■
// ■ ■
if(tf == 0 || tf == 2){
boxes_data = [[this.r, this.c+1],[this.r, this.c+2],[this.r+1, this.c],[this.r+1, this.c+1]];
}else if(tf == 1 || tf == 3){
// ■
// ■ ■
// ■
boxes_data = [[this.r, this.c],[this.r+1, this.c],[this.r+1, this.c+1],[this.r+2, this.c+1]];
}
break;
case 5:// ■
// ■
// ■ ■
if(tf == 0){
boxes_data = [[this.r, this.c+1],[this.r+1, this.c+1],[this.r+2, this.c+1],[this.r+2, this.c]];
}else if(tf == 1){
//
//■
//■ ■ ■
boxes_data = [[this.r, this.c],[this.r+1, this.c],[this.r+1, this.c+1],[this.r+1, this.c+2]];
}else if(tf == 2){
// ■ ■
// ■
// ■
boxes_data = [[this.r, this.c],[this.r, this.c+1],[this.r+1,this.c],[this.r+2, this.c]];
}else if(tf == 3){
// ■ ■ ■
// ■
boxes_data = [[this.r, this.c],[this.r, this.c+1],[this.r, this.c+2],[this.r+1, this.c+2]];
}
break;
case 6:// ■
// ■
// ■ ■
if(tf == 0){
boxes_data = [[this.r, this.c],[this.r+1,this.c],[this.r+2, this.c],[this.r+2, this.c+1]];
}else if(tf == 1){
//
//■ ■ ■
//■
boxes_data = [[this.r, this.c],[this.r, this.c+1],[this.r, this.c+2],[this.r+1, this.c]];
}else if(tf == 2){
//■ ■
// ■
// ■
boxes_data = [[this.r, this.c],[this.r, this.c+1],[this.r+1, this.c+1],[this.r+2, this.c+1]];
}else if(tf == 3){
// ■
// ■ ■ ■
//
boxes_data = [[this.r, this.c+2],[this.r+1, this.c],[this.r+1, this.c+1],[this.r+1, this.c+2]];
}
break;
}
return boxes_data;
}
this.mvR = function(){
if(this.boxes != null){
for(var i=0,length=this.boxes.length; i
= zone_row_max || r < 0 || c >= zone_col_max || c < 0){
this.block.transform = org_tf;
return false;
}
id = "row_" + r + "col_" + c;
if(!this.block.isCurBox(r,c)){
if(document.getElementById(id)){
if(document.getElementById(id).className == "td_block"){
this.block.transform = org_tf;
return false;
}
}
}
}
this.block.transform = org_tf;
return true;
}
//方块显示
this.dispBlock = function(){
if(this.block != null){
for(var i=0; i < this.block.boxes.length; i++){
var r = this.block.boxes[i].row;
var c = this.block.boxes[i].col;
var id="";
if(!isNext){
id = "row_" + r + "col_"+ c;
}else{
id = "next_row_" + r + "col_"+ c;
}
document.getElementById(id).className = "td_block";
}
}
}
//擦除方块
this.easerBlock = function(){
if(this.block != null){
for(var i=0; i < this.block.boxes.length; i++){
var r = this.block.boxes[i].row;
var c = this.block.boxes[i].col;
var id="";
if(!isNext){
id = "row_" + r + "col_"+ c;
}else{
id = "next_row_" + r + "col_"+ c;
}
document.getElementById(id).className = "td_bg";
}
}
}
//下移
this.moveDown = function(){
if(this.block != null){
if(this.canMoveDown()){
this.easerBlock();
this.block.mvD();
this.dispBlock();
}
}
}
this.canMoveDown = function(){
var canMovedown = this.block.getBottom() < (zone_row_max-1);
if(!canMovedown) return false;
//下一行如果有方块，不能移动
return this.canMove('D');
}
//能否向右，向下，向左移动
this.canMove = function(side){
var canMovedown = true;
var boxes = this.block.boxes;
for(var i=0; i < boxes.length; i++){
var r = boxes[i].row;
var c = boxes[i].col;
var id = "";
switch(side){
case "D":
id = "row_" + (r+1) + "col_" + c;
r = r+1;
break;
case "R":
id = "row_" + r + "col_" + (c+1);
c = c + 1;
break;
case "L":
id = "row_" + r + "col_" + (c-1);
c = c - 1;
break;
}
if(!this.block.isCurBox(r,c)){
if(document.getElementById(id).className == "td_block"){
return false;
}else{
canMovedown = canMovedown && true;
}
}
}
return canMovedown;
}
//右移
this.moveRight = function(){
if(this.block != null){
if(this.canMoveRight()){
this.easerBlock();
this.block.mvR();
this.dispBlock();
}
}
}
this.canMoveRight = function(){
var canMovedown = this.block.getRight() < (zone_col_max-1);
if(!canMovedown) return false;
//右边如果有方块，不能移动
return this.canMove('R');
}
//左移
this.moveLeft = function(){
if(this.block != null){
if(this.canMoveLeft()){
this.easerBlock();
this.block.mvL();
this.dispBlock();
}
}
}
this.canMoveLeft = function(){
var canMovedown = this.block.getLeft() > 0;
if(!canMovedown) return false;
//左边如果有方块，不能移动
return this.canMove('L');
}
//行消除及下落
this.processRows = function(){
for(var r=zone_row_max-1; r >=0; r--){
//可以消除
if(this.isFullRow(r)){
//消除
this.delRow(r);
//积分计算
point += get_point_per;
//等级计算
level = parseInt((point / level_point_per) + 1);
level = (level > (pointLevel.length -1)) ? (pointLevel.length-1) : level;
if(document.getElementById("curLevel").innerText != undefined){
document.getElementById("curPoint").innerText = "" + point;
document.getElementById("curLevel").innerText = "" + level;
}else{
document.getElementById("curPoint").textContent = "" + point;
document.getElementById("curLevel").textContent = "" + level;
}
//方块下落处理
for(var i=r; i >=1; i--){
var j = (i-1)>0 ? (i-1) : 0;
for(var m = 0; m < zone_col_max; m++){
var des_id = "row_" + i + "col_" + m;
var org_id = "row_" + j + "col_" + m;
document.getElementById(des_id).className = document.getElementById(org_id).className;
}
}
r = r + 1;
}
}
}
this.delRow = function(row){
for(var i=0; i < zone_col_max; i++){
var id = "row_" + row + "col_" + i;
document.getElementById(id).className = "td_bg";
}
}
this.isThisRowHasBox = function(row){
var hasBox = false;
for(var i=0; i < zone_col_max; i++){
var id = "row_" + row + "col_" + i;
if(document.getElementById(id).className == "td_block"){
return true;
}
}
return hasBox;
}
this.isFullRow = function(row){
var hasBox = true;
for(var i=0; i < zone_col_max; i++){
var id = "row_" + row + "col_" + i;
if(document.getElementById(id).className != "td_block"){
return false;
}
}
return hasBox;
}
}
经测试，在ie9，firefox17，chrome23下面运行都没有问题。拿出来和大家分享一下
- block.zip (4.6 KB)
- 下载次数: 115
