Please enable JavaScript.

Coggle requires JavaScript to display documents.

Simple Platformer 遊戲設計 - Coggle Diagram

- - - - 玩家可左右移動、跳躍，並在平台間移動
      - 遊戲目標是收集星星、增加分數、避開炸彈
    - - HTML5 遊戲框架，可快速製作跨瀏覽器遊戲
      - 使用 Phaser.AUTO 自動選擇 WebGL 或 Canvas
  - - - width: 800、height: 600，設定遊戲畫面大小
      - type: Phaser.AUTO，決定遊戲渲染方式
    - - preload(): 載入圖片與角色素材
      - create(): 建立背景、平台、玩家與物件
      - update(): 持續更新角色控制與遊戲狀態
- - - - this.physics.add.sprite(100, 450, 'dude') 建立角色
      - 玩家一開始出現在畫面左下方附近
    - - setBounce(0.2): 落地時有輕微彈跳
      - setCollideWorldBounds(true): 限制玩家不跑出畫面
    - - left: frames 0~3，往左跑
      - turn: frame 4，停止站立
      - right: frames 5~8，往右跑
  - - - gravity: { y: 300 }，讓角色與物件往下掉
      - body 代表角色在物理系統中的身體
    - - setVelocityX(): 控制左右移動速度
      - setVelocityY(): 控制跳躍速度
  - - - createCursorKeys(): 產生 up、down、left、right
      - 在 update() 中持續偵測按鍵狀態
    - - left.isDown: 往左移動並播放 left 動畫
      - right.isDown: 往右移動並播放 right 動畫
      - 沒有按鍵: 速度歸零並播放 turn 動畫
      - up.isDown + touching.down: 角色在地面時才能跳躍
  - - - collider(player, platforms): 玩家可站在平台上
    - - collider(stars, platforms): 星星掉落後會停在平台上
    - - collider(bombs, platforms): 炸彈碰到平台後反彈
- - - - sky: 遊戲背景
      - ground: 地板與平台
      - star: 可收集物件
      - bomb: 敵人與障礙
    - - dude sprite sheet: 角色動畫圖
      - frameWidth 32、frameHeight 48，設定每格大小
  - - - this.add.image(400, 300, 'sky') 加入背景
      - Phaser 預設以物件中心點作為座標
    - - 先建立背景，避免蓋住其他物件
      - 後建立平台、角色、星星與炸彈
  - - - staticGroup(): 建立不受重力影響的平台
      - 平台是靜態物件，不會掉落或移動
    - - setScale(2): 放大底部地板
      - refreshBody(): 更新放大後的碰撞範圍
      - 不同座標建立平台，形成跳躍路線
- - - - physics.add.group(): 建立會受重力影響的動態星星
      - repeat: 11，總共產生 12 顆星星
    - - setXY: 設定星星起始位置與間距
      - stepX: 讓星星平均分布在畫面上
      - setBounceY(): 星星碰到平台後隨機彈跳
  - - - overlap(player, stars, collectStar): 偵測玩家碰到星星
    - - disableBody(true, true): 星星消失並停止物理效果
  - - - score = 0，遊戲開始分數為 0
      - scoreText 顯示在畫面左上角
    - - 每收集一顆星星 score += 10
      - scoreText.setText() 更新畫面文字
  - - - bombs = this.physics.add.group() 管理所有炸彈
      - collider(bombs, platforms): 炸彈與平台碰撞
    - - stars.countActive(true) === 0 時產生炸彈
      - 星星全部重生，遊戲難度提高
      - 炸彈產生在玩家相反方向，較公平
    - - setBounce(1): 炸彈完全反彈
      - setCollideWorldBounds(true): 碰到邊界反彈
      - setVelocity(): 設定隨機移動速度
  - - - hitBomb(): 觸發遊戲結束事件
    - - physics.pause(): 暫停物理系統
      - player.setTint(0xff0000): 玩家變紅
      - gameOver = true: 設定遊戲結束狀態