.
├─ index.html // 首頁html
│ 
├─ css // css樣式資源文件
├─ images // 圖片資源文件 
└─ js
 ├─ common.js // 公共js方法
 ├─ game.js // 游戲主要運(yùn)行邏輯
 └─ scene.js // 游戲場景相關(guān)類

class Paddle {
 constructor (_main) {
 let p = {
 x: _main.paddle_x,  // x 軸坐標(biāo)
 y: _main.paddle_y,  // y 軸坐標(biāo)
 w: 102,  // 圖片寬度
 h: 22,  // 圖片高度
 speed: 10,  // x軸移動(dòng)速度
 ballSpeedMax: 8,  // 小球反彈速度最大值
 image: imageFromPath(allImg.paddle), // 引入圖片對(duì)象
 isLeftMove: true,  // 能否左移
 isRightMove: true,  // 能否右移
 }
 Object.assign(this, p)
 }
 // 向左移動(dòng)
 moveLeft () {
 ...
 }
 // 向右移動(dòng)
 moveRight () {
 ...
 }
 // 小球、擋板碰撞檢測
 collide (ball) {
 ...
 }
 // 計(jì)算小球、擋板碰撞后x軸速度值
 collideRange (ball) {
 ...
 }
}

class Ball {
 constructor (_main) {
 let b = {
 x: _main.ball_x, // x 軸坐標(biāo)
 y: _main.ball_y, // y 軸坐標(biāo)
 w: 18, // 圖片寬度
 h: 18, // 圖片高度
 speedX: 1, // x 軸速度
 speedY: 5, // y 軸速度
 image: imageFromPath(allImg.ball), // 圖片對(duì)象
 fired: false, // 是否運(yùn)動(dòng)，默認(rèn)靜止不動(dòng)
 }
 Object.assign(this, b)
 }
 move (game) {
 ...
 }
}

class Block {
 constructor (x, y, life = 1) {
 let bk = {
 x: x,     // x 軸坐標(biāo)
 y: y,     // y 軸坐標(biāo)
 w: 50,     // 圖片寬度
 h: 20,     // 圖片高度
 image: life == 1 ? imageFromPath(allImg.block1) : imageFromPath(allImg.block2), // 圖片對(duì)象
 life: life,     // 生命值
 alive: true,     // 是否存活
 }
 Object.assign(this, bk)
 }
 // 消除磚塊
 kill () {
 ...
 }
 // 小球、磚塊碰撞檢測
 collide (ball) {
 ...
 }
 // 計(jì)算小球、磚塊碰撞后x軸速度方向
 collideBlockHorn (ball) {
 ...
 }
}

class Score {
 constructor (_main) {
 let s = {
 x: _main.score_x,  // x 軸坐標(biāo)
 y: _main.score_y,  // y 軸坐標(biāo)
 text: '分?jǐn)?shù)：',   // 文本分?jǐn)?shù)
 textLv: '關(guān)卡：',  // 關(guān)卡文本
 score: 200,   // 每個(gè)磚塊對(duì)應(yīng)分?jǐn)?shù)
 allScore: 0,   // 總分
 blockList: _main.blockList,  // 磚塊對(duì)象集合
 blockListLen: _main.blockList.length, // 磚塊總數(shù)量
 lv: _main.LV,   // 當(dāng)前關(guān)卡
 }
 Object.assign(this, s)
 }
 // 計(jì)算總分
 computeScore () {
 ...
 }
}

class Scene {
 constructor (lv) {
 let s = {
 lv: lv,   // 游戲難度級(jí)別
 canvas: document.getElementById("canvas"), // canvas 對(duì)象
 blockList: [],   // 磚塊坐標(biāo)集合
 }
 Object.assign(this, s)
 }
 // 實(shí)例化所有磚塊對(duì)象
 initBlockList () {
 ...
 }
 // 創(chuàng)建磚塊坐標(biāo)二維數(shù)組，并生成不同關(guān)卡
 creatBlockList () {
 ...
 }
}

class Game {
 constructor (fps = 60) {
 let g = {
 actions: {},    // 記錄按鍵動(dòng)作
 keydowns: {},    // 記錄按鍵 keycode
 state: 1,    // 游戲狀態(tài)值，初始默認(rèn)為1
 state_START: 1,   // 開始游戲
 state_RUNNING: 2,   // 游戲開始運(yùn)行
 state_STOP: 3,   // 暫停游戲
 state_GAMEOVER: 4,   // 游戲結(jié)束
 state_UPDATE: 5,   // 游戲通關(guān)
 canvas: document.getElementById("canvas"),  // canvas 元素
 context: document.getElementById("canvas").getContext("2d"), // canvas 畫布
 timer: null,    // 輪詢定時(shí)器
 fps: fps,    // 動(dòng)畫幀數(shù)，默認(rèn)60
 }
 Object.assign(this, g)
 }
 ...
}

let _main = {
 LV: 1,  // 初始關(guān)卡
 MAXLV: 3,  // 最終關(guān)卡
 scene: null,  // 場景對(duì)象
 blockList: null,  // 所有磚塊對(duì)象集合
 ball: null,  // 小球?qū)ο?
 paddle: null,  // 擋板對(duì)象
 score: null,  // 計(jì)分板對(duì)象
 ball_x: 491,  // 小球默認(rèn) x 軸坐標(biāo)
 ball_y: 432,  // 小球默認(rèn) y 軸坐標(biāo)
 paddle_x: 449,  // 擋板默認(rèn) x 軸坐標(biāo)
 paddle_y: 450,  // 擋板默認(rèn) y 軸坐標(biāo)
 score_x: 10,  // 計(jì)分板默認(rèn) x 軸坐標(biāo)
 score_y: 30,  // 計(jì)分板默認(rèn) y 軸坐標(biāo)
 fps: 60,  // 游戲運(yùn)行幀數(shù)
 game: null,  // 游戲主要邏輯對(duì)象
 start: function () {
 let self = this
 /**
 * 生成場景（根據(jù)游戲難度級(jí)別不同，生成不同關(guān)卡）
 */
 self.scene = new Scene(self.LV)
 // 實(shí)例化所有磚塊對(duì)象集合
 self.blockList = self.scene.initBlockList()
 /**
 * 小球
 */
 self.ball = new Ball(self)
 /**
 * 擋板
 */
 self.paddle = new Paddle(self)
 /**
 * 計(jì)分板
 */
 self.score = new Score(self)
 /**
 * 游戲主要邏輯
 */
 self.game = new Game(self.fps)
 /**
 * 游戲初始化
 */
 self.game.init(self)
 }
}