登录 | 注册
小程序Demo/源码 +关注 已有0人关注 +发表新主题

手机砸屏游戏

发表在 2019-3-6 10:36 来自PC 复制链接 手机看帖 扫一扫!手机看帖更爽 0 292

米筷技术团队早期做测试写的小游戏,有兴趣的可以下载下来玩一下,还有不少细节是需要处理的。

手机砸屏游戏

手机砸屏游戏

以下是部分代码:
import Player from './player/player'
import DataBus from './databus'
import BackGround from './runtime/background'
import GameInfo from './runtime/gameinfo'
/**
* 游戏主函数
*/
let ctx = canvas.getContext('2d')

let databus = new DataBus()

export default class Main {
  constructor() {
    // 维护当前requestAnimationFrame的id
    this.aniId = 0

    this.restart()
  }

  restart() {
    databus.reset()
    canvas.removeEventListener(
      'touchstart',
      this.touchHandler
    )

    this.player=null
    this.bg = new BackGround(ctx)
    this.gameinfo = new GameInfo()

    //初始化玩家
    this.initplayer(ctx)

    this.bindLoop = this.loop.bind(this)
    this.hasEventBind = false

    // 清除上一局的动画
    window.cancelAnimationFrame(this.aniId);

    this.aniId = window.requestAnimationFrame(
      this.bindLoop,
      canvas
    )
  }

  /**
     * canvas重绘函数
     * 每一帧重新绘制所有的需要展示的元素
     */
  render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    this.bg.render(ctx)

    //绘制砸屏效果
    databus.player.forEach((play) => {
      play.animationRender()
    });

    //绘制玩家,比效果后绘制可以保证砸屏工具在最上面
    if (this.player != null) {
      this.player.DrawPlayer(databus.gameStart)
    }

    // 游戏未开始显示开始界面
    if (!databus.gameStart) {
      this.gameinfo.renderGameStart(ctx)

      if (!this.hasEventBind) {
        this.hasEventBind = true
        this.touchHandler = this.touchEventHandler.bind(this)
        canvas.addEventListener('touchstart', this.touchHandler)
        canvas.addEventListener('onhide', function () {
          databus.gameStart=false
          this.restart();
        })
      }
    }

  }

  // 实现游戏帧循环
  loop() {
    this.render()

    this.aniId = window.requestAnimationFrame(
      this.bindLoop,
      canvas
    )
  }

  initplayer(ctx) {
    databus.player.push(new Player(ctx, "smash","audio/smash.wav"))

  }

  startgame(e) {
    let x = e.touches[0].clientX
    let y = e.touches[0].clientY

    let area = this.gameinfo.btnArea
    if (x >= area.startX
      && x <= area.endX
      && y >= area.startY
      && y <= area.endY) {
      databus.gameStart=true;
      this.player = databus.player[0];
    }
  }

  // 游戏开始后的触摸事件处理逻辑
  touchEventHandler(e) {
    e.preventDefault()
    if (!databus.gameStart) {
      this.startgame(e);
    }
  }
}


destroyer.rar (1.9 MB, 下载次数: 0)
扫描二维码,手机查看本帖
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

返回顶部
快速回复 发贴