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

No:37

368

←

Prev Next

→

Games in which ●, ■, and ▲ move vol2
Developer anonymous｜Date and time 23/5/3 17:59:45
Build time 106.929 sec｜Game capacity 5.119KB｜

Script

● ■ ▲ Game

Welcome! In this game, ●, ■ and ▲ move around, and you control the player (red circle) to collect scores while avoiding enemies!

Lets get started!

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>● ■ ▲ Game</title>
	<style>
		body {
			background-color: #333;
			color: white;
			font-family: Arial, sans-serif;
			text-align: center;
			font-size: 20px;
		}
		#area {
			margin: 50px auto;
			width: 400px;
			height: 400px;
			background-color: #ccc;
			position: relative;
		}
		#player {
			width: 50px;
			height: 50px;
			background-color: red;
			position: absolute;
			top: 175px;
			left: 175px;
			border-radius: 50%;
			display: none;
		}
		#enemy1, #enemy2, #enemy3 {
			width: 50px;
			height: 50px;
			background-color: blue;
			position: absolute;
			border-radius: 50%;
			display: none;
		}
		#score {
			font-size: 30px;
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<h1>● ■ ▲ Game</h1>
	<p>ようこそ！このゲームでは、●と■と▲が動き回るので、あなたの操作でプレイヤー（赤い円）を動かして、敵を避けながらスコアを集めます！</p>
	<p>さあ、始めましょう！</p>
	<div id="area">
		<div id="player"></div>
		<div id="enemy1"></div>
		<div id="enemy2"></div>
		<div id="enemy3"></div>
	</div>
	<div id="score">Score: 0</div>

let player = document.getElementById("player");
		let enemy1 = document.getElementById("enemy1");
		let enemy2 = document.getElementById("enemy2");
		let enemy3 = document.getElementById("enemy3");
		let score = document.getElementById("score");

let playerX = 175;
		let playerY = 175;

let enemy1X;
		let enemy1Y;

let enemy2X;
		let enemy2Y;

let enemy3X;
		let enemy3Y;

let enemySpeed = 2;
		let playerSpeed = 10;
		let scoreCount = 0;

document.addEventListener("keydown", function(event) {

if(event.key === "ArrowUp" && playerY > 0) {
				playerY -= playerSpeed;
			} else if(event.key === "ArrowDown" && playerY < 350){
				playerY += playerSpeed;
			} else if(event.key === "ArrowRight" && playerX < 350){
				playerX += playerSpeed;
			} else if(event.key === "ArrowLeft" && playerX > 0){
				playerX -= playerSpeed;
			}

player.style.top = playerY + "px";
			player.style.left = playerX + "px";

});

setInterval(function() {

enemy1X = Math.floor((Math.random() * 350) + 1);
			enemy1Y = Math.floor((Math.random() * 350) + 1);
			enemy1.style.top = enemy1Y + "px";
			enemy1.style.left = enemy1X + "px";
			enemy1.style.display = "block";

enemy2X = Math.floor((Math.random() * 350) + 1);
			enemy2Y = Math.floor((Math.random() * 350) + 1);
			enemy2.style.top = enemy2Y + "px";
			enemy2.style.left = enemy2X + "px";
			enemy2.style.display = "block";

enemy3X = Math.floor((Math.random() * 350) + 1);
			enemy3Y = Math.floor((Math.random() * 350) + 1);
			enemy3.style.top = enemy3Y + "px";
			enemy3.style.left = enemy3X + "px";
			enemy3.style.display = "block";

setTimeout(function() {

enemy1.style.display = "none";
				enemy2.style.display = "none";
				enemy3.style.display = "none";

}, 1000);

}, 2000);

setInterval(function() {

if(enemy1.style.display !== "none") {
				let enemy1Top = parseInt(enemy1.style.top);
				let enemy1Left = parseInt(enemy1.style.left);

if(Math.abs(playerX - enemy1Left) < 40 && Math.abs(playerY - enemy1Top) < 40) {
					resetGame();
					return;
				}

if(enemy1Top > playerY) {
					enemy1Top -= enemySpeed;
				} else if(enemy1Top < playerY){
					enemy1Top += enemySpeed;
				}

if(enemy1Left > playerX) {
					enemy1Left -= enemySpeed;
				} else if(enemy1Left < playerX) {
					enemy1Left += enemySpeed;
				}

enemy1.style.top = enemy1Top + "px";
				enemy1.style.left = enemy1Left + "px";
			}

if(enemy2.style.display !== "none") {
				let enemy2Top = parseInt(enemy2.style.top);
				let enemy2Left = parseInt(enemy2.style.left);

if(Math.abs(playerX - enemy2Left) < 40 && Math.abs(playerY - enemy2Top) < 40) {
					resetGame();
					return;
				}

if(enemy2Top > playerY) {
					enemy2Top -= enemySpeed;
				} else if(enemy2Top < playerY){
					enemy2Top += enemySpeed;
				}

if(enemy2Left > playerX) {
					enemy2Left -= enemySpeed;
				} else if(enemy2Left < playerX) {
					enemy2Left += enemySpeed;
				}

enemy2.style.top = enemy2Top + "px";
				enemy2.style.left = enemy2Left + "px";
			}

if(enemy3.style.display !== "none") {
				let enemy3Top = parseInt(enemy3.style.top);
				let enemy3Left = parseInt(enemy3.style.left);

if(Math.abs(playerX - enemy3Left) < 40 && Math.abs(playerY - enemy3Top) < 40) {
					resetGame();
					return;
				}

if(enemy3Top > playerY) {
					enemy3Top -= enemySpeed;
				} else if(enemy3Top < playerY){
					enemy3Top += enemySpeed;
				}

if(enemy3Left > playerX) {
					enemy3Left -= enemySpeed;
				} else if(enemy3Left < playerX) {
					enemy3Left += enemySpeed;
				}

enemy3.style.top = enemy3Top + "px";
				enemy3.style.left = enemy3Left + "px";
			}

scoreCount++;
			score.innerHTML = "Score: " + scoreCount;

}, 100);

function resetGame() {
			player.style.display = "none";
			score.innerHTML = "GAME OVER. Final Score: " + scoreCount;
		}

player.style.display = "block";

</script>

</body>
</html>