module4-02-面向对象编程案例 随机方块、贪吃蛇

面向对象编程案例 随机方块、贪吃蛇

一、随机方块

1.1 设计思路

  • 主要是为了理解面向对象编程

  • 主要分为两个主体对象

  • 第一个

    • 管理随机方块的生成

    • 高度,宽度,位置等

  • 第二个

    • 工具对象

    • 比如生成随机数、随机rgb

二、贪吃蛇

分析对象

  • 游戏对象 Game

  • 蛇对象 Snake

  • 食物对象 Food

2.1 创建食物对象

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

    • x、y、width、height、color

  • 通过原型设置方法

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

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

2.2 创建蛇对象

  • 创建Snake的构造函数,并设置属性

    • width:蛇节的宽度 默认20

    • height:蛇节的高度 默认20

    • body:数组,蛇的头部和身体,第一个位置是蛇头

    • direction:蛇运动的方向 默认right 可以实left top bottom

  • 通过原型设置方法

    • render:随机创建一个蛇对象,并输出到map上

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

2.3 创建游戏对象

  • 创建Game的构造函数,并设置属性

    • food

    • snake

    • map

  • 通过原型设置方法

    • start:开始游戏(绘制所有游戏对象,渲染食物对象和蛇对象)

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

2.4 游戏逻辑

写蛇的move方法

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

  • ① 让蛇动起来,把蛇身体的每一部分往前移动一下

    • 每次动都要执行删除原本的身体

    • 在蛇对象中蛇每移动一次,都要把原来的部分删除掉再从新渲染

    • 可以参考选择水果案例保证每一个都执行可以用i = length - 1的for循环或者while

  • ② 蛇头部分根据不同的方向决定往哪里移动

蛇自动动起来

  • 可以封装一个私有函数(在闭包里面定义的函数),在闭包里面定义一个变量that,创建构造函数的时候让that指向this就可以让这个私有函数访问到Snake

  • 然后增加判断条件,计算出蛇头的xy然后跟最大的maxX,maxY进行比较,超出则停止计时器

蛇改变方向

  • 封装一个私有函数bindKey,绑定一个onkeydown时间,然后根据e.keycode来判断按下了什么键再决定direction

蛇吃到食物

  • 放在蛇动起来的那个函数中,判断蛇头和食物的位置是否相等,相等的话为body增加一个与最后一节蛇身相同的值

2.5 自调用函数的问题

  • 在整合所有文件的时候会出现两个(function () {...})()重叠的情况

  • 如果没有加分号的话,会认为第一个括号为上一段表达式的调用(即把上一个表达式看成函数),一般会报错,因为上一个表达式一般不返回函数。

  • 为了避免这种情况,可以在两个括号的开头和结尾都加上分号

2.6 自调用函数的参数

  • 一般可以为自调用函数参数传入(window,undefined)

  • 原因是将全局作用域的window变成局部作用域,更符合查找规则,同时可以减少总字符数

  • 低版本的浏览器有时候对于undefined有不同的定义(比如undefined会被更改),传进去以防万一

2.7 遇到的问题

  • 上下左右是否能按与并发问题

    • 先判断是否可以按下(比如向上运动,就不可以再按上或下)将按下的键保存在数组中

  • 游戏结束蛇头在外边

    • 把蛇的渲染与body[0]的xy加减分开

  • 食物产生在蛇身

    • 记录蛇身位置,每次产生食物都要遍历是否有重叠

posted @ 2021-01-05 15:36  叻仔猪  阅读(149)  评论(0编辑  收藏  举报