歡迎來到懶人模板!我們專注移動互聯網,所有模板永久免費下載!
  • 首 頁
  • 當前位置:主頁 > 微測試 > 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
    * 懶人模板承諾:本站所有資源免費下載,無病毒,無彈窗,無干擾鏈接! 提點建議
    北单