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

No:846

191

←

Prev Next

→

In this 2D game, the player-controlled character r..ALL
Developer User3154｜Date and time 23/6/17 20:17:03
Build time 38.646 sec｜Game capacity 3.277KB｜

Script

Wolf Escape Game

矢印ボタンを押して逃げよう！

キャラクターが狼に追いつかれたらゲームオーバー！

スコア： 0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>Wolf Escape Game</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		canvas {
			border: solid black 1px;
		}
	</style>
</head>
<body>
	<div>
		<h1>Wolf Escape Game</h1>
		<p>矢印ボタンを押して逃げよう！</p>
		<p>キャラクターが狼に追いつかれたらゲームオーバー！</p>
		<p>スコア： <span id="score">0</span></p>
	</div>
	<canvas id="canvas" height="400" width="600"></canvas>

var player = {
			x: 50,
			y: 200,
			width: 50,
			height: 50,
			speed: 5
		};

var wolves = [];
		var wolfSpeed = 2;
		var wolfInterval = 1000; // ms
		var lastSpawnTime = 0;

var score = 0;
		var scoreInterval = 1000; // ms
		var lastScoreTime = 0;

var gameOver = false;

window.addEventListener("keydown", function(e) {
			switch(e.key) {
				case "ArrowUp":
					player.y -= player.speed;
					break;
				case "ArrowDown":
					player.y += player.speed;
					break;
				case "ArrowLeft":
					player.x -= player.speed;
					break;
				case "ArrowRight":
					player.x += player.speed;
					break;
			}
		});

function drawPlayer() {
			ctx.fillStyle = "yellow";
			ctx.fillRect(player.x, player.y, player.width, player.height);
		}

function drawWolf(wolf) {
			ctx.fillStyle = "gray";
			ctx.fillRect(wolf.x, wolf.y, wolf.width, wolf.height);
		}

function spawnWolf() {
			var wolf = {
				x: canvas.width,
				y: Math.floor(Math.random() * (canvas.height - 50)),
				width: 50,
				height: 50,
				speed: wolfSpeed
			};
			wolves.push(wolf);
			lastSpawnTime = Date.now();
		}

function drawBackground() {
			ctx.fillStyle = "green";
			ctx.fillRect(0, 0, canvas.width, canvas.height);
		}

function clearCanvas() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
		}

function draw() {
			if (!gameOver) {
				clearCanvas();
				drawBackground();
				drawPlayer();
				updateWolves();
				wolves.forEach(drawWolf);
				checkCollision();
				updateScore();
				requestAnimationFrame(draw);

var now = Date.now();
				if (now - lastSpawnTime >= wolfInterval) {
					spawnWolf();
				}
			} else {
				ctx.fillStyle = "red";
				ctx.font = "40px Arial";
				ctx.textAlign = "center";
				ctx.fillText("Game Over", canvas.width / 2, canvas.height / 2);
			}
		}

requestAnimationFrame(draw);
	</script>
</body>
</html>