JS高级—贪吃蛇游戏

贪吃蛇游戏——

分析

我们可以将整个游戏中的内容抽象成三个对象

• 游戏对象Game
• 蛇对象Snake
• 食物对象Food

食物对象Food

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

  • x
  • y
  • width
  • height
  • color

• 通过原型设置方法

  • render随机创建一个食物对象并输出到map上

• 自调用函数进行封装，通过window暴露Food对象

蛇对象Snake

• 创建Snake的构造函数，并设置属性
  • width
  • height
  • body
  • direction
• 通过原型设置方法
  • render随机创建一个蛇对象输出在map上
• 通过自调用函数进行封装，通过window暴露Snake对象

游戏对象Game

• 创建Game的构造函数
  • food
  • snake
  • map
• 通过原型设置方法
  • start 开始游戏，绘制所有的游戏对象，渲染食物对象和蛇对象
• 通过自调用函数进行封装，widow暴露Game对象

化简

• 如果是单独的js文件，就会发送多次请求，会消耗事件
• 可以将所有的js打包成为一个js文件
• 将js进行打包压缩
  • 在线压缩工具

自调用函数作用域

• 为了不添加全局变量污染，就需要使用匿名函数，自调用函数IIFE，关住作用域

  • （将所有的函数写进来）（）
  • 如何在外面调用IIFE中的函数，我们使用window对象暴露Food对象

• 问题

  • 必须要添加；否则报错

• 参数

  • window可以帮助传参数
  • undefined防止在IE8以下版本被篡改
  • 下篇继承和函数进阶期待你的查看~