Using native js to implement HTML5 brick-breaking game (code example)

This article will introduce to you through code examples how to use native js to implement the HTML5 brick-breaking game. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Preface

PS: A lot of es6 syntax is used in this project, so For those who are not familiar with es6 syntax, it is best to understand some basic principles before continuing reading.

First of all, let me explain the purpose of this series: In fact, it is mainly because the blogger hopes to be proficient in using canvas-related APIs, and at the same time is more interested in the implementation logic of small games, so I hope to use this series of small games to Play games to improve your programming skills; regarding es6 syntax, I personally think that es6 syntax will become more and more popular in the future, so I am familiar with the grammar usage skills in advance. The implementation logic of the mini-game may not be perfect, and there may be some bugs, but after all, it is just to improve programming abilities and skills. I hope you don’t take it too seriously.

As the first time to share, I choose to break bricks. A little game with not too complicated logic. At the same time, in order to get closer to the real game effect, levels, brick health, and a simplified implementation of the physical collision model have also been added to the game. In fact, just focus on the game implementation logic

Online demo address: http://demo.jb51.net/js/2018/h5-game-blockBreaker

github address: https:/ /github.com/yangyunhe369/h5-game-blockBreaker

Local download address: http://xiazai.jb51.net/201801/yuanma/h5-game-blockBreaker(jb51.net). rar

ps: The github address and local download have code demos, as well as source code for reference, and the online demo address is available for preview

Play a game first Screenshot after completion

The game project directory is as follows

.
├─ index.html // 首页html
│ 
├─ css // css样式资源文件
├─ images // 图片资源文件 
└─ js
 ├─ common.js // 公共js方法
 ├─ game.js // 游戏主要运行逻辑
 └─ scene.js // 游戏场景相关类

Game implementation logic

Here, the baffles, balls, bricks, and scoreboards that need to be drawn in the game are instantiated, and the main running logic of the game is Instantiate separately

Baffle 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) {
 ...
 }
}

Baffle class: It mainly defines its coordinate position, picture size, x-axis displacement speed, and ball rebound speed Control, etc., and then respond to the moveLeft and moveRight movement events according to different keys. The collide method detects whether the ball collides with the baffle, and returns a Boolean value

小球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) {
 ...
 }
}

Small ball type: Most of its properties are similar to those of the baffle. The movement trajectory of the small ball is mainly controlled through the move method.

Brick 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) {
 ...
 }
}

Brick type: There will be two different attributes, namely life and whether it is alive. Then, when the ball collides with the brick, the kill method is called to deduct the current brick's blood volume. When the blood volume is 0, the brick is cleared. The collide method detects whether the ball collides with the bricks, and returns a Boolean value

ScoreboardScore

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 () {
 ...
 }
}

Score class: the current score and number of levels will be recorded, where The computeScore method will be called when the ball collides with the brick and the brick's health is 0, and the total score will be accumulated

Scene

class Scene {
 constructor (lv) {
 let s = {
 lv: lv,   // 游戏难度级别
 canvas: document.getElementById("canvas"), // canvas 对象
 blockList: [],   // 砖块坐标集合
 }
 Object.assign(this, s)
 }
 // 实例化所有砖块对象
 initBlockList () {
 ...
 }
 // 创建砖块坐标二维数组，并生成不同关卡
 creatBlockList () {
 ...
 }
}

Scene class: mainly based on Game difficulty level, drawing different levels and brick collections (currently only three levels have been generated). The creatBlockList method first generates the two-dimensional coordinate array of all bricks, and then calls the initBlockList method to instantiate all bricks

Game Main Logic 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)
 }
 ...
}

Game Core Class: This includes the main running logic of the game, including but not limited to the following points

• Draw the entire game scene
• Call the timer to draw the animation frame by frame
• Game clearance And game end determination
• Bind button event
• Boundary detection processing function
• Collision detection processing function

Entry function_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)
 }
}

Entry function: realizes the instantiation of all classes needed in the game and initializes the game

For more cool special effects, it is recommended to visit:javascript special effects collection!

The above is the detailed content of Using native js to implement HTML5 brick-breaking game (code example). For more information, please follow other related articles on the PHP Chinese website!