Comment implémenter un jeu de casse-briques HTML5 à l'aide de JS natif

Cet article vous présente principalement les informations pertinentes sur l'utilisation de js natif pour implémenter le mini-jeu HTML5 d'Arkanoid. Il s'agit d'une petite exigence rencontrée dans les travaux récents. L'article la présente en détail à travers un exemple de code et partage la source complète. le code est destiné à la référence et à l'étude de tous. Les amis qui en ont besoin peuvent suivre l'éditeur pour apprendre ensemble. J'espère que cela pourra aider tout le monde.

Préface

PS : De nombreuses syntaxes es6 sont utilisées dans ce projet, il est donc préférable pour les amis qui ne sont pas familiers avec la syntaxe es6 de comprendre quelques principes de base avant de continuer la lecture.

Tout d'abord, laissez-moi vous expliquer le but de cette série : en fait, cela est principalement dû au désir du blogueur de maîtriser l'utilisation des API liées au canevas, et en même temps il s'intéresse davantage à la logique de mise en œuvre des petits jeux, il espère donc utiliser cette série de petits jeux pour jouer à des jeux afin d'améliorer vos compétences en programmation concernant la syntaxe es6, je pense personnellement que la syntaxe es6 deviendra de plus en plus populaire à l'avenir, donc je suis familière avec les compétences d'utilisation de la grammaire à l'avance. La logique de mise en œuvre du mini-jeu n'est peut-être pas parfaite, et il peut y avoir quelques bugs, mais après tout, c'est juste pour améliorer les capacités et les compétences en programmation. J'espère que vous ne le prenez pas trop au sérieux

. Pour la première fois, j'ai choisi Arkanoid, un petit jeu à la logique pas trop compliquée. Dans le même temps, afin de se rapprocher de l'effet réel du jeu, des niveaux, la santé des briques et une implémentation simple du modèle de collision physique ont également été ajoutés au jeu. En fait, concentrez-vous simplement sur la logique de mise en œuvre du jeu

Prenez d'abord une capture d'écran une fois le jeu précédent terminé

Le répertoire du projet de jeu est le suivant

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

Logique de mise en œuvre du jeu

Ici, les déflecteurs, les balles, les briques et les tableaux de bord qui doivent être dessinés dans le jeu sont instanciés, et la logique de fonctionnement principale du jeu est instanciée séparément

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

Classe Paddle : elle définit principalement sa position de coordonnées, la taille de l'image, la vitesse de déplacement sur l'axe X, le contrôle de la vitesse de rebond de la balle, etc., puis répond au moveLeft et les événements de mouvement moveRight selon différentes touches. , la méthode de collision détecte si la balle entre en collision avec le déflecteur et renvoie une valeur booléenne

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

Type de petite balle : La plupart. de ses attributs sont similaires à ceux du baffle, principalement par le déplacement La méthode contrôle la trajectoire de la balle

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

Classe Brick : Il y aura deux attributs différents, à savoir la vie et si elle est vivante. Ensuite, lorsque la balle entre en collision avec la brique, la méthode kill est appelée pour déduire le volume sanguin actuel de la brique. Lorsque le volume sanguin est de 0, la brique est effacée. La méthode Collide détecte si la balle entre en collision avec les briques et renvoie une valeur booléenne

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

Classe de score : le score actuel et le nombre de niveaux seront enregistrés, et le La méthode calculateScore sera appelée lorsque la balle entre en collision avec la brique et que le volume sanguin de la brique est de 0, et que le score total est accumulé

Scène

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

Classe de scène : principalement basée sur le niveau de difficulté du jeu, dessin de différents niveaux et collection de briques (seulement trois niveaux ont été générés jusqu'à présent). La méthode creatBlockList génère d'abord le tableau de coordonnées bidimensionnelles de toutes les briques, puis appelle la méthode initBlockList pour instancier toutes les briques

Logique principale du jeu Jeu

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

Classe principale du jeu : incluse ici La principale logique de fonctionnement du jeu comprend, sans toutefois s'y limiter, les points suivants

• Dessiner toute la scène du jeu

• Appel du chronomètre pour dessiner l'animation image par image

• Game pass et détermination de la fin du jeu

• Événement du bouton de liaison

• Fonction de traitement de détection de limite

• Fonction de traitement de détection de collision

Fonction d'entrée_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)
 }
}

Fonction d'entrée : implémente tout classes nécessaires dans le jeu Instancier et initialiser le jeu

Recommandations associées :

Exemple de partage de jQuery pour implémenter le jeu de puzzle

Tutoriel de jeu de manger Mooncake de production HTML5

Implémentation orientée objet d'une version simple du jeu Super Mario

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!