如何利用原生js實現html5小游戲之打磚塊

這篇文章給大家分享的是有關如何利用原生js實現html5小游戲之打磚塊的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

html是什么

html的全稱為超文本標記語言，它是一種標記語言，包含了一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和css+js配合使用并構建優雅的前端網頁。

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

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

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

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

游戲工程目錄如下

.
├─ 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小游戲之打磚塊”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！