原生JavaScript编写俄罗斯方块
编程学习 2021-07-04 21:47www.dzhlxh.cn编程入门
本文给大家分享的是使用原生javascript实现的俄罗斯方块的代码，还没有很完善，这里放出来，算是抛砖引玉吧，希望小伙伴们能够喜欢。
首先这里感谢@jdkleo 提出的宝贵建议！
说实在的吧，我这个俄罗斯方块大家玩起来别骂我就万岁了，还没完全完成的，只完成了50%，而且还有很多BUG。
可以实现的功能：
1.掉方块
2.随机生成新方块
3.方块移动。
目前BUG还很多，由于是第一次写这么“大”的游戏，有1000多行代码，所以还请高人指点，BUG太多了。
按START开始游戏。
大家提提建议，我第一次写JS游戏。
参考了一下网上其他人的代码，但是不是照抄。
代码可以直接运行，不用引用JQUERY。
希望大神们能给点建议！！！！不甚感激！！！
Ver 0.2版本已经出来了哦（2014-12-26），最新的代码：
此次修正的东西：
1.左边右边可以移动。
2.可以旋转
3.可以消除满行的方块。
代码：
<!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">
#test
{
/*width:25px;*/
}
.t
{
width:10px;
height:10px;
border:1px solid black;
float:left;
}
body
{
margin:0 auto;
width:1000px;
height:600px;
}
/*游戏相关*/
#startGame
{
}
#lines
{
}
#level
{
}
#time
{
}
/*俄罗斯方块实体类*/
#tetris-area
{
width:auto;
height:auto;
background:blue;
}
/*JS生成的CLASS,俄罗斯方块实体*/
#tetris .block0,#tetris .block1, #tetris .block2, #tetris .block3,#tetris .block4,#tetris .block5,#tetris .block6
{
z-index:1000;
font-size:10px;
line-height:1em;
position:absolute;
width:13px;
height:13px;
border:0.5px solid red;
background:#000;
}
</style>
<script src="jquery.js"></script>
<script type="text/javascript">
//2维数组，用来存放俄罗斯方块的坐标
var xYAxis=[];
xYAxis.push([1,2],[3,4]);
//alert(xYAxis[1][0]);
//复制节点
/*$(document).ready(function(e) {
for(i=0;i<2;i++)
{
if(i==1)
{
// $("#test").append("<br>"); //加上换行符
}
$(".t").clone().appendTo("#test");
}
//动态得到test（container）的宽度，包含两边的边框BORDER
$("#test").width(($(".t").width()+2)*2+1);
});
*/
//获得区域的横坐标和纵坐标
function getArea(x,y,unit,id)
{
this.x=x;
this.y=y;
this.unit=unit; //每个单元的大小，单位为像素
this.el=document.getElementById(id); //得到ID对象
this.board=[]; //面板，即在区域范围内的元素（俄罗斯方块）
/*创建2D范围矩阵*/
for(var y=0;y<this.y;y++)
{
this.board.push(new Array());
for(var x=0;x<this.x;x++)
{
this.board[y].push(0);
}
}
/*从2D矩阵中消除元素*/
this.destroy=function()
{
for(var y=0;y<this.board.length;y++)
{
for(var x=0;x<this.board[y].length;x++)
{
if(this.board[y][x])
{
this.el.removeChild(this.board[y][x]);
this.board[y][x]=0;
}
}
}
}
//添加元素
this.addElement=function(el)
{
//得到起始元素的X开始坐标和Y开始坐标的位置（错误）
//得到X坐标的下落次数，和Y轴的左右移动的次数
var xBegin=parseInt(el.offsetLeft/unit);
var yBegin=parseInt(el.offsetTop/unit);
if(xBegin>=0&&xBegin<=this.x&&yBegin>=0&&yBegin<=this.y)
{
this.board[yBegin][xBegin]=el; //确定元素的位置
}
}
//消掉所有的行
this.removeFullLines=function()
{
var lines=0;
for(var i=this.y-1;i>0;i--)
{
if(this.linesRelated(i))
{
this.removeLines(i);
lines++;
y++;
}
}
return lines; //返回线条
}
//和线性有关的东西（判断是否满了）
this.linesRelated=function(y)
{
for(var x=0;x<this.x;x++)
{
if(!this.board[y][x]){return false;} //如果不为0的话，那么菜返回FALSE
}
return true;
};
//去掉行
this.removeLines=function(y)
{
for(var x=0;x<this.x;x++)
{
this.el.removeChild(this.board[y][x]);
this.board[y][x]=0;
}
y--;
for(;y>0;y--)
{
/*今天暂时写到这里*/
/*继续于2014-12-21*/
for(var x=0;x<this.x;x++)
{
if(this.board[y][x])
{
var el=this.board[y][x];
el.style.top=el.offsetTop+this.unit+"px";
this.board[y+1][x]=el;
this.board[y][x]=0;
}
}
}
};
//活动区域
this.getBlock=function(y,x)
{
if(y<0){return 0;}
if(y<this.y&&x<this.x)
{
return this.board[y][x];
}
else
{
throw "Area get failed!";
}
}
}
/*俄罗斯方块实体类*/
function Tetris()
{
var self =this; //自身
var operate=null;
this.area=null;
this.operate=null; //操作
this.status=new State(); //新建状态
/*初始化X,Y,单元为5或者20*/
this.x=20;
this.y=20;
this.unit=20;
this.running=null; //是否在运行中
//俄罗斯方块实体ID
this.id="tempid";
/*开始的时候暂停是FALSE的*/
this.paused=false;
//开始游戏
this.start=function()
{
self.reset(); //重新开始游戏
self.status.start();
this.area=new getArea(this.x,this.y,this.unit,"tetris-area"); //获得Area对象 ,其中TEMPID是俄罗斯方块实体类ID
this.operate=new OperateTetris(this.area,self);
//是否可以替换
if(this.operate.mayPlace())
{
//alert(1);
this.operate.place();
}
else
{
self.gameOver();
}
}
//游戏结束
this.gameOver=function()
{
self.status.stopGame(); //停止游戏
self.operate.stopGame(); //操作类停止游戏
}
/*重置游戏*/
this.reset=function()
{
if(this.operate)
{
self.operate.destroy(); //重新开始
self.operate=null;
}
if(self.area)
{
self.area.destroy();
self.area=null;
}
//隐藏游戏结束
document.getElementById("game_over").style.display="none";
document.getElementById("next_operate").style.display="block"; //下一个操作
document.getElementById("keys_Press").style.display="block"; //显示按键
self.status.reset();
self.paused=false;
document.getElementById("tetris-pause").style.display="block"; //暂停按钮
}
/*暂停游戏*/
this.pause=function()
{
if(self.operate==null)
{
return ;
}
if(self.paused)
{
self.operate.running=true;
/*这里还没写完2014-12-22*/
}
else
{
}
}
//上
this.up=function()
{
if(self.operate&&self.operate.isRunning()&&!self.operate.isStopped())
{
if(self.operate.mayRotate())
{
self.operate.rotate();
self.status.setActions(self.status.getActions()+1);
}
}
}
//下
this.down=function()
{
if(self.operate&&self.operate.isRunning()&&!self.operate.isStopped())
{
if(self.operate.mayMoveDown())
{
self.operate.moveDown();
self.status.setActions(self.status.getActions()+1);
}
}
}
//左
this.left=function()
{
if(self.operate&&self.operate.isRunning()&&!self.operate.isStopped())
{
if(self.operate.mayMoveLeft())
{
self.operate.moveLeft();
self.status.setActions(self.status.getActions()+1);
}
}
}
//右
this.right=function()
{
if(self.operate&&self.operate.isRunning()&&!self.operate.isStopped())
{
if(self.operate.mayMoveRight())
{
self.operate.moveRight();
self.status.setActions(self.status.getActions()+1);
}
}
}
//开始游戏
document.getElementById("startGame").onclick=function(){self.start()};
/