phaser框架製作遊戲的例子，加上自己的註釋

kimingw發表於2018-07-10
框架遊戲
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="js/phaser.min.js"></script>
  <style>
    body{
      margin : 0
    }
  </style>
</head>
<body>
  <script>
    // 生成配置
    const config = {
      // 型別
      type : Phaser.AUTO,
      width : 800,
      height : 600,
      //物理引擎
      physics : {
        default : 'arcade',
        arcade : {
          // 重力設定
          gravity : {y : 300},
          debug : false
        }
      },
      // 場景
      scene : {
        // 預載入
        preload,
        // 記載主要場景
        create,
        // 時時重新整理場景
        update
      }
    }

    // 生成遊戲主體
    let game = new Phaser.Game(config)
    // 生成玩家
    let player
    //　生成平臺
    let platforms
    // 生成指標
    let cursors
    // 計分器
    let score = 0
    // 計分文字
    let scoreText
    //創造炸彈
    let bombs
    //創造gameover條件
    let gameover = false

    function preload(){
      // 載入背景圖片
      this.load.image("sky","image/sky.png")
      this.load.image("bomb","image/bomb.png")
      this.load.image("ground","image/platform.png")
      this.load.image("star","image/star.png")
      this.load.spritesheet("dude","image/dude.png",{frameWidth:32,frameHeight:48})
    }

    function create(){
      // 繪製天空背景
      this.add.image(400,300,'sky')
      // 初始化遊戲平臺
      platforms = this.physics.add.staticGroup()
      // 平臺匯入圖片，並且放大，載入當中阻止穿透
      platforms.create(400, 568,'ground').setScale(2).refreshBody()
      // create(x,y,imagename)
      // 其中ｘ,y設為０的時候，以圖片中心作為原點，顯示在左上方
      platforms.create(600, 400, 'ground')
      platforms.create(50, 250, 'ground')
      platforms.create(750, 220, 'ground');

      //生成玩家
      player = this.physics.add.sprite(100,450,'dude')
      // 玩家增加反彈
      player.setBounce(0.2)
      // 玩家增加觸碰檢測
      player.setCollideWorldBounds(true)

      //初始化鍵位繫結（光這樣還不能用，在update中檢測並更新！）
      this.anims.create({
        key : 'left',
        frames : this.anims.generateFrameNumbers('dude',{start : 0,end : 3}),
        frameRate : 10,
        repeat : -1
      })

      this.anims.create({
        key : "turn",
        frames: [ { key: 'dude', frame: 4 } ],
        frameRate : 20
      })

      this.anims.create({
        key : "right",
        frames : this.anims.generateFrameNumbers('dude',{start : 5,end : 8}),
        frameRate : 10,
        repeat : -1
      })
      //這裡是初始化cursors:熱鍵
      cursors = this.input.keyboard.createCursorKeys()

      //早苗教你畫星星
      stars = this.physics.add.group({
        key : "star",
        repeat : 11,
        setXY : {x: 12, y: 0, stepX:70}
      })

      stars.children.iterate(function (child){
        //為每一顆星星加上碰撞函式
        child.setBounceY(Phaser.Math.FloatBetween(0.4,0.8))
      })

      bombs =  this.physics.add.group()
      //初始化計分器
      scoreText = this.add.text(16,16,"score 0",{fontSize : '32px',fill : "#000"})
      //這裡是把該物體繫結到遊戲平臺上去
      this.physics.add.collider(player,platforms)
      this.physics.add.collider(stars,platforms)
      this.physics.add.collider(bombs,platforms)
      //內建了碰撞函式
      //星星與遊戲人物的碰撞效果
      //1:物體1，2:物體2，3:接觸回撥函式，4:過程回撥函式，5，物件
      this.physics.add.overlap(player, stars, collectStar, null, this)
      //炸彈和遊戲任務的碰撞效果
      this.physics.add.collider(player,bombs,hitBomb,null,this)
    }

    function update (){
        if(gameover){
          return;
        }
        // 按了左鍵就左移，右鍵右移。不然就保持不動
        if (cursors.left.isDown){
            player.setVelocityX(-160);

            player.anims.play('left', true);
        }
        else if (cursors.right.isDown){
            player.setVelocityX(160);

            player.anims.play('right', true);
        }else{
            player.setVelocityX(0);

            player.anims.play('turn');
        }
        // 按了上且不是在下降狀態就可以跳
        if (cursors.up.isDown && player.body.touching.down){
            player.setVelocityY(-330);
        }
    }
    function collectStar(player,star){
      //這裡刪除star實體
      star.disableBody(true,true)

      score += 1000
      scoreText.setText('Score : '+score)
      // 如果沒有了星星
      if(stars.countActive(true) === 0){
        stars.children.iterate(function(child){
          //這裡啟用每一個小星星的實體
          child.enableBody(true,child.x,0,true,true)
        })
        //判斷玩家在哪邊，記錄另外一邊的一個位置
        var x = (player.x < 400) ? Phaser.Math.Between(400,800) : Phaser.Math.Between(0,400)
        // 繪製炸彈
        var bomb = bombs.create(x,16,'bomb')
        // 炸彈加上彈性和觸碰檢測
        bomb.setBounce(1)
        bomb.setCollideWorldBounds(true)
        bomb.setVelocity(Phaser.Math.Between(-200,200),20)
        bomb.allowGravity = false
      }
    }
    function hitBomb(){
      // 遊戲暫停
      this.physics.pause()
      // 人物變為綠色
      player.setTint(0x00ff00)
      // 人物靜止不動
      player.anims.play("turn")
      // 遊戲結束
      gameover = true
    }
  </script>
</body>
</html>

　　

相關文章