对于小白来说用js实现俄罗斯方块还是有难度的,网上找了很多代码看,有的很长难懂,有的短小精悍,但不只用到了js还用到了框架,对于还未接触框架的小白宝宝,也只能无奈自己是小白了,自己写不出来那就找一篇纯js代码,弄懂也是一种收获吧。so 接下来就是我的理解咯,有不对的地方请多多包涵
个人觉得思路还是很重要的,那我就先以我理解之后,来说说其思路
首先整个编程过程用到了六个数组吧,第一个是全局数组shapes,存放了7种俄罗斯方块的形状,之后的数组都是动态创建并赋值的,divs[]长度为4 存放要下落的方块,div2[]长度也是4用来存放预告方块的,对应的就有shape[]用来说明下落方块的形状是怎么样,shape2[]用来存放预告方块形状的,这两个形状都是随机产生的,还有一个隐形的数组用来存放显示界面中所有方块的,个人认为最难的就是理清显示界面和抽象数组之间的关系吧,先上一个思维导图让大家直观的理清思路,之后慢慢详解代码
<style> //设置好元素样式,到时候动态创建元素,直接设置其属性 根据类名确定样式
.c {
margin: 1px;
width: 19px;
height: 19px;
background: red;
position: absolute; //下落方块样式
}
.d {
margin: 1px;
width: 19px;
height: 19px;
background: gray;
position: absolute; //下落到不能下落方块样式 其实就改变了颜色
}
.f {
top: 0px;
left: 0px;
background: black;
position: absolute; //整个游戏显示界面
}
.e {
top: 0px;
background: #151515;
position: absolute; //预告方块界面
}
.g {
width: 100px;
height: 20px;
color: white;
position: absolute; //分数显示界面
}
</style>
开始JS代码
<script type="text/javascript">
var row = 18;
var col = 10;
var announcement = 6;
var size = 20;
var isOver = false;
var shapes = ("0,1,1,1,2,1,3,1;1,0,1,1,1,2,2,2;2,0,2,1,2,2,1,2;0,1,1,1,1,2,2,2;1,2,2,2,2,1,3,1;1,1,2,1,1,2,2,2;0,2,1,2,1,1,2,2").split(";");
var tetris;
var container;
最难理解的可能就是shapes数组 .split(";");是将数组以;分割成一个个数组值,每个数组值单号代表top值,双号代表left值代表一种方块形状 此处上图