AI game creator

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

No:15047

←

Prev Next

→

10 bouncing cars
Developer User6472｜Date and time 23/9/5 21:16:37
Build time 31.009 sec｜Game capacity 2.741KB｜

Script

Sure! Here's an example of a simple game with 10 bouncing cars using JavaScript and pictograms. You can run it as a single HTML file by copying and pasting it into an HTML document enclosed in script tags:

When you run this code, you will see a canvas element displaying 10 bouncing cars. Each car will have a random color and move around the canvas, bouncing off the boundaries. The game continuously updates the position of the cars using the `updateGame` function, which is called recursively using `requestAnimationFrame`. You can customize the appearance and behavior of the cars as per your requirements. Feel free to modify the code and experiment with different aspects of the game.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Bouncing Cars Game</title>
  <style>
    canvas {
      border: 1px solid #000;
      display: block;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");
    
    // Car object
    class Car {
      constructor(x, y, speedX, speedY, color) {
        this.x = x;
        this.y = y;
        this.speedX = speedX;
        this.speedY = speedY;
        this.color = color;
      }
      
      draw() {
        ctx.beginPath();
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, 30, 20);
        ctx.closePath();
      }
      
      update() {
        this.x += this.speedX;
        this.y += this.speedY;
        
        if (this.x <= 0 || this.x + 30 >= canvas.width) {
          this.speedX *= -1;
        }
        
        if (this.y <= 0 || this.y + 20 >= canvas.height) {
          this.speedY *= -1;
        }
      }
    }
    
    const cars = [];
    
    function init() {
      for (let i = 0; i < 10; i++) {
        const x = Math.random() * (canvas.width - 30);
        const y = Math.random() * (canvas.height - 20);
        const speedX = (Math.random() - 0.5) * 4;
        const speedY = (Math.random() - 0.5) * 4;
        const color = getRandomColor();
        
        cars.push(new Car(x, y, speedX, speedY, color));
      }
    }
    
    function getRandomColor() {
      const letters = "0123456789ABCDEF";
      let color = "#";
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }
    
    function updateGame() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      for (let i = 0; i < cars.length; i++) {
        cars[i].update();
        cars[i].draw();
      }
      
      requestAnimationFrame(updateGame);
    }
    
    init();
    updateGame();
  </script>
</body>
</html>
```

You can customize the appearance and behavior of the cars as per your requirements. Feel free to modify the code and experiment with different aspects of the game.