AI game creator

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

No:3138

2995

←

Prev Next

→

Car drifting
Developer User3637｜Date and time 23/6/23 23:24:02
Build time 25.364 sec｜Game capacity 2.469KB｜

Script

This is a simple car drifting game implemented in a single HTML file. The game is controlled using the arrow keys on a smartphone. The player must steer the car down a winding road while drifting and avoiding obstacles. The car is subject to gravity and will accelerate downward as it gains speed. The game is won by reaching the end of the course without crashing. The graphics are simple but effective, using an image of a car that rotates left and right based on the player's input. Enjoy the ride!

←

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>Car Drifting Game</title>
	<style>
		#car {
    		position: absolute;
    		bottom: 0;
    		left: 50%;
    		transform: translateX(-50%);
    		width: 60px;
    		height: 80px;
    		background-image: url('car.png');
    		background-size: cover;
		}
	</style>
</head>
<body>
	<div id="car"></div>
	<script>
		// variables
		var car = document.getElementById("car");
		var speedX = 0;
		var speedY = 5;
		var accel = 0.1;
		var maxSpeed = 10;
		var turnSpeed = 5;
		var left = false;
		var right = false;

// update car position
		function update() {
			// move car
			car.style.bottom = parseInt(car.style.bottom) + speedY + "px";
			car.style.left = parseInt(car.style.left) + speedX + "px";
			
			// check if off screen
			if (parseInt(car.style.left) <= 0) {
				car.style.left = "0px";
			}
			if (parseInt(car.style.left) >= window.innerWidth - car.offsetWidth) {
				car.style.left = window.innerWidth - car.offsetWidth + "px";
			}
			if (parseInt(car.style.bottom) >= window.innerHeight - car.offsetHeight) {
				car.style.bottom = window.innerHeight - car.offsetHeight + "px";
				speedY = 0;
			}

// increase speed
			if (speedY < maxSpeed) {
				speedY += accel;
			}

// turn car
			if (left) {
				speedX = -turnSpeed;
				car.style.transform = "rotate(-10deg)";
			} else if (right) {
				speedX = turnSpeed;
				car.style.transform = "rotate(10deg)";
			} else {
				speedX = 0;
				car.style.transform = "rotate(0deg)";
			}
		}

// key events
		document.addEventListener("keydown", function(event) {
			if (event.key == "ArrowLeft") {
				left = true;
			}
			if (event.key == "ArrowRight") {
				right = true;
			}
		});

document.addEventListener("keyup", function(event) {
			if (event.key == "ArrowLeft") {
				left = false;
			}
			if (event.key == "ArrowRight") {
				right = false;
			}
		});

// update loop
		setInterval(update, 30);
	</script>
</body>
</html>