使用JavaScript学写贪吃蛇游戏1

自己的js能力真的有限，网上有很多优秀的教程，虽然也看了不少，但是对应用场景不熟悉，学习后一时很难消化，更谈不上掌握。所以就用学写游戏开始，让枯燥与快乐并从。

简单的贪吃蛇游戏

只有从简单的开始，才不会给”放弃“机会。

贪吃蛇游戏，简单的可以划分成由三个模块组成：

1. 地图
2. 蛇
3. 实物

我们新建一个文件 index.js，内容如下：

/**
 * 
 * @param {*} id 游戏容器id
 * @param {*} snake 贪吃蛇的实例化对象
 * @param {*} map 实物的实例化对象
 */
function Game(id, snake, map) {}

// 🐍 蛇
function Snake() {}

// 实物
function Food(params) {}

在js中函数即对象，所以在后边的学习中，叫法会飘忽不定🐶

Game作为游戏的入口，承担初始化：

// 实例化游戏
new Game('app', new Snake, new Food);

先把能想到的需要初始化的内容先写进去：

function Game(id, snake, food) {
    // 获取游戏挂载的元素，其实就是一个div#app
    this.mapDom = document.getElementById('id'); 
    this.snake = snake; // 🐍蛇的实例化对象
    this.food = food;  // 食物的实例化对象
    this.map = [];  // 地图数组：由很多个div组成
    this.stone = [];  // 障碍物数组
    this.timer = null; // 控制游戏主循环的句柄
    this.row = 20;  // 游戏行数
    this.col = 20; // 游戏列数
    this.cell = 20; // 格子的宽度
    this.score = 0; // 游戏得分
    this.levelScore = 20; // 游戏通关的分数

    // 初始化游戏
    // 我们会通过原形定义，包含两个主要功能：1. 初始化地图容器样式；2. 渲染地图。
    this.init() 
}

这就是第一步，先把想法列出来。

下一篇：将地图绘制到页面中。