How to implement HTML5 brick-breaking game using native js

This article mainly introduces to you the relevant information about using native js to implement the HTML5 mini game of Arkanoid. This is a small requirement encountered in recent work. The article introduces it in detail through sample code and shares the complete The source code is for everyone's reference and study. Friends who need it can follow the editor to learn together. I hope it can help everyone.

Preface

PS: A large amount of es6 syntax is used in this project, so friends who are not familiar with es6 syntax are 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

First take a screenshot after the previous game is completed

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 we instantiate the baffles, balls, bricks, and scoreboards that need to be drawn in the game, and the main running logic of the game is instantiated separately

Baffles 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, control of the ball's rebound speed, etc., and then responds to moveLeft and moveRight movement events according to different keys, and is detected by the collide method. 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: Most of its attributes are similar to the baffle, and the movement trajectory of the ball is mainly controlled through the move method

BrickBlock

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 class: 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 category: The current score and number of levels will be recorded, and the computeScore method will record the ball Called when a brick is collided and the blood volume of the brick is 0, and the total score is accumulated

Scene 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 the difficulty level of the game, different levels and brick collections are drawn ( Only three levels have been generated so far). 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 game Run logic, including but not limited to the following points

• Draw the entire scene of the game

• ##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: implements the instantiation of all classes needed in the game, and Initialize the game

Related recommendations:

Example sharing jQuery to implement the puzzle game

html5 Make a mooncake eating game Tutorial

Object-oriented implementation of a simple version of Super Mario mini-game

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