贪吃蛇游戏

知识点

面向对象思想，原型添加方法的练习，私有的函数

 

功能实现

1、搭建页面

      放一个容器盛放游戏场景 div#map，设置样式。

2、分析对象

- 游戏对象
- 蛇对象
- 食物对象

3、创建食物对象

Food

    - 属性：所在位置、宽高度、颜色
      - x       
      - y
      - width
      - height
      - color       
    - 方法
      - init       随机创建一个食物对象，并输出到map上

    ①创建Food的构造函数，并设置属性        

    ②通过原型设置init方法，实现随机产生食物对象，并渲染到map上。理由：如果直接在Food的构造函数中写初始化方法，调用一次需要开辟一块内存，多次调用就要开辟多个内存。但在原型上添加方法则只需要开辟一次内存，节省了空间。

     ③通过自调用函数，进行封装，通过window暴露Food对象。------------自调用函数作用：不会发生变量污染（函数外面变量不会覆盖函数内部变量）

window.Food = Food;

4、创建蛇对象

Snake

    - 属性
      - width    蛇节的宽度 默认20
      - height   蛇节的高度 默认20
      - body     数组，蛇的头部和身体，第一个位置是蛇头
      - direction    蛇运动的方向  默认right  可以是 left  top bottom
    - 方法
      - init  把蛇渲染到map上

     ①创建Snake的构造函数，并设置属性。        

     ②通过原型设置init方法，把蛇渲染到map上。

     ③通过自调用函数，进行封装，通过window暴露Snake对象。

5、创建游戏对象

用来管理游戏中的所有对象和开始游戏 。

Game
  - 属性
    - food
    - snake
    - map             容器
  - 方法
    - start            开始游戏（绘制所有游戏对象）

     ①创建Game的构造函数，并设置属性。        

     ②通过原型设置start方法，渲染食物对象和蛇对象，即调用食物和蛇的init方法

     ③通过自调用函数，进行封装，通过window暴露Game对象。

游戏的逻辑

1、蛇移动的方法

- 在蛇对象(snake.js)中，在Snake的原型上新增move方法

1. 让蛇移动起来，把蛇身体的每一部分往前移动一下
2. 蛇头部分根据不同的方向决定往哪里移动

2、让蛇自己动起来

- 在game.js中 在原型上添加runSnake方法，开启定时器调用蛇的move和init方法，让蛇动起来
- 判断蛇是否撞墙

                var maxX = this.map.offsetWidth / this.snake.width;
                var maxY = this.map.offsetHeight / this.snake.height;
                var headX = this.snake.body[0].x;
                var headY = this.snake.body[0].y;
                //横坐标，撞墙|ू･ω･` )

                if (headX < 0 || headX >= maxX) {
                    console.log(headX+"-----"+maxX)
                    clearInterval(timerId);
                    alert('Game Over');
                }

                if (headY < 0 || headY >= maxY) {
                    clearInterval(timerId);
                    alert('Game Over');
                }

3、控制蛇的移动方向

-在game.js中 在原型上添加bindKey方法，通过键盘控制蛇的移动方向
    -e.keyCode 

4、判断蛇是否吃到食物

-在Snake的move方法中，在移动的过程中判断蛇是否吃到食物
    -如果蛇头和食物的位置重合代表吃到食物
    -吃到食物，往蛇节的最后加一节
    -吃到后，把现在的食物对象删除，并重新随机渲染一个食物对象

私有函数

-私有方法是不能被外部访问的方法
-创建私有方法：使用自调用函数包裹

有两个私有函数

-删除食物的私有函数
       -当食物被吃后需要删除原来的食物，在渲染之前就可以调用
删除蛇的私有函数
       -蛇吃到食物后需要增加一节，这时需要重新渲染小蛇，在渲染之前就可以调用

自调用函数的参数

//传入window对象
(function (window, undefined) {
  var document = window.document;

}(window, undefined))