利用原生js實作html5打磚塊小遊戲（程式碼範例）

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

前言

#PS：本計畫中使用了大量es6 語法，故對於es6 文法不太熟悉的小夥伴最好能先了解一些基本的原理再繼續閱讀。

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

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

線上示範網址：http://demo.jb51.net/js/2018/h5-game-blockBreaker

github位址：https:/ /github.com/yangyunhe369/h5-game-blockBreaker

本地下載網址：http://xiazai.jb51.net/201801/yuanma/h5-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)
 }
}

入口函數：實現了遊戲中所需的所有類別的實例化，並進行遊戲的初始化

#更多酷炫特效，推薦存取：

javascript特效大全！

以上是利用原生js實作html5打磚塊小遊戲（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！