A 2D game in which the player-controlled character is just running away from a wolf character. The player-controlled character moves toward that direction when the player touches the arrow buttons. (Long press also supported.'s game

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

No:848

224

←

Prev Next

→

A 2D game in which the player-controlled character..ALL
Developer User3154｜Date and time 23/6/17 20:19:07
Build time 41.194 sec｜Game capacity 3.151KB｜

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>狼から逃げろ！</title>
	<style>
		canvas {
			height: 90vh;
			width: 90vw;
			background-color: green;
			border: 5px solid black;
			display: block;
			margin: auto;	
		}
	</style>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
	<canvas id="gameCanvas"></canvas>

// プレイヤーの初期位置と速度
		let playerX = canvas.width / 2;
		let playerY = canvas.height / 2;
		let playerSpeed = 5;

// 狼の初期位置と速度
		let wolfX = canvas.width / 3;
		let wolfY = canvas.height / 3;
		let wolfSpeed = 3;

// スコア
		let score = 0;

// 矢印キーのイベントリスナーを登録
		$(document).keydown(function(e) {
			switch(e.which) {
				case 37: // left
					playerX -= playerSpeed;
					break;
				case 38: // up
					playerY -= playerSpeed;
					break;
				case 39: // right
					playerX += playerSpeed;
					break;
				case 40: // down
					playerY += playerSpeed;
					break;
				default: return; // exit this handler for other keys
			}
			e.preventDefault(); // prevent the default action (scroll / move caret)
		});

// 矢印キーの長押しにも対応
		let keys = {};
		$(document).keydown(function(e) {
			keys[e.which] = true;
		});
		$(document).keyup(function(e) {
			delete keys[e.which];
		});
		setInterval(function() {
			for (let key in keys) {
				if (keys.hasOwnProperty(key)) {
					switch(parseInt(key)) {
						case 37: // left
							playerX -= playerSpeed;
							break;
						case 38: // up
							playerY -= playerSpeed;
							break;
						case 39: // right
							playerX += playerSpeed;
							break;
						case 40: // down
							playerY += playerSpeed;
							break;
						default: break;
					}
				}
			}
		}, 30);

// ゲームループ
		setInterval(function() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// プレイヤーを描画
			ctx.font = "30px Arial";
			ctx.fillText("🐺", playerX, playerY);

// 狼を描画
			ctx.font = "30px Arial";
			ctx.fillText("👤", wolfX, wolfY);

// 狼をプレイヤーに向かって進ませる
			let dx = playerX - wolfX;
			let dy = playerY - wolfY;
			let angle = Math.atan2(dy, dx);
			wolfX += wolfSpeed * Math.cos(angle);
			wolfY += wolfSpeed * Math.sin(angle);

// プレイヤーと狼が接触した場合はゲームオーバー
			let distance = Math.sqrt((playerX - wolfX) * (playerX - wolfX) + (playerY - wolfY) * (playerY - wolfY));
			if (distance < 30) {
				alert("Game over! Your score is " + score);
				location.reload();
			}

// スコアをアップデート
			score += 1;
			ctx.font = "30px Arial";
			ctx.fillText("Score: " + score, 10, 40);

// 狼の数をアップデート
			if (score % 100 == 0) {
				wolfSpeed += 1;
				ctx.font = "30px Arial";
				ctx.fillText("Wolves increased!", 10, 80);
			}
		}, 1000/60);
	</script>
</body>
</html>