This is a game in which the player runs away from enemies who are chasing him. The field is like a maze.'s game

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

No:1139

254

←

Prev Next

→

This is a game in which the player runs away from ..ALL
Developer User3260｜Date and time 23/6/18 4:37:41
Build time 34.877 sec｜Game capacity 2.713KB｜

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>
		body{
			margin: 0;
			padding: 0;
			background-color: #f1c40f;
			font-size: 50px;
			text-align: center;
		}
		#player{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: #e74c3c;
			border-radius: 50%;
			height: 50px;
			width: 50px;
			z-index: 1;
		}
		.enemy{
			position: absolute;
			background-color: #3498db;
			border-radius: 50%;
			height: 30px;
			width: 30px;
			z-index: 0;
		}
	</style>
</head>
<body>
	<div id="player"></div>
	<script>
		var player = document.getElementById("player");
		var enemyNum = 5;
		var enemies = [];
		var score = 0;
		
		// フィールドのサイズ
		var fieldWidth = window.innerWidth;
		var fieldHeight = window.innerHeight;
		
		// プレイヤーの初期位置設定
		var playerX = fieldWidth / 2;
		var playerY = fieldHeight / 2;
		player.style.left = playerX + "px";
		player.style.top = playerY + "px";
		
		// 敵の初期位置設定
		for(var i = 0; i < enemyNum; i++){
			var enemy = document.createElement("div");
			enemy.className = "enemy";
			enemy.style.left = Math.random() * (fieldWidth - 30) + "px";
			enemy.style.top = Math.random() * (fieldHeight - 30) + "px";
			document.body.appendChild(enemy);
			enemies.push(enemy);
		}
		
		// スマホの傾きでプレイヤーを動かす
		window.addEventListener("deviceorientation", function(event){
			var x = event.gamma;
			var y = event.beta;
			playerX += x;
			playerY += y;
			player.style.left = playerX + "px";
			player.style.top = playerY + "px";
		});
		
		// 敵に当たったらゲームオーバー
		function checkCollision(){
			for(var i = 0; i < enemyNum; i++){
				var distanceX = Math.abs(playerX - enemies[i].offsetLeft);
				var distanceY = Math.abs(playerY - enemies[i].offsetTop);
				var distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
				if(distance < 40){
					alert("Game Over");
					location.reload();
				}
			}
		}
		
		// 一定時間ごとに敵を動かす
		setInterval(function(){
			for(var i = 0; i < enemyNum; i++){
				var directionX = Math.random() * 2 - 1;
				var directionY = Math.random() * 2 - 1;
				directionX *= 5;
				directionY *= 5;
				enemies[i].style.left = enemies[i].offsetLeft + directionX + "px";
				enemies[i].style.top = enemies[i].offsetTop + directionY + "px";
			}
			checkCollision();
			score++;
			document.title = "Score: " + score;
		}, 100);
		
	</script>
</body>
</html>

※プレイヤーを動かすにはスマホのモーションセンサが必要です。コンピュータの場合はマウスで操作してください。