欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 微测试 > JavaScript >

    JavaScript飞机大战小游戏源代码免费下载

    2019-07-11 16:14 来源/作者:懒人模板 分类:JavaScript  « »
    部分代码如下
    import Sprite   from '../base/sprite'
    import Bullet   from './bullet'
    import DataBus  from '../databus'
    import Constants from '../common/constants'
     
    const screenWidth    = window.innerWidth
    const screenHeight   = window.innerHeight
     
    // 玩家相关常量设置
    const PLAYER_IMG_SRC = 'images/hero.png'
    const PLAYER_WIDTH   = 80
    const PLAYER_HEIGHT  = 80
     
    let databus = new DataBus()
     
    const Config = require('../common/config.js').Config
     
    export default class Player extends Sprite {
      constructor() {
        super(PLAYER_IMG_SRC, PLAYER_WIDTH, PLAYER_HEIGHT)
     
        // 玩家默认处于屏幕底部居中位置
        this.x = screenWidth / 2 - this.width / 2
        this.y = screenHeight - this.height - 30
     
        // 用于在手指移动的时候标识手指是否已经在飞机上了
        this.touched = false
     
      }
     
      /**
       * 当手指触摸屏幕的时候
       * 判断手指是否在飞机上
       * @param {Number} x: 手指的X轴坐标
       * @param {Number} y: 手指的Y轴坐标
       * @return {Boolean}: 用于标识手指是否在飞机上的布尔值
       */
      checkIsFingerOnAir(x, y) {
        const deviation = 30
     
        return !!(   x >= this.x - deviation
                  && y >= this.y - deviation
                  && x <= this.x + this.width + deviation
                  && y <= this.y + this.height + deviation  )
      }
     
      /**
       * 根据手指的位置设置飞机的位置
       * 保证手指处于飞机中间
       * 同时限定飞机的活动范围限制在屏幕中
       */
      setAirPosAcrossFingerPosZ(x, y) {
        let disX = x - this.width / 2
        let disY = y - this.height / 2
     
        if ( disX < 0 )
          disX = 0
     
        else if ( disX > screenWidth - this.width )
          disX = screenWidth - this.width
     
        if ( disY <= 0 )
          disY = 0
     
        else if ( disY > screenHeight - this.height )
          disY = screenHeight - this.height
     
        this.x = disX
        this.y = disY
      }
     
      /**
       * 玩家响应手指的触摸事件
       * 改变战机的位置
       */
      onTouchEvent(type, x, y, callback) {
        switch (type){
          case 'touchstart':
            if (this.checkIsFingerOnAir(x, y)) {
              this.touched = true
              this.setAirPosAcrossFingerPosZ(x, y)
            }
            break;
          case 'touchmove':
            if (this.touched)
              this.setAirPosAcrossFingerPosZ(x, y)
            break;
          case 'touchend':
            this.touched = false
            break;
        }
      }
     
      /**
       * 玩家射击操作
       * 射击时机由外部决定
       */
      shoot() {
        let bullets = []
        let bulletNum = Constants.Bullet.Types.indexOf(Config.Bullet.Type) + 1
        for (let i = 0; i < bulletNum; i++)
          bullets.push(databus.pool.getItemByClass('bullet', Bullet))
     
        bullets.forEach( (bullet, index) => {
          bullet.init(
            this.x + this.width * (index+1) / (bulletNum+1) - bullet.width / 2,
            this.y - 10,
            Config.Bullet.Speed
          )
          databus.bullets.push(bullet)
        })
      }
    }
     

    点击扫描效果预览 免费下载 免登陆网盘下载
    S
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议