Verwenden von nativem JS zur Implementierung eines HTML5-Brick-Breaking-Spiels (Codebeispiel)

In diesem Artikel erfahren Sie anhand von Codebeispielen, wie Sie native JS verwenden, um das HTML5-Brick-Breaking-Spiel zu implementieren. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Vorwort

PS: In diesem Projekt wird viel es6-Syntax verwendet. Daher ist es für diejenigen, die mit der ES6-Syntax nicht vertraut sind, am besten, einige Grundprinzipien zu verstehen, bevor sie weiterlesen.

Lassen Sie mich zunächst den Zweck dieser Serie erläutern: Tatsächlich liegt dies hauptsächlich daran, dass der Blogger hofft, die Verwendung von Canvas-bezogenen APIs beherrschen zu können, und gleichzeitig mehr an der Implementierung interessiert ist Logik kleiner Spiele, daher hoffe ich, dass ich diese Reihe kleiner Play-Spiele nutzen kann, um Ihre Programmierkenntnisse zu verbessern. In Bezug auf die ES6-Syntax denke ich persönlich, dass die ES6-Syntax in Zukunft immer beliebter werden wird, daher bin ich mit der Verwendung der Grammatik vertraut Fähigkeiten im Voraus. Die Implementierungslogik des Minispiels ist möglicherweise nicht perfekt und es kann einige Fehler geben, aber letztendlich dient es nur der Verbesserung der Programmierfähigkeiten und -fähigkeiten. Ich hoffe, Sie nehmen es nicht zu ernst

Als erstes Mal habe ich mich für Arkanoid entschieden. Ein kleines Spiel mit nicht allzu komplizierter Logik. Um dem realen Spieleffekt näher zu kommen, wurden dem Spiel gleichzeitig auch Levels, die Gesundheit von Steinen und eine vereinfachte Implementierung des physischen Kollisionsmodells hinzugefügt. Konzentrieren Sie sich eigentlich nur auf die Spielimplementierungslogik

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

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

Lokale Download-Adresse: http://xiazai.jb51.net/201801/yuanma/h5-game-blockBreaker(jb51.net) . rar

ps: Die Github-Adresse und der lokale Download enthalten Code-Demos sowie Quellcode als Referenz, und die Online-Demo-Adresse steht zur Vorschau zur Verfügung

Spielen Sie zuerst ein Spiel. Der fertige Screenshot

Das Spielprojektverzeichnis lautet wie folgt

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

Spielimplementierungslogik

Hier sind die Instanziierungen der Leitbleche, Bälle, Steine ​​und Anzeigetafeln, die im Spiel gezeichnet werden müssen, und die Hauptlauflogik des Spiels separat instanziieren

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-Klasse: Definiert hauptsächlich seine Koordinatenposition, Bildgröße, X-Achsen-Verschiebungsgeschwindigkeit und Steuerung der Ballrückprallgeschwindigkeit usw. und Reaktion auf Bewegungsereignisse „moveLeft“ und „moveRight“ gemäß verschiedenen Tasten. Die Collide-Methode erkennt, ob der Ball mit der Schallwand kollidiert, und gibt einen booleschen Wert zurück

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

Kleiner Balltyp: Die meisten seiner Eigenschaften ähneln der Schallwand, und die Bewegungsbahn des kleinen Balls wird hauptsächlich durch die Bewegungsmethode gesteuert

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

Steintyp: Es wird zwei verschiedene Attribute geben, nämlich Leben und ob es lebendig ist. Wenn der Ball dann mit dem Stein kollidiert, wird die Kill-Methode aufgerufen, um das Blutvolumen des aktuellen Steins abzuziehen. Wenn das Blutvolumen 0 ist, wird der Stein gelöscht. Die Collide-Methode erkennt, ob der Ball mit den Steinen kollidiert, und gibt einen booleschen Wert zurück aufgezeichnet, wobei die Methode „computeScore“ aufgerufen wird, wenn der Ball mit dem Stein kollidiert und die Gesundheit des Steins 0 ist, und die Gesamtpunktzahl akkumuliert wird

Szene

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

Szenenklasse: hauptsächlich basierend auf dem Schwierigkeitsgrad des Spiels, Zeichnung verschiedener Level und Steinsammlungen (derzeit wurden nur drei Level generiert). Die creatBlockList-Methode generiert zunächst das zweidimensionale Koordinatenarray aller Steine ​​und ruft dann die initBlockList-Methode auf, um alle Steine ​​zu instanziieren

Hauptlogik des Spiels Spiel

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

Spielkern Klasse: Dazu gehört die Hauptlauflogik des Spiels, einschließlich, aber nicht beschränkt auf die folgenden Punkte

Zeichnen der gesamten Szene des Spiels

Rufen Sie den Timer auf, um den Animationsrahmen zu zeichnen nach Frame

Spiel abschließen und Spielende bestimmen

• Schaltflächenereignis binden
• Grenzerkennungsverarbeitungsfunktion
• Kollisionserkennungsverarbeitungsfunktion
Entry function_main

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

Entry function: Implementiert die Instanziierung aller im Spiel benötigten Klassen und initialisiert das Spiel
• Für weitere coole Spezialeffekte wird empfohlen, Folgendes zu besuchen:

Sammlung von Javascript-Spezialeffekten

!

Das obige ist der detaillierte Inhalt vonVerwenden von nativem JS zur Implementierung eines HTML5-Brick-Breaking-Spiels (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!