Car racing game with cool surround's game

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

No:25971

←

Prev Next

→

Car racing game with cool surround
Developer User12757｜Date and time 23/11/25 21:18:39
Build time 48.333 sec｜Game capacity 3.011KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Car Racing Game</title>
	<style>
		html, body {
			margin: 0;
			padding: 0;
			overflow: hidden;
		}
		
		canvas {
			display: block;
		}
	</style>
</head>
<body>
	<canvas id="game"></canvas>
	<script>
		// Get a reference to the canvas element
		var canvas = document.getElementById("game");
		var context = canvas.getContext("2d");

// Set canvas dimensions to fit the screen
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

// Car dimensions and position
		var carWidth = 50;
		var carHeight = 100;
		var carX = canvas.width / 2 - carWidth / 2;
		var carY = canvas.height - carHeight - 20;
		var carSpeed = 5;

// Arrow keys state
		var arrowKeys = {
			left: false,
			right: false
		};

// Add event listeners to handle arrow keys
		window.addEventListener("keydown", function(event) {
			switch (event.keyCode) {
				case 37:
					arrowKeys.left = true;
					break;
				case 39:
					arrowKeys.right = true;
					break;
			}
		});

window.addEventListener("keyup", function(event) {
			switch (event.keyCode) {
				case 37:
					arrowKeys.left = false;
					break;
				case 39:
					arrowKeys.right = false;
					break;
			}
		});

// Obstacle dimensions and position
		var obstacleWidth = 50;
		var obstacleHeight = 50;
		var obstacleX = Math.random() * (canvas.width - obstacleWidth);
		var obstacleY = -obstacleHeight;
		var obstacleSpeed = 3;

// Game score
		var score = 0;

// Game loop
		function gameLoop() {
			// Clear the canvas
			context.clearRect(0, 0, canvas.width, canvas.height);

// Move the car left or right based on arrow key state
			if (arrowKeys.left && carX > 0) {
				carX -= carSpeed;
			} 
			else if (arrowKeys.right && carX < canvas.width - carWidth) {
				carX += carSpeed;
			}

// Move the obstacle downwards
			obstacleY += obstacleSpeed;

// Check collision between car and obstacle
			if (
				carX < obstacleX + obstacleWidth &&
				carX + carWidth > obstacleX &&
				carY < obstacleY + obstacleHeight &&
				carY + carHeight > obstacleY
			) {
				// Game Over
				alert("Game Over! Your Score: " + score);
				resetGame();
				return;
			}

// Draw the car
			context.fillStyle = "red";
			context.fillRect(carX, carY, carWidth, carHeight);

// Draw the obstacle
			context.fillStyle = "blue";
			context.fillRect(obstacleX, obstacleY, obstacleWidth, obstacleHeight);

// Score increment
			if (obstacleY > canvas.height) {
				score++;
				obstacleX = Math.random() * (canvas.width - obstacleWidth);
				obstacleY = -obstacleHeight;
			}

// Display the score
			context.fillStyle = "black";
			context.font = "24px Arial";
			context.fillText("Score: " + score, 10, 30);

// Request next frame
			requestAnimationFrame(gameLoop);
		}

// Reset the game
		function resetGame() {
			score = 0;
			obstacleX = Math.random() * (canvas.width - obstacleWidth);
			obstacleY = -obstacleHeight;
		}

// Start the game loop
		gameLoop();
	</script>
</body>
</html>