AI game creator

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

No:16062

←

Prev Next

→

I need car game
Developer User7107｜Date and time 23/9/15 19:47:30
Build time 42.578 sec｜Game capacity 4.777KB｜

Script

Sure! Here's a simple Car Game implemented as a single HTML file using JavaScript. It is designed for smartphone operation and uses pictograms to represent the objects in the game. Please note that this is a basic example, and you can enhance and customize it further as per your requirements.

To play the game, you can save the above code in a new HTML file (e.g., `car_game.html`) and open it in a web browser on your smartphone. The game will start automatically, and you can control the car by tapping the screen to move it left or right, avoiding collisions with the blue obstacles. Your score will increment as you avoid obstacles, and when a collision occurs, the game will show a "Game Over" message along with your final score.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Car Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    
    <script>
        // Game Variables
        var canvas;
        var canvasContext;
        
        var carX = 20; // Initial car position
        var carY = 350;
        var carSpeed = 0;
        
        var roadWidth = 100;
        var roadHeight = 400;
        
        var obstacleX = 200; // Initial obstacle position
        var obstacleY = 0;
        var obstacleSpeed = 5;
        
        var score = 0;
        
        // Function to initialize the game
        function gameStart() {
            canvas = document.getElementById('gameCanvas');
            canvasContext = canvas.getContext('2d');
            
            // Interval to update the game every 20 milliseconds
            setInterval(update, 20);
            
            // Event listener to handle touch interactions
            canvas.addEventListener("touchstart", touchStart);
            canvas.addEventListener("touchend", touchEnd);
        }
        
        // Function to update the game state
        function update() {
            move();
            draw();
            score++;
        }
        
        // Function to handle touch start event
        function touchStart(event) {
            carSpeed = -5; // Move car left when touch start
            event.preventDefault(); // Prevent scrolling on touch
        }
        
        // Function to handle touch end event
        function touchEnd(event) {
            carSpeed = 5; // Move car right when touch end
            event.preventDefault(); // Prevent scrolling on touch
        }
        
        // Function to move car and obstacle
        function move() {
            carX += carSpeed;
            
            obstacleY += obstacleSpeed;
            if (obstacleY > canvas.height) { // Reset obstacle to top when it reaches bottom
                obstacleY = 0;
                obstacleX = Math.random() * (canvas.width - roadWidth);
                score += 10; // Increase score when obstacle resets
            }
            
            if (carX < 0) {
                carX = 0; // Prevent car from going off the left side of the canvas
            } else if (carX > canvas.width - roadWidth) {
                carX = canvas.width - roadWidth; // Prevent car from going off the right side of the canvas
            }
            
            // Check for collision between car and obstacle
            if (carX < obstacleX + roadWidth && carX + roadWidth > obstacleX &&
                carY < obstacleY + roadHeight && carY + roadHeight > obstacleY) {
                alert("Game Over. Your score: " + score); // Show game over message
                resetGame(); // Reset game state
            }
        }
        
        // Function to reset the game state
        function resetGame() {
            carX = 20;
            obstacleX = 200;
            obstacleY = 0;
            score = 0;
            carSpeed = 0;
        }
        
        // Function to draw the game elements
        function draw() {
            // Clear the canvas
            canvasContext.clearRect(0, 0, canvas.width, canvas.height);
            
            // Draw road
            canvasContext.fillStyle = 'gray';
            canvasContext.fillRect(0, 0, canvas.width, canvas.height);
            
            // Draw car
            canvasContext.fillStyle = 'red';
            canvasContext.fillRect(carX, carY, roadWidth, roadHeight);
            
            // Draw obstacle
            canvasContext.fillStyle = 'blue';
            canvasContext.fillRect(obstacleX, obstacleY, roadWidth, roadHeight);
            
            // Draw score
            canvasContext.fillStyle = 'black';
            canvasContext.font = '20px Arial';
            canvasContext.fillText("Score: " + score, 20, 30);
        }
        
        // Call the gameStart function to start the game
        gameStart();
    </script>
</body>
</html>
```