JavaScript实现简易贪吃蛇（面向对象的方式）

版本更新2019-7-4

源码
体验地址

说明

使用ES6语法重构了master的代码，并且增加了以下功能：

• 开始按钮
• 暂停按钮
• 得分制度，每得5分难度增加

已解决问题

• 使用模块化思想
• 蛇不会在向右移动的时候向左转向，也不会向上移动的时候向下转向

待优化

• 如何使用canvas重构
• 加入图片
• 优化背景和蛇

---

游戏分析

这是一个简单版的贪吃蛇游戏，主要练习面向对象编程思想，方便自己的学习和理解面向对象思想。那么，要使用面向对象思想来做这个程序，所以多给自己提问：

• 什么是面向对象
• 什么是对象
• 如何找对象
• 这个游戏的对象是什么
• js不是面向对象的语言，那使用js如何实现面向对象呢

面向对象编程思想（来自百度百科）

面向对象的程序设计语言必须有描述对象及其相互之间关系的语言成分。这些程序设计语言可以归纳为以下几类：系统中一切事物皆为对象；对象是属性及其操作的封装体；对象可按其性质划分为类，对象成为类的实例；实例关系和继承关系是对象之间的静态关系；消息传递是对象之间动态联系的唯一形式，也是计算的唯一形式；方法是消息的序列。

什么是对象

我的理解是：具有某种行为或属性的某一个事物或人称为对象，总之万物皆为对象

游戏中的对象

• 游戏
• 地图
• 蛇
• 食物
• 随机数对象

js如何实现面向对象

js是一门基于面向对象的语言，但不是面向对象的，也就是说可以使用一些方法可以模拟面向对象，我们都知道面向对象具有以下特性：

• 封装
• 继承
• 多态
• 抽象

js中所有的对象的原型都最终指向了object，形成原型链，根据这个特性来实现继承，或者使用es6的语法使用class的方法来实现，其实原理就是原型链，es6不是所有的浏览器都支持，所以这里使用最原始的方法。

js没有类的概念，但是可以通过构造函数来模拟，添加属性和方法，实现封装，也可以把需要共享属性和方法放在原型对象中，实现继承。

有了这些概念，可以来实现了，其实我一开始是毫无头绪的，无从下手，但是一点点的分析慢慢就知道如何实现了。

实现

地图的显示

设置一个div创建地图，设置样式

<div class="map"></div>

.map {
   
   
            width: 800px;
            height: 600px;
            background-color: #ccc;
            position: relative;
            margin: 50px auto;
        }

随机数对象random

这里把random对象暴露在window中，设置为全局对象，方便在其他对象中使用，后面的是一样的。

//随机数自调用函数
((function (window) {
   
   
    //随机数对象的构造函数
    function Random() {
   
   

    }
    //添加方法
    Random.prototype.getRandom = function (min, max) {
   
   
        return Math.floor(Math.random() * (max - min) + min);
    };
    //将该对象设置为全局对象
    window.Random = new Random();

})(window));

食物对象food

食物首先初始化随机生成在地图上，等待蛇过来吃它。蛇吃完后马上就要再产生新的食物，但是先要把之前的食物清除，我把食物存储在一个elements数组中，方便清除。食物的坐标是食物的宽度与地图的宽度的比值。

分析食物的属性有：

• 宽（默认20px）
• 高（默认20px）
• 颜色（默认为绿色）

方法：

• 初始化食物，随机在地图上生成
• 清空食物，生成之前先把之前存在的食物先清除掉（防止一个地图全是食物，毕竟食物一次只能随机产生一次）

//创建食物对象
((function (window) {
   
   
    //创建一个数组存储食物
    var elements = [];
    //食物的构造函数
    function Food(width, height, color) {
   
   
        this.width = width || 20;
        this.height = height || 20;
        this.color = color || "green";
        this.element = document.createElement("div");
    }

    //初始食物的方法
    Food.prototype.init = function (map) {
   
   
        //初始化之前先删除地图中的元素
        remove();
        var div = this.element;
        map.appendChild(div);
        div.style.width = this.width + "px";
        div