Utiliser du js natif pour implémenter un jeu de casse-briques HTML5 (exemple de code)

Cet article vous présentera, à travers des exemples de code, comment utiliser le js natif pour implémenter le jeu de casse-briques HTML5. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Avant-propos

PS : Beaucoup de syntaxe es6 est utilisée dans ce projet, donc Pour ceux qui ne sont pas familiers avec la syntaxe es6, il est préférable 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, c'est principalement parce que le blogueur espère maîtriser l'utilisation des API liées au canevas, et en même temps est plus intéressé par la mise en œuvre logique des petits jeux, j'espère donc utiliser cette série de petits jeux Play pour 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 connais l'utilisation de la grammaire compétences à 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 simplifiée 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

Adresse de la démo en ligne : http://demo.jb51.net/js/2018/h5-game-blockBreaker

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

Adresse de téléchargement locale : http://xiazai.jb51.net/201801/yuanma/h5-game-blockBreaker(jb51.net) .rar

ps : L'adresse github et le téléchargement local ont des démos de code, ainsi que le code source pour référence, et l'adresse de démonstration en ligne est disponible pour un aperçu

Jouer d'abord à un jeu La capture d'écran terminée

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

Voici les instanciations des déflecteurs, balles, briques et tableaux de bord qui doivent être dessinés dans le jeu, et la logique de fonctionnement principale du jeu Instancier séparément

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

Classe Baffle : définit principalement sa position de coordonnées, la taille de l'image, la vitesse de déplacement de l'axe X et Contrôle de la vitesse de rebond de la balle, etc., puis répondez aux événements de mouvement moveLeft et 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

Ball. Balle

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 déflecteur, et la trajectoire de mouvement de la petite balle est principalement contrôlée par la méthode de déplacement

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

Type de brique : 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

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

Classe de score : le score actuel et le nombre de niveaux seront enregistré, où la méthode calculateScore sera appelée lorsque la balle entre en collision avec la brique et que la santé de la brique est de 0, et le score total sera 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, dessinant différents niveaux et collections de briques (actuellement, seuls trois niveaux ont été générés). 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)
 }
 ...
}

Noyau du jeu Classe : Cela inclut la principale logique de fonctionnement du jeu, y compris, mais sans s'y limiter, les points suivants

• Dessiner la scène entière du jeu
• Appelez le minuteur pour dessiner une image d'animation par cadre
• Dégagement du jeu 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

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

Fonction d'entrée : implémente l'instanciation de toutes les classes nécessaires dans le jeu et initialise le jeu

Pour des effets spéciaux plus sympas, il est recommandé de visiter : Javascript spécial collection d'effets !

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!