jojonki/index.html

## 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>
	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>