ネイティブ js を使用して HTML5 レンガ崩しゲームを実装する (コード例)

この記事では、ネイティブ JS を使用して HTML5 レンガ破壊ゲームを実装する方法をコード例を通じて紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

まえがき

PS: このプロジェクトでは多くの es6 構文が使用されています。 es6 構文に慣れていない人は、読み続ける前にいくつかの基本原則を理解するのが最善です。

まず第一に、このシリーズの目的を説明させてください。実際、これは主にブロガーがキャンバス関連の API の使用に習熟したいと考えており、同時にその実装により興味があるからです。小さなゲームのロジックを理解しているので、この一連の小さなゲームを使ってゲームをプレイしてプログラミング スキルを向上させたいと思っています; es6 の構文については、個人的に es6 の構文は今後ますます普及すると考えているので、文法使用スキルを事前に習得します。ミニゲームの実装ロジックは完璧ではないかもしれませんし、バグもあるかもしれませんが、あくまでプログラミング能力やスキルの向上を目的としたものですので、あまり深刻に考えないでいただければ幸いです。 # 初めて共有するので、レンガを壊すことを選択しました。それほど複雑ではないロジックを備えた小さなゲームです。同時に、実際のゲーム効果に近づけるために、レベル、レンガの状態、および物理衝突モデルの簡素化された実装もゲームに追加されました。実際には、ゲームの実装ロジックに注目してください。

オンライン デモ アドレス: http://demo.jb51.net/js/2018/h5-game-blockBreaker

github アドレス: https: / /github.com/yangyunhe369/h5-game-blockBreaker

ローカル ダウンロード アドレス: http://xiazai.jb51.net/201801/yuanma/h5-game-blockBreaker(jb51.net) .rar

ps: github アドレスとローカル ダウンロードにはコード デモと参照用のソース コードがあり、オンライン デモ アドレスはプレビューに利用できます

まずはゲームをプレイしてみよう 完了後のスクリーンショット

ゲームプロジェクトのディレクトリは以下の通りです#

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

ゲーム実装ロジック

ここでは、ゲーム内で描画する必要があるバッフル、ボール、レンガ、スコアボードがインスタンス化され、ゲームの主な実行ロジックは、個別にインスタンス化します。

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 クラス: 主に、座標位置、画像サイズ、X 軸の変位速度、ボールのリバウンド速度などを制御し、異なるキーに従って moveLeft および moveRight の移動イベントに応答します。collide メソッドは、ボールがバッフルに衝突したかどうかを検出し、ブール値を返します

小球ボール

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

小球タイプ: ほとんどの特性がバッフルと類似しており、小球の移動軌道は主に移動メソッドによって制御されます。 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) {
 ...
 }
}

Brick type: 2 つの異なる属性、つまり生命と生きているかどうかがあります。次に、ボールがレンガに衝突すると、kill メソッドが呼び出され、現在のレンガの血液量が差し引かれ、血液量が 0 になると、レンガはクリアされます。 collide メソッドは、ボールがレンガに衝突したかどうかを検出し、ブール値を返します。

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 クラス: 現在のスコアとレベル数が記録されます。 , ここで、ボールがレンガに衝突し、レンガの体力が 0 になったときに computeScore メソッドが呼び出され、合計スコアが累積されます

Scene

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

Sceneクラス: 主にゲームの難易度に基づいて、さまざまなレベルとレンガのコレクションを描画します (現在、3 つのレベルのみが生成されています)。 creatBlockList メソッドは、まずすべてのブリックの 2 次元座標配列を生成し、次に initBlockList メソッドを呼び出してすべてのブリックをインスタンス化します。

ゲーム メイン ロジック ゲーム

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_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: ゲームに必要なすべてのクラスのインスタンス化を実現し、ゲームを初期化します
さらにクールな特殊効果については、次のサイトにアクセスすることをお勧めします:

javascript 特殊効果コレクション＃＃＃！

以上がネイティブ js を使用して HTML5 レンガ崩しゲームを実装する (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。