How harsh? Labyrinthine cars!'s game

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

No:8283

5059

←

Prev Next

→

How harsh? Labyrinthine cars!
Developer User3589｜Date and time 23/7/14 20:22:58
Build time 47.313 sec｜Game capacity 4.571KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>迷宮車</title>
	<style>
		#maze {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			grid-template-rows: repeat(5, 1fr);
			grid-gap: 5px;
			width: 300px;
			height: 300px;
			margin: 0 auto;
			background-color: #444;
			padding: 5px;
			border-radius: 10px;
		}
		.cell {
			width: 100%;
			height: 100%;
			background-color: #bbb;
			border-radius: 5px;
		}
		.car {
			width: 100%;
			height: 100%;
			font-size: 32px;
			text-align: center;
			line-height: 120px;
		}
		.enemy {
			width: 100%;
			height: 100%;
			font-size: 32px;
			text-align: center;
			line-height: 120px;
			color: red;
		}
	</style>
</head>
<body>
	<div id="maze"></div>

for (let i = 0; i < 5; i++) {
			for (let j = 0; j < 5; j++) {
				const cell = document.createElement("div");
				cell.classList.add("cell");
				maze.appendChild(cell);
				cells.push(cell);
			}
		}

const startCellIndex = Math.floor(Math.random() * 25);
		let currentCarIndex = startCellIndex;

let goalCellIndex;
		do {
			goalCellIndex = Math.floor(Math.random() * 25);
		} while (goalCellIndex === startCellIndex);

cells[startCellIndex].innerHTML = "🚗";

let enemyCellIndex;
		do {
			enemyCellIndex = Math.floor(Math.random() * 25);
		} while (enemyCellIndex === startCellIndex || enemyCellIndex === goalCellIndex);

cells[enemyCellIndex].innerHTML = "👾";

document.addEventListener("keydown", function(event) {
			const key = event.key;

if (key === "ArrowUp") {
				moveUp();
			} else if (key === "ArrowRight") {
				moveRight();
			} else if (key === "ArrowDown") {
				moveDown();
			} else if (key === "ArrowLeft") {
				moveLeft();
			}
		});

function moveUp() {
			const nextCellIndex = currentCarIndex - 5;

if (nextCellIndex >= 0) {
				cells[currentCarIndex].innerHTML = "";
				cells[nextCellIndex].innerHTML = "🚗";
				currentCarIndex = nextCellIndex;
			}

checkGoal();
			checkEnemy();
		}

function moveRight() {
			const nextCellIndex = currentCarIndex + 1;

if (nextCellIndex % 5 !== 0) {
				cells[currentCarIndex].innerHTML = "";
				cells[nextCellIndex].innerHTML = "🚗";
				currentCarIndex = nextCellIndex;
			}

checkGoal();
			checkEnemy();
		}

function moveDown() {
			const nextCellIndex = currentCarIndex + 5;

if (nextCellIndex < 25) {
				cells[currentCarIndex].innerHTML = "";
				cells[nextCellIndex].innerHTML = "🚗";
				currentCarIndex = nextCellIndex;
			}

checkGoal();
			checkEnemy();
		}

function moveLeft() {
			const nextCellIndex = currentCarIndex - 1;

if (currentCarIndex % 5 !== 0) {
				cells[currentCarIndex].innerHTML = "";
				cells[nextCellIndex].innerHTML = "🚗";
				currentCarIndex = nextCellIndex;
			}

checkGoal();
			checkEnemy();
		}

function checkGoal() {
			if (currentCarIndex === goalCellIndex) {
				alert("ゴールに到達しました！");
				resetGame();
			}
		}

function checkEnemy() {
			if (currentCarIndex === enemyCellIndex) {
				alert("敵に触れてしまった！");
				resetGame();
			}
		}

setInterval(function() {
			let newEnemyCellIndex;
			do {
				const moveDirection = Math.floor(Math.random() * 4);

if (moveDirection === 0) { 
					newEnemyCellIndex = enemyCellIndex - 5;
				} else if (moveDirection === 1) { 
					newEnemyCellIndex = enemyCellIndex + 1;
				} else if (moveDirection === 2) { 
					newEnemyCellIndex = enemyCellIndex + 5;
				} else if (moveDirection === 3) { 
					newEnemyCellIndex = enemyCellIndex - 1;
				}
			} while (newEnemyCellIndex < 0 || newEnemyCellIndex >= 25 || newEnemyCellIndex === startCellIndex || newEnemyCellIndex === goalCellIndex);

cells[enemyCellIndex].innerHTML = "";
			cells[newEnemyCellIndex].innerHTML = "👾";
			enemyCellIndex = newEnemyCellIndex;
		}, 1000);

function resetGame() {
			cells.forEach(cell => {
				cell.innerHTML = "";
			});

currentCarIndex = startCellIndex;
			cells[startCellIndex].innerHTML = "🚗";

do {
				goalCellIndex = Math.floor(Math.random() * 25);
			} while (goalCellIndex === startCellIndex);

do {
				enemyCellIndex = Math.floor(Math.random() * 25);
			} while (enemyCellIndex === startCellIndex || enemyCellIndex === goalCellIndex);

cells[enemyCellIndex].innerHTML = "👾";
		}
	</script>
</body>
</html>