有段时间没敲代码了,闲来无事,js写了个简单的贪吃蛇小游戏,自娱自乐。
主要思路很简单,蛇本身是一个数组,当吃下一个食物其实就是数组里push一个数。整个游戏场景是由一个个独立id的小方块组成的,这样才能定位蛇与食物的位置。
var class_game = {
column: 30, //列
row: 15, //行
box_width: 36,
box_height: 36,
//生成画布
init: function() {
for (var x = 0; x < this.column; x++) {
for (var y = 0; y < this.row; y++) {
var div = class_base.create('div');
div.setAttribute('class', 'box');
// 二维坐标转换成一维id比如:[1,1]=1*10+1=11
div.setAttribute('id', y * this.column + x);
game_location.push(y * this.column + x);
div.setAttribute('style', 'width:' + this.box_width + 'px;height:' + this.box_height + 'px;top:' + (this.box_height * y) + 'px;left:' + (this.box_width * x) + 'px;');
div.innerHTML = y * this.column + x + '<br />' + '[' + x + ',' + y + ']';
class_base.get('game_panel').appendChild(div);
};
};
}
};
2个for循环生成背景小方块的同时,可以获得一个由行和列组成的二维坐标。为了后续工作方便,需要把这些二维坐标转换成一维坐标赋予每个背景方块的id,这里有个小公式:当前行数*总列数+当前列数。
文字表达起来有点难理解,不过将每个背景方块的二维和一维坐标都显示出来就能一目了然了。
有了id,剩下的都是一些数学的计算和实现游戏逻辑了,比如把蛇的数组映射到游戏场景中,随机选择一个空闲方块生成新的食物,绑定按键监听事件等,就不贴代码了。