html5ミニゲーム制作アイデアのコード例を詳しく紹介

b:モバイルプレイヤー

さらにゲーム要素を追加

砲弾

敵

画像の使用

衝突検出

サウンド

はじめに

HTML5の

キャンバスを使ってゲームを作ってみませんか

？このチュートリアルに従えば、すぐに作業を進めることができます。

このチュートリアルを読むには、少なくとも

javascript

関連の知識が必要です。

最初にゲームをプレイすることも、記事を直接読んでゲームのソースコードをダウンロードすることもできます。

キャンバスを作成する

何かを描く前に、キャンバスを作成する必要があります。これは完全なガイドであり、jQuery を使用するためです。

var CANVAS_WIDTH = 480;
var CANVAS_HEIGHT = 320;
var canvasElement = $("<canvas width=&#39;" + CANVAS_WIDTH + 
                      "&#39; height=&#39;" + CANVAS_HEIGHT + "&#39;></canvas>");
var canvas = canvasElement.get(0).getContext("2d");
canvasElement.appendTo(&#39;body&#39;);

ゲーム ループ

プレーヤーに一貫性のあるスムーズなゲーム

アニメーション

を提示するには、プレーヤーの目を欺くためにキャンバスを頻繁にレンダリングする必要があります。

var FPS = 30;
setInterval(function() {
  update();
  draw();
}, 1000/FPS);

ここでは、update とdraw の実装については気にしません。重要なのは、setInterval() が update とdraw を定期的に実行することを知る必要があるということです。

Hello world

ループ フレームを構築したので、変更しましょう。 update およびdrawメソッドを使用して、画面にテキストを書き込みます。

function draw() {
  canvas.fillStyle = "#000"; // Set color to black
  canvas.fillText("Sup Bro!", 50, 50);
}

専門家へのリマインダー: プログラム内のエラーをより早く見つけることができるように、コードを少し変更したときにプログラムを実行してください。

それでもテキストは正常に表示されます。すでにループがあるので、テキストを簡単に動かすことができます~~~

var textX = 50;
var textY = 50;
function update() {
  textX += 1;
  textY += 1;
}
function draw() {
  canvas.fillStyle = "#000";
  canvas.fillText("Sup Bro!", textX, textY);
}

プログラムを実行します。上記を段階的に実行すると、テキストが移動するのが確認できます。ただし、キャンバスを消去しなかったので、前回のテキストが画面上に残っています。次に、draw メソッドに Erase メソッドを追加します。

function draw() {
  canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
  canvas.fillStyle = "#000";
  canvas.fillText("Sup Bro!", textX, textY);
}

画面上でテキストが動いているのがわかります。これは本物のゲームであり、単なる半完成品です。

プレーヤーの作成

プレーヤーのすべての情報を含む

オブジェクトを作成します。それにはdrawメソッドが必要です。ここでは、すべてのプレーヤー情報を含む単純なオブジェクトが作成されます。

var player = {
  color: "#00A",
  x: 220,
  y: 270,
  width: 32,
  height: 32,
  draw: function() {
    canvas.fillStyle = this.color;
    canvas.fillRect(this.x, this.y, this.width, this.height);
  }
};

プレイヤーを表すために単色の四角形を使用するようになりました。ゲームに追加するときは、キャンバスをクリアしてプレイヤーを描画する必要があります。

function draw() {
  canvas.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
  player.draw();
}

キーボード コントロール

jQuery Hotkeys の使用

jQuery Hotkeys プラグインキーボード

動作

は、さまざまなブラウザとより簡単に互換性を持たせることができます。開発者がブラウザごとに異なる keyCode と charCode を気にする必要がないように、

event

を次のようにバインドします:

$(document).bind("keydown", "left", function() { ... });
移动player
function update() {
  if (keydown.left) {
    player.x -= 2;
  }
  if (keydown.right) {
    player.x += 2;
  }
}

十分な速度で動いていないと感じますか?そこで、移動速度を上げてみましょう。

function update() {
  if (keydown.left) {
    player.x -= 5;
  }
  if (keydown.right) {
    player.x += 5;
  }
  player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);
}

砲弾などの他の要素を簡単に追加できます:

function update() {
  if (keydown.space) {
    player.shoot();
  }
  if (keydown.left) {
    player.x -= 5;
  }
  if (keydown.right) {
    player.x += 5;
  }
  player.x = player.x.clamp(0, CANVAS_WIDTH - player.width);
}
player.shoot = function() {
  console.log("Pew pew");
  // :) Well at least adding the key binding was easy...
};

さらにゲーム要素を追加します

砲弾

まず、実際の意味で砲弾を追加することから始めましょう:

var playerBullets = [];

次に、砲弾を作成するにはコンストラクターが必要です:

function Bullet(I) {
  I.active = true;
  I.xVelocity = 0;
  I.yVelocity = -I.speed;
  I.width = 3;
  I.height = 3;
  I.color = "#000";
  I.inBounds = function() {
    return I.x >= 0 && I.x <= CANVAS_WIDTH &&
      I.y >= 0 && I.y <= CANVAS_HEIGHT;
  };
  I.draw = function() {
    canvas.fillStyle = this.color;
    canvas.fillRect(this.x, this.y, this.width, this.height);
  };
  I.update = function() {
    I.x += I.xVelocity;
    I.y += I.yVelocity;
    I.active = I.active && I.inBounds();
  };
  return I;
}

プレイヤーが発砲したら、砲弾をコレクションに追加する必要があります:

player.shoot = function() {
  var bulletPosition = this.midpoint();
  playerBullets.push(Bullet({
    speed: 5,
    x: bulletPosition.x,
    y: bulletPosition.y
  }));
};
player.midpoint = function() {
  return {
    x: this.x + this.width/2,
    y: this.y + this.height/2
  };
};

射撃を実装するために更新メソッドと描画メソッドを変更します:

function update() {
  ...
  playerBullets.forEach(function(bullet) {
    bullet.update();
  });
  playerBullets = playerBullets.filter(function(bullet) {
    return bullet.active;
  });
}
function draw() {
  ...
  playerBullets.forEach(function(bullet) {
    bullet.draw();
  });
}

敵

enemies = [];
function Enemy(I) {
  I = I || {};
  I.active = true;
  I.age = Math.floor(Math.random() * 128);
  I.color = "#A2B";
  I.x = CANVAS_WIDTH / 4 + Math.random() * CANVAS_WIDTH / 2;
  I.y = 0;
  I.xVelocity = 0
  I.yVelocity = 2;
  I.width = 32;
  I.height = 32;
  I.inBounds = function() {
    return I.x >= 0 && I.x <= CANVAS_WIDTH &&
      I.y >= 0 && I.y <= CANVAS_HEIGHT;
  };
  I.draw = function() {
    canvas.fillStyle = this.color;
    canvas.fillRect(this.x, this.y, this.width, this.height);
  };
  I.update = function() {
    I.x += I.xVelocity;
    I.y += I.yVelocity;
    I.xVelocity = 3 * Math.sin(I.age * Math.PI / 64);
    I.age++;
    I.active = I.active && I.inBounds();
  };
  return I;
};
function update() {
  ...
  enemies.forEach(function(enemy) {
    enemy.update();
  });
  enemies = enemies.filter(function(enemy) {
    return enemy.active;
  });
  if(Math.random() < 0.1) {
    enemies.push(Enemy());
  }
};
function draw() {
  ...
  enemies.forEach(function(enemy) {
    enemy.draw();
  });
}

写真を使用する

player.sprite = Sprite("player");
player.draw = function() {
  this.sprite.draw(canvas, this.x, this.y);
};
function Enemy(I) {
  ...
  I.sprite = Sprite("enemy");
  I.draw = function() {
    this.sprite.draw(canvas, this.x, this.y);
  };
  ...
}

衝突検出

function collides(a, b) {
  return a.x < b.x + b.width &&
         a.x + a.width > b.x &&
         a.y < b.y + b.height &&
         a.y + a.height > b.y;
}
function handleCollisions() {
  playerBullets.forEach(function(bullet) {
    enemies.forEach(function(enemy) {
      if (collides(bullet, enemy)) {
        enemy.explode();
        bullet.active = false;
      }
    });
  });
  enemies.forEach(function(enemy) {
    if (collides(enemy, player)) {
      enemy.explode();
      player.explode();
    }
  });
}
function update() {
  ...
  handleCollisions();
}
function Enemy(I) {
  ...
  I.explode = function() {
    this.active = false;
    // Extra Credit: Add an explosion graphic
  };
  return I;
};
player.explode = function() {
  this.active = false;
  // Extra Credit: Add an explosion graphic and then end the game
};

サウンドを追加する

function Enemy(I) {
  ...
  I.explode = function() {
    this.active = false;
    // Extra Credit: Add an explosion graphic
  };
  return I;
};
player.explode = function() {
  this.active = false;
  // Extra Credit: Add an explosion graphic and then end the game
};

以上がhtml5ミニゲーム制作アイデアのコード例を詳しく紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。