AI game creator

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

No:2070

2095

←

Prev Next

→

Drift Games
Developer User3494｜Date and time 23/6/20 0:58:43
Build time 42.477 sec｜Game capacity 2.964KB｜

Script

This drift game is、Operate the car on the black road and、The game is to earn a score while avoiding as many obstacles as possible in time. Use the left and right arrow keys to move the car.、Up arrow key to enter drift mode.、Use the down arrow key to exit drift mode. If you hit an obstacle, the game is over.

←

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>
		#wrapper {
			margin: auto;
			width: 80%;
			height: 100vh;
			background-color: black;
			position: relative;
		}
		#car {
			width: 100px;
			height: 200px;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			background-color: red;
			border-radius: 10px;
			transition: all 0.5s ease-in-out;
		}
		#road {
			width: 100%;
			height: 400px;
			position: absolute;
			bottom: 200px;
			background-color: gray;
		}
		#score {
			font-size: 30px;
			color: white;
			position: absolute;
			top: 10px;
			left: 10px;
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<div id="car"></div>
		<div id="road"></div>
		<div id="score"></div>
	</div>
	
	<script>
		const car = document.getElementById("car");
		const road = document.getElementById("road");
		const score = document.getElementById("score");
		let carPosition = 0;
		let isDrifting = false;
		let scorePoint = 0;
		let isGameOver = false;
		
		function moveCar(event) {
			if (isGameOver) {
				return;
			}
			if (event.key === "ArrowLeft" && carPosition > -80) {
				carPosition -= 20;
				car.style.left = 50 + carPosition + "%";
			} else if (event.key === "ArrowRight" && carPosition < 80) {
				carPosition += 20;
				car.style.left = 50 + carPosition + "%";
			} else if (event.key === "ArrowUp" && !isDrifting) {
				isDrifting = true;
				car.classList.add("drift");
			} else if (event.key === "ArrowDown" && isDrifting) {
				isDrifting = false;
				car.classList.remove("drift");
			}
		}
		
		function createObstacle() {
			if (isGameOver) {
				clearInterval(obstacleTimer);
				return;
			}
			const obstacle = document.createElement("div");
			obstacle.classList.add("obstacle");
			const randomPosition = Math.floor(Math.random() * 100);
			obstacle.style.left = randomPosition + "%";
			road.appendChild(obstacle);
			setTimeout(() => {
				obstacle.remove();
			}, 5000);
			if (!isDrifting && 
				(obstacle.offsetLeft <= car.offsetLeft + car.offsetWidth || 
				obstacle.offsetLeft + obstacle.offsetWidth >= car.offsetLeft) &&
				(obstacle.offsetTop + obstacle.offsetHeight >= car.offsetTop)) {
				gameOver();
			} else {
				scorePoint += 10;
				score.textContent = "スコア: " + scorePoint;
			}
		}
		
		function gameOver() {
			isGameOver = true;
			alert("ゲームオーバー");
			location.reload();
		}
		
		document.addEventListener("keydown", moveCar);
		const obstacleTimer = setInterval(createObstacle, 1000);
	</script>
</body>
</html>

このドリフトゲームは、黒い道路上で車を操作し、時間内にできるだけ多くの障害物を回避しながらスコアを稼ぐゲームです。左右の矢印キーで車を移動させ、上矢印キーでドリフトモードに入り、下矢印キーでドリフトモードを解除します。障害物に当たるとゲームオーバーです。