Skip to content

Instantly share code, notes, and snippets.

@jojonki

jojonki/index.html

Created February 12, 2023 12:25
Show Gist options
  • Save jojonki/76f02388683e2d6ee2de4ae45fd48f66 to your computer and use it in GitHub Desktop.
Save jojonki/76f02388683e2d6ee2de4ae45fd48f66 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by Bing: 「htmlとjavascriptだけでインベーダーゲームのコードを作ってください」
Raw
index.html
http://43.4.22.206:8888/<html>
<head>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
// キャンバスとコンテキストを取得
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// ゲームの状態を管理するオブジェクト
var game = {
// ゲームのスコア
score: 0,
// ゲームが終了したかどうか
over: false,
// ゲームを開始する関数
start: function() {
// ゲームの状態を初期化
this.score = 0;
this.over = false;
// プレイヤーと敵と弾を生成
player = new Player();
enemies = [];
bullets = [];
// 敵を10体生成して配列に追加
for (var i = 0; i < 10; i++) {
enemies.push(new Enemy(i * 60 + 10, 10));
}
// キー入力のイベントリスナーを登録
window.addEventListener("keydown", handleKeyDown);
window.addEventListener("keyup", handleKeyUp);
// ゲームループを開始
requestAnimationFrame(gameLoop);
},
// ゲームを終了する関数
end: function() {
// ゲームの状態を更新
this.over = true;
// キー入力のイベントリスナーを削除
window.removeEventListener("keydown", handleKeyDown);
window.removeEventListener("keyup", handleKeyUp);
// ゲームオーバーのメッセージを表示
ctx.font = "40px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "center";
ctx.fillText("Game Over", canvas.width / 2, canvas.height / 2);
ctx.font = "20px Arial";
ctx.fillStyle = "white";
ctx.fillText("Click to restart", canvas.width / 2, canvas.height / 2 + 40);
// キャンバスをクリックしたらゲームを再開するイベントリスナーを登録
canvas.addEventListener("click", handleCanvasClick);
}
};
// プレイヤーを表すクラス
class Player {
// コンストラクタ
constructor() {
// プレイヤーの位置とサイズ
this.x = canvas.width / 2;
this.y = canvas.height - 50;
this.width = 50;
this.height = 50;
// プレイヤーの移動速度
this.speed = 5;
// プレイヤーの移動方向
this.direction = 0;
}
// プレイヤーを描画する関数
draw() {
// プレイヤーを青い四角形で描画
ctx.fillStyle = "blue";
ctx.fillRect(this.x, this.y, this.width, this.height);
}
// プレイヤーを更新する関数
update() {
// プレイヤーの移動方向に応じて位置を更新
this.x += this.direction * this.speed;
// プレイヤーがキャンバスの範囲内に収まるように制限
if (
this.x < 0
) {
this.x = 0;
} else if (this.x + this.width > canvas.width) {
this.x = canvas.width - this.width;
}
// スペースキーが押されたら弾を発射
if (keys[32]) {
// 弾を生成して配列に追加
bullets.push(new Bullet(this.x + this.width / 2, this.y));
// スペースキーの状態をfalseにする
keys[32] = false;
}
}
}
// 敵を表すクラス
class Enemy {
// コンストラクタ
constructor(x, y) {
// 敵の位置とサイズ
this.x = x;
this.y = y;
this.width = 50;
this.height = 50;
// 敵の移動速度と方向
this.speed = 2;
this.direction = 1;
}
// 敵を描画する関数
draw() {
// 敵を赤い四角形で描画
ctx.fillStyle = "red";
ctx.fillRect(this.x, this.y, this.width, this.height);
}
// 敵を更新する関数
update() {
// 敵の移動方向に応じて位置を更新
this.x += this.direction * this.speed;
// 敵がキャンバスの端に到達したら方向を反転し、下に移動
if (
this.x < 0 ||
this.x + this.width > canvas.width
) {
this.direction *= -1;
this.y += this.height;
}
// 敵がプレイヤーと衝突したらゲームを終了
if (
this.x < player.x + player.width &&
this.x + this.width > player.x &&
this.y < player.y + player.height &&
this.y + this.height > player.y
) {
game.end();
}
}
}
// 弾を表すクラス
class Bullet {
// コンストラクタ
constructor(x, y) {
// 弾の位置とサイズ
this.x = x;
this.y = y;
this.width = 5;
this.height = 10;
// 弾の移動速度
this.speed = 10;
}
// 弾を描画する関数
draw() {
// 弾を白い四角形で描画
ctx.fillStyle = "white";
ctx.fillRect(this.x, this.y, this.width, this.height);
}
// 弾を更新する関数
update() {
// 弾の位置を更新
this.y -= this.speed;
// 弾がキャンバスの上端を超えたら配列から削除
if (this.y < 0) {
var index = bullets.indexOf(this);
bullets.splice(index, 1);
}
// 弾が敵と衝突したら敵と弾を配列から削除し、スコアを増やす
for (var i = 0; i < enemies.length; i++) {
var enemy = enemies[i];
if (
this.x < enemy.x + enemy.width &&
this.x + this.width > enemy.x &&
this.y < enemy.y + enemy.height &&
this.y + this.height > enemy.y
) {
var index = bullets.indexOf(this);
bullets.splice(index, 1);
var index = enemies.indexOf(enemy);
enemies.splice(index, 1);
game.score++;
}
}
}
}
// キー入力の状態を管理するオブジェクト
var keys = {};
// キーが押されたときのイベントハンドラ
function handleKeyDown(event) {
// キーのコードに対応する状態をtrueにする
keys[event.keyCode] = true;
// 左矢印キーが押されたらプレイヤーの移動方向を-1に
if (keys[37]) {
player.direction = -1;
}
// 右矢印キーが押されたらプレイヤーの移動方向を1に
if (keys[39]) {
player.direction = 1;
}
}
// キーが離されたときのイベントハンドラ
function handleKeyUp(event) {
// キーのコードに対応する状態をfalseにする
keys[event.keyCode] = false;
// 左矢印キーか右矢印キーが離されたらプレイヤーの移動方向を0に
if (event.keyCode == 37 || event.keyCode == 39) {
player.direction = 0;
}
}
// キャンバスがクリックされたときのイベントハンドラ
function handleCanvasClick(event) {
// ゲームが終了していたらゲームを再開する
if (game.over) {
game.start();
// キャンバスをクリックしたらゲームを再開するイベントリスナーを削除
canvas.removeEventListener("click", handleCanvasClick);
}
}
// ゲームループの関数
function gameLoop() {
// キャンバスをクリア
ctx.clearRect(0, 0, canvas.width, canvas.height);
// プレイヤーと敵と弾を描画
player.draw();
for (var i = 0; i < enemies.length; i++) {
enemies[i].draw();
}
for (var i = 0; i < bullets.length; i++) {
bullets[i].draw();
}
// プレイヤーと敵と弾を更新
player.update();
for (var i = 0; i < enemies.length; i++) {
enemies[i].update();
}
for (var i = 0; i < bullets.length; i++) {
bullets[i].update();
}
// スコアを表示
ctx.font = "20px Arial";
ctx.fillStyle = "white";
ctx.textAlign = "left";
ctx.fillText("Score: " + game.score, 10, 30);
// ゲームが終了していなければゲームループを繰り返す
if (!game.over) {
requestAnimationFrame(gameLoop);
}
}
// ゲームを開始
game.start();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment