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

No:1208

240

←

Prev Next

→

life-and-death game
Developer User3258｜Date and time 23/6/18 8:25:38
Build time 28.118 sec｜Game capacity 3.802KB｜

Script

デスゲーム

あなたは鬼に追われています。逃げ切ることができますか？

移動方法：左右にスワイプ、ジャンプする場合はタップ

鬼に触れた場合はゲームオーバーです。

60秒経過でゲームクリア！

スコア：0

←

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>
		body {
			background-color: black;
			color: white;
			font-size: 36px;
			text-align: center;
			height: 100%;
		}

button {
			font-size: 36px;
		}
	</style>
</head>
<body>
	<h1>デスゲーム</h1>
	<p>あなたは鬼に追われています。逃げ切ることができますか？</p>
	<p>移動方法：左右にスワイプ、ジャンプする場合はタップ</p>
	<p>鬼に触れた場合はゲームオーバーです。</p>
	<p id="timer">60秒経過でゲームクリア！</p>
	<p>スコア：<span id="score">0</span></p>
	<button onclick="start()">スタート</button>
	<canvas id="canvas" width="400" height="600"></canvas>
	<script>
		let canvas = document.getElementById("canvas");
		let ctx = canvas.getContext("2d");
		let playerX = 200;
		let playerY = 550;
		let isJumping = false;
		let isGameOver = false;
		let timer = 60;
		let score = 0;
		let bg = new Image();
		bg.src = "background.png";
		let player = new Image();
		player.src = "player.png";
		let enemy = new Image();
		enemy.src = "enemy.png";
		canvas.addEventListener("touchstart", function(event) {
			if (!isJumping) {
				isJumping = true;
				playerY -= 100;
				setTimeout(function() {
					playerY += 100;
					isJumping = false;
				}, 1000);
			}
		});
		canvas.addEventListener("mousedown", function(event) {
			if (!isJumping) {
				isJumping = true;
				playerY -= 100;
				setTimeout(function() {
					playerY += 100;
					isJumping = false;
				}, 1000);
			}
		});
		canvas.addEventListener("touchmove", function(event) {
			let x = event.touches[0].pageX - canvas.offsetLeft;
			if (x < playerX) {
				playerX -= 10;
			} else if (x > playerX + player.width) {
				playerX += 10;
			}
		});
		canvas.addEventListener("mousemove", function(event) {
			let x = event.clientX - canvas.offsetLeft;
			if (x < playerX) {
				playerX -= 10;
			} else if (x > playerX + player.width) {
				playerX += 10;
			}
		});
		function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.drawImage(bg, 0, 0);
			ctx.drawImage(player, playerX, playerY);
			ctx.drawImage(enemy, canvas.width - enemy.width - score, 550);
			if (playerX + player.width > canvas.width) {
				playerX = canvas.width - player.width;
			}
			if (playerX < 0) {
				playerX = 0;
			}
			if (playerY + player.height >= enemyY && playerX + player.width >= canvas.width - enemy.width - score &&
				playerX <= canvas.width - score) {
				isGameOver = true;
			}
			if (!isGameOver) {
				requestAnimationFrame(draw);
				score++;
				document.getElementById("score").textContent = score;
				if (score % 100 === 0) {
					timer--;
					document.getElementById("timer").textContent = timer + "秒経過でゲームクリア！";
				}
			} else {
				ctx.fillText("ゲームオーバー", 100, 300);
			}
			if (timer === 0) {
				ctx.fillText("ゲームクリア！", 100, 300);
				isGameOver = true;
			}
		}
		function start() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.drawImage(bg, 0, 0);
			ctx.drawImage(player, playerX, playerY);
			ctx.drawImage(enemy, canvas.width - enemy.width, 550);
			ctx.fillText("3", 200, 300);
			setTimeout(function() {
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				ctx.drawImage(bg, 0, 0);
				ctx.drawImage(player, playerX, playerY);
				ctx.drawImage(enemy, canvas.width - enemy.width, 550);
				ctx.fillText("2", 200, 300);
			}, 1000);
			setTimeout(function() {
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				ctx.drawImage(bg, 0, 0);
				ctx.drawImage(player, playerX, playerY);
				ctx.drawImage(enemy, canvas.width - enemy.width, 550);
				ctx.fillText("1", 200, 300);
			}, 2000);
			setTimeout(draw, 3000);
		}
	</script>
</body>
</html>