A 2D game where you just run away from a wolf character.'s game

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

No:839

344

←

Prev Next

→

A 2D game where you just run away from a wolf char..ALL
Developer User3154｜Date and time 23/6/17 20:12:18
Build time 32.857 sec｜Game capacity 2.505KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8">
	<title>狼を逃げるゲーム</title>
	<style>
		body {
			margin: 0;
			padding: 0;
		}

canvas {
			display: block;
			background: #f4f4f4;
			margin: 0 auto;
		}

.button {
			display: inline-block;
			padding: 12px 24px;
			font-size: 24px;
			background: #333;
			color: #fff;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			margin: 12px;
		}
	</style>
</head>

// 移動量
		var moveAmount = 10;

// 狼が増えるまでの残り時間
		var timeToGrowWolf = 5000;

// スコア
		var score = 0;

// キャンバスとコンテキストの取得
		var canvas = document.getElementById("gameCanvas");
		var ctx = canvas.getContext("2d");

// 矢印ボタンの取得
		var btnUp = document.getElementById("up");
		var btnLeft = document.getElementById("left");
		var btnDown = document.getElementById("down");
		var btnRight = document.getElementById("right");

// 矢印ボタンのクリックイベント
		btnUp.addEventListener("click", function () {
			wolfY -= moveAmount;
		});
		btnLeft.addEventListener("click", function () {
			wolfX -= moveAmount;
		});
		btnDown.addEventListener("click", function () {
			wolfY += moveAmount;
		});
		btnRight.addEventListener("click", function () {
			wolfX += moveAmount;
		});

// 狼の描画
		function drawWolf() {
			ctx.drawImage(wolfImg, wolfX, wolfY, wolfSize, wolfSize);
		}

// 狼の増殖
		function growWolf() {
			timeToGrowWolf -= 1000;
			if (timeToGrowWolf <= 0) {
				wolfSize += 16;
				timeToGrowWolf = 5000;
			}
		}

// スコアの計算と描画
		function drawScore() {
			score += 10;
			ctx.font = "24px sans-serif";
			ctx.fillStyle = "#333";
			ctx.fillText("スコア：" + score, 20, 40);
		}

// ゲームループ
		function gameLoop() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawWolf();
			growWolf();
			drawScore();
			requestAnimationFrame(gameLoop);
		}

// ゲーム開始
		gameLoop();
	</script>
</body>

</html>