javascript實現打磚塊小游戲

本篇文章給大家通過代碼示例介紹一下利用原生js實現html5打磚塊小游戲的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

前言

PS：本次項目中使用了大量 es6 語法，故對于 es6 語法不太熟悉的小伙伴最好能先了解一些基本的原理再繼續閱讀。

首先，先說明一下做這個系列的目的：其實主要源于博主希望熟練使用 canvas 的相關 api ，同時對小游戲的實現邏輯比較感興趣，所以希望通過這一系列的小游戲來提升自身編程能力；關于 es6 語法，個人認為以后 es6 語法會越來越普及，所以算是提前熟悉語法使用技巧。小游戲的實現邏輯上可能并不完善，也許會有一些 bug ，但是畢竟只是為了提升編程能力與技巧，希望大家不要太較真

作為第一次分享，我選擇打磚塊這個邏輯不算太復雜的小游戲。同時，為了接近真實游戲效果，在游戲中也添加了關卡，磚塊血量，以及物理碰撞模型的簡略實現。其實關注游戲實現邏輯就好了

線上演示地址：http://demo.jb51.net/js/2018/h6-game-blockBreaker

github地址：https://github.com/yangyunhe369/h6-game-blockBreaker

本地下載地址：http://xiazai.jb51.net/201801/yuanma/h6-game-blockBreaker(jb51.net).rar

ps：github地址和本地下載有代碼演示，以及源碼可供參考，線上演示地址可供預覽

先上一個游戲完成后的截圖

游戲工程目錄如下

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

游戲實現邏輯

這里對游戲中需要繪制的擋板、小球、磚塊、計分板都進行了實例化，并將游戲主要運行邏輯單獨進行實例化

擋板 Paddle

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

擋板類：主要會定義其坐標位置、圖片大小、x 軸位移速度、對小球反彈速度的控制等，再根據不同按鍵響應 moveLeft 和 moveRight 移動事件，collide 方法檢測小球與擋板是否碰撞，并返回布爾值

小球 Ball

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

小球類：其大部分屬性與擋板類似，主要通過 move 方法控制小球運動軌跡

磚塊 Block

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

磚塊類：會有兩個屬性不同，分別是 life 和 是否存活。然后，在小球和磚塊撞擊時，調用 kill 方法扣除當前磚塊血量，當血量為0時，清除磚塊。collide 方法檢測小球與磚塊是否碰撞，并返回布爾值

計分板 Score

class Score {
 constructor (_main) {
 let s = {
 x: _main.score_x,  // x 軸坐標
 y: _main.score_y,  // y 軸坐標
 text: '分數：',   // 文本分數
 textLv: '關卡：',  // 關卡文本
 score: 200,   // 每個磚塊對應分數
 allScore: 0,   // 總分
 blockList: _main.blockList,  // 磚塊對象集合
 blockListLen: _main.blockList.length, // 磚塊總數量
 lv: _main.LV,   // 當前關卡
 }
 Object.assign(this, s)
 }
 // 計算總分
 computeScore () {
 ...
 }
}

分數類：會記錄當前分數、關卡數，其中 computeScore 方法會在小球碰撞磚塊且磚塊血量為0時調用，并累加總分

場景 Scene

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

場景類：主要是根據游戲難度級別，繪制不同關卡及磚塊集合（目前只生成了三個關卡）。其中 creatBlockList 方法先生成所有磚塊的二維坐標數組，再調用 initBlockList 方法進行所有磚塊的實例化

游戲主邏輯 Game

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

游戲核心類：這里包括游戲主要運行邏輯，包括但不限于以下幾點

• 繪制游戲整個場景
• 調用定時器逐幀繪制動畫
• 游戲通關及游戲結束判定
• 綁定按鈕事件
• 邊界檢測處理函數
• 碰撞檢測處理函數

入口函數 _main

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

入口函數：實現了游戲中需要的所有類的實例化，并進行游戲的初始化

以上就是利用原生js實現html5打磚塊小游戲（代碼示例）的詳細內容，更多請關注億速云其它相關文章！