Canvas射擊小遊戲

分享下，結合面向對象開發 和 Canvas ，來完成的 Canvas 射擊小遊戲。

項目說明

• 概述：Canvas 射擊小遊戲要求玩家控制飛機發射子彈，消滅會移動的怪獸，若是所有消滅了則遊戲成功，若是怪獸移動到底部則遊戲失敗。
• 目標：實現一個 Cavnas 射擊小遊戲

項目結構（Src）

• index.html: 遊戲頁面
• style.css: 頁面樣式
• index.js: 頁面邏輯入口 js
• img: 存放遊戲的圖片素材
• readme.md: 項目說明文檔
• controller: 頁面涉及的全部對象拆分
• Bullet: 子彈對象
• Element: 基類
• Enemy: 怪獸類
• Plane: 飛機類
• common: 公共配置文件目錄
• gameconfig.js: 遊戲配置信息
• keyboard: 鍵盤事件
• util: 邊界判斷函數

項目演示地址

如下是已經實現的射擊遊戲的 demo 地址，你們能夠參考該遊戲進行開發： 代碼 演示地址

具體要求

一、打通遊戲總體流程 （開始->遊戲進行中->成功或者失敗）

遊戲共分爲四種狀態：遊戲準備->遊戲進行->遊戲成功或者遊戲失敗

1.一、遊戲準備

首次打開頁面，將會展示遊戲準備界面，界面有遊戲標題和和遊戲描述以及開始遊戲按鈕。

• 遊戲標題：設計遊戲
• 遊戲描述：這是一個使人慾罷不能的射擊遊戲，使用 ← 和 → 操做你的飛機，使用空格（space）進行射擊。一塊兒來消滅宇宙怪獸吧！

1.二、遊戲進行

• 畫面出現頂部一行怪獸（7個），底部中間出現一個飛機
• 玩家能夠經過鍵盤控制飛機左右移動而且發射子彈，子彈碰到怪獸則怪獸被消滅，消滅全部怪獸則顯示遊戲成功界面
• 怪獸初始統一往右移動。當怪獸移動到達邊界時，則向下移動一格，而且往相反反向移動。以次類推，直到觸碰到底部邊界，則顯示遊戲失敗界面。

1.三、遊戲成功

在每一關卡中，成功消滅全部的怪獸，則顯示遊戲經過成功。能夠點擊「再玩一次」 回到遊戲進行界面

1.四、遊戲失敗

在遊戲中，當怪獸成功突破到飛機的豎直位置，則顯示遊戲經過失敗。能夠點擊「從新開始」 回到遊戲進行界面

---

二、使用Canvas 繪製遊戲

設置遊戲場景

遊戲場地尺寸爲 700 * 600,遊戲場地分紅三個部分：

• 場景邊距區域 綠色的表示爲邊距區域，邊距長度爲30
• 怪獸移動區域: 藍色區域，尺寸爲 640 * 440
• 飛機移動區域: 黃色區域表示飛機移動區域，尺寸爲 640 * 100

2.一、實現遊戲元素 - 飛機（遊戲主角）

遊戲中飛機元素是咱們須要操做的主人公，如下是飛機元素須要注意的內容：

• 飛機尺寸爲 60 * 100
• 飛機需繪製爲飛機圖像 img/plane.png
• 可經過鍵盤左右方向鍵移動飛機元素，默認飛機移動的步伐長度爲 5，飛機不可移動出前面所講的 飛機移動區域

2.二、實現遊戲元素 - 飛機子彈

經過點擊空格鍵，飛機將射擊出子彈元素，飛機可同時射出多個子彈。如下是子彈元素須要注意的內容：

• 子彈是一根顏色爲白色豎直線條，長度爲 10，線條寬度爲 1
• 子彈初始橫座標爲飛機的正中間即 plane.x + (plane.width / 2）
• 子彈初始縱座標等於飛機的縱座標 plane.y
• 子彈會不斷往前方飛行，子彈每幀移動距離爲 10
• 當子彈元素飛出畫布時，需刪除該子彈元素
• 當子彈元素和怪獸元素髮生碰撞時，需刪除該子彈元素

2.三、實現遊戲元素 - 怪獸

遊戲中怪獸元素共有兩種狀態（存活和死亡），存活時怪獸會移動，死亡時會綻開成煙花。如下是怪獸元素須要注意的內容：

• 怪獸尺寸爲 50 * 50
• 一行怪獸元素共有7個，每一個怪獸之間間隔爲 10
• 怪獸元素處於存活狀態時，需繪製爲怪獸圖像 img/enemy.png
• 怪獸元素處於存活狀態時，每一幀移動距離爲 2
• 當最右邊的怪獸元素移動到 怪獸移動區域的左右邊界時，下一幀則往下移動，移動的距離爲 50，以下圖所示：
  

  

• 當怪獸移動超過到怪獸移動區域的底部邊界時，則遊戲結束：
  

  

• 當子彈元素和怪獸元素髮生碰撞時，怪獸元素處於死亡狀態，且怪獸元素需繪製爲爆炸圖像 img/boom.png （爆炸過程建議繪製三幀，即怪獸死亡過程持續3幀）
• 怪獸死亡過程結束後，刪除怪獸元素
• 當怪獸移動超過到怪獸移動區域的底部邊界時，則遊戲結束

2.四、實現遊戲分數

在遊戲場景左上角有一個分數元素，如下是分數元素須要注意的內容：

• 分數座標爲（20，20)，分數的文字大小 18px
• 分數默認爲0，當消滅一個怪獸，則分數加1
• 分數一直進行累加，直到遊戲結束

遊戲關卡

• 增長遊戲關卡，實現不一樣的關卡有不一樣的難度（如每一關相對上一關增長一行怪獸）

• 遊戲可經過修改配置，來修改遊戲（以下圖所示)

  /** * 遊戲相關配置 * @type {Object} */
  var CONFIG = {
    status: 'start', // 遊戲開始默認爲開始中
    level: 1, // 遊戲默認等級
    totalLevel: 6, // 總共6關
    numPerLine: 6, // 遊戲默認每行多少個怪獸
    canvasPadding: 30, // 默認畫布的間隔
    bulletSize: 10, // 默認子彈長度
    bulletSpeed: 10, // 默認子彈的移動速度
    enemySpeed: 2, // 默認敵人移動距離
    enemySize: 50, // 默認敵人的尺寸
    enemyGap: 10,  // 默認敵人之間的間距
    enemyIcon: './img/enemy.png', // 怪獸的圖像
    enemyBoomIcon: './img/boom.png', // 怪獸死亡的圖像
    enemyDirection: 'right', // 默認敵人一開始往右移動
    planeSpeed: 5, // 默認飛機每一步移動的距離
    planeSize: {
      width: 60,
      height: 100
    }, // 默認飛機的尺寸,
    planeIcon: './img/plane.png',
  };
  複製代碼