基于Canvas和React极简游戏(一)

游戏设计思路

首先游戏骨架是游戏引擎

游戏引擎包括这几个部分：

• 游戏循环
• 绘制精灵
• 碰撞检测
• 帧速率更新
• 暂停游戏
• 事件处理
• 图片加载
  这个极简游戏是基于这个骨架搭建起来的，考虑到游戏引擎实际上是类似库一样的提供一些功能API让你使用，所以游戏逻辑与游戏引擎其实是可以完全解耦的。

游戏的业务逻辑主要是：

• 背景滚动的实现
• 游戏暂停恢复的处理
• 启动游戏(游戏加载)和重置游戏的处理
• 分数的记录和显示，分数更新，Score模块
• 生成符合游戏规则的颜色数组，矩形颜色显示模块
• Canvas鼠标事件处理
• 观察者模式事件处理模块
• 精灵的上抛，下落行为的逻辑模块

使用React编写UI组件包括
- 游戏结束UI模块
- 暂停UI模块
- 进度条模块
- 气球以及分数显示模块
- 分数排名显示模块(暂未通过调试)

React主要作用
React主要是绘制了这几个UI组件，并且负责UI相关的逻辑处理。
包括显示和隐藏这些模块，鼠标事件响应处理，更新分数，更新气球等。

我把这个 miniGame的实现看作是业务逻辑的实现。
因为我希望我的react组件可以复用，而不是嵌入太多业务逻辑的代码。
所以import 这个miniGame中的某几个函数给我用就行了。

游戏规则

小矩形从左往右运动，(实际是背景滚动造成的视差)
1. 小矩形自己有一个颜色list，表示自己所得到的分数，经过10个矩形就会增加一种颜色到myColor
2. 小矩形颜色与底部矩形颜色一样的话就继续保持，不一样就会掉落
3. 矩形的颜色是(随机的颜色数组ranColor+myColor） ， 每隔2个矩形就添加一个随机颜色中的一个 2:1的比例吧。
4. 走完所有的矩形得到所有颜色就算赢了。一共设置了150个矩形，11种颜色。

回顾精灵

制作动画，要把这些基本功能封装为JS对象。 精灵：就是集成到动画之中的图形对象。
不影响动画背景的情况下移动精灵，并赋予他们各种行为！ 不同的精灵对象有不同的行为！！！！！！！

精灵与设计模式

策略模式Strategy + 命令模式 command
策略模式用于将精灵与绘制器解耦decouple
命令模式用于实现精灵的动作

精灵绘制器
Sprite对象与绘制其内容的绘制器对象之间是解耦的 decoupled
程序可以在运行时为精灵对象动态设定 绘制器，极大提高了程序的灵活度。
例如： 实现一个精灵动画制作器，每隔一段时间就将精灵的绘制器交换一次。
Painter对象只需要实现： void paint(sprite,context) 方法

所有Painter对象归纳为以下三类：
描边与填充绘制器 : canvas API绘制精灵
图像绘制器 : 绘制图像image ，例如drawImage
精灵表绘制器 : 绘制精灵表中的单个精灵

游戏中的精灵绘制函数

    //Painter
    ballPainter={
        paint:function(sprite,context){
            let x=sprite.left+sprite.width,
                y=sprite.top+sprite.height,
                width=sprite.width,
                height=sprite.height;

            context.save();
            Arc.drawRoundedRect(BALL_STROKE_STYLE,BALL_FILL_STYLES,
                                            x,y,width,height,CORNER_RADIUS)
            context.restore();
        }
    },

精灵行为与游戏循环

定义：只要实现了execute方法的对象，都可以叫做行为。
该方法一般会以某种方式来修改精灵的属性，比如移动其位置，或者是修改其外观。
精灵含有一个行为对象数组，它的update()方法会遍历该数组，使每个行为对象都得以执行一次。 我们可以把行为封装为对象，在程序运行的时候将它添加到多个精灵之中！可以根据需要向任何精灵对象中添加一定数量的行为对象。精灵的update()方法会从数组的第一个行为对象开始，一直遍历到最后一个对象依次调用execute方法。

精灵行为 重力gravity行为， 二次弹跳，
上抛