Created
February 12, 2023 12:25
-
-
Save jojonki/76f02388683e2d6ee2de4ae45fd48f66 to your computer and use it in GitHub Desktop.
Revisions
-
jojonki created this gist
Feb 12, 2023 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,264 @@ 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>