JS学习笔记——原生js贪吃蛇

目前处于学习阶段，学习的总结，如果有错误的地方，还请指出指教！

把界面分成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