基于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行为, 二次弹跳,
上抛

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值