A game in which the player 🐯 chases an escaping 👨 and ♥ when caught.'s game

Click here for free DL of the app version that can save data.

No:1412

105

←

Prev Next

→

A game in which the player 🐯 chases an escaping 👨 ..ALL
Developer User3292｜Date and time 23/6/18 15:03:29
Build time 32.708 sec｜Game capacity 4.504KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>🐯👨 Chase Game</title>
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		canvas {
			display: block;
			background: #eee;
			margin: auto;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas" width="640" height="360"></canvas>

// ゲーム開始時に呼ばれる
			start: function() {
				// キャンバスのコンテキストを取得
				this.context = this.canvas.getContext("2d");

// プレイヤーと敵の画像をロード
				this.playerImage = new Image();
				this.playerImage.src = "player.png";
				this.enemyImage = new Image();
				this.enemyImage.src = "enemy.png";
				this.heartImage = new Image();
				this.heartImage.src = "heart.png";

// プレイヤーオブジェクトを作成
				this.player = {
					x: 50,
					y: 50,
					width: 32,
					height: 32,
					speed: 5,
				};

// 敵の数
				this.enemyCount = 10;

// 敵オブジェクトの配列を作成
				this.enemies = [];
				for (var i = 0; i < this.enemyCount; i++) {
					this.enemies.push({
						x: Math.random() * (this.canvas.width - 32),
						y: Math.random() * (this.canvas.height - 32),
						width: 32,
						height: 32,
						speed: 3 + Math.random() * 3,
					});
				}

// ハートオブジェクトの配列を作成
				this.hearts = [];
			},

// ゲームループ
			loop: function() {
				// プレイヤーの移動
				if (keys.ArrowUp) {
					this.player.y -= this.player.speed;
				}
				if (keys.ArrowDown) {
					this.player.y += this.player.speed;
				}
				if (keys.ArrowLeft) {
					this.player.x -= this.player.speed;
				}
				if (keys.ArrowRight) {
					this.player.x += this.player.speed;
				}

// プレイヤーの画像を描画
				this.context.drawImage(this.playerImage, this.player.x, this.player.y);

// 敵の移動とプレイヤーの捕獲判定
				for (var i = 0; i < this.enemyCount; i++) {
					var enemy = this.enemies[i];

// 敵の移動
					var dx = this.player.x - enemy.x;
					var dy = this.player.y - enemy.y;
					var distance = Math.sqrt(dx * dx + dy * dy);
					var directionX = dx / distance;
					var directionY = dy / distance;
					var speedX = directionX * enemy.speed;
					var speedY = directionY * enemy.speed;
					enemy.x += speedX;
					enemy.y += speedY;

// 敵の画像を描画
					this.context.drawImage(this.enemyImage, enemy.x, enemy.y);

// プレイヤーと敵が重なったら捕獲される
					var playerLeft = this.player.x;
					var playerRight = this.player.x + this.player.width;
					var playerTop = this.player.y;
					var playerBottom = this.player.y + this.player.height;
					var enemyLeft = enemy.x;
					var enemyRight = enemy.x + enemy.width;
					var enemyTop = enemy.y;
					var enemyBottom = enemy.y + enemy.height;
					if (playerLeft < enemyRight && playerRight > enemyLeft &&
						playerTop < enemyBottom && playerBottom > enemyTop) {
						// ハートを作成
						this.hearts.push({
							x: enemy.x,
							y: enemy.y,
							width: 32,
							height: 32,
							speed: 2 + Math.random() * 2,
						});

// 捕獲された敵を再配置
						enemy.x = Math.random() * (this.canvas.width - 32);
						enemy.y = Math.random() * (this.canvas.height - 32);
					}
				}

// ハートの移動と画像の描画
				for (var i = 0; i < this.hearts.length; i++) {
					var heart = this.hearts[i];
					heart.y += heart.speed;
					this.context.drawImage(this.heartImage, heart.x, heart.y);
				}

// ハートが画面外に出たら配列から削除
				this.hearts = this.hearts.filter(heart => heart.y < this.canvas.height);

// テキストの描画
				this.context.fillStyle = "#000000";
				this.context.font = "24px Arial";
				this.context.fillText("♥: " + this.hearts.length, 10, 30);

// ゲームループを継続
				requestAnimationFrame(this.loop.bind(this));
			},
		};

// キーボードの入力状態を保持するオブジェクト
		var keys = {};

// キーが押されたときの処理
		window.addEventListener("keydown", function(e) {
			keys[e.key] = true;
		});

// キーが離されたときの処理
		window.addEventListener("keyup", function(e) {
			keys[e.key] = false;
		});

// ゲームの開始
		game.start();
		game.loop();
	</script>
</body>
</html>