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
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) } }
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.

Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.
