目前处于学习阶段,学习的总结,如果有错误的地方,还请指出指教!
把界面分成30*30个小方格,蛇头、身子和食物分别占据一个小方格。
定义全局变量
// 全局变量
var sw = 20, // 一个方块的宽度
sh = 20, // 一个方块的高度
tr = 30, // 行数
td = 30; // 列数
var snake = null, // 蛇的实例
food = null, // 事物实例
game = null; // 游戏实例
创建小方格的构造函数
css文件设置了小方格样式,分别有蛇头、身子和食物,通过传入不同的class属性值来实现。
参数:
x:x轴坐标(通篇原点为左上角起始点)
y:y轴坐标
classname:class属性值
function Square(x, y, classname){
this.x = x * sw;
this.y = y * sh;
this.class = classname;
this.viewContent = document.createElement('div'); // 创建方块对应的dom元素
this.viewContent.className = this.class;
this.parent = document.getElementById('snakeWrap'); // 获取方块的父级
}
添加到页面方法(创造一个小方格):
这里this是Square
Square.prototype.create = function(){
this.viewContent.style.position = 'absolute'; // 开启绝对定位
this.viewContent.style.width = sw + 'px'; // 设置宽度
this.viewContent.style.height = sh + 'px'; // 设置高度
this.viewContent.style.left = this.x + 'px'; // 设置偏移量
this.viewContent.style.top = this.y + 'px'; // 设置偏移量
this.parent.appendChild(this.viewContent); // 把要创建的节点添加到父元素中
};
从页面中移除方法:
Square.prototype.remove = function(){
this.parent.removeChild(this.viewContent);
};
创建蛇的构造函数
初始设置有一个蛇头两个圆形身体,占三个小方格,在之后的移动中,我们把它看成一个整体,用链表进行实现。
function Snake(){
this.head = null; // 存蛇头的信息
this.tail = null; // 存蛇尾的信息
this.pos = []; // 存储蛇身上的每一个方块的位置
this.dirctionNum = {
// 存储蛇走的方向,用一个对象来表示
left : {
x : -1,
y : 0,
rotate : 180
},
right : {
x : 1,
y : 0,
rotate : 0
},
up : {
x : 0,
y : -1,
rotate : -90
},
down : {
x : 0