AI game creator

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

No:24198

←

Prev Next

→

Drifting car
Developer User11332｜Date and time 23/11/6 8:12:16
Build time 34.968 sec｜Game capacity 2.025KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Drifting Car Game</title>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
      // Retrieve the canvas element and its context
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");

// Create a car object
      const car = {
        x: 180,
        y: 360,
        speed: 6,
        moveLeft: function () {
          this.x -= this.speed;
        },
        moveRight: function () {
          this.x += this.speed;
        },
      };

// Represent the car as a pictogram
      const carImage = new Image();
      carImage.src =
        "https://img.icons8.com/ios-glyphs/100/000000/car--v1.png";

// Handle touch events for smartphone controls
      document.addEventListener("touchstart", handleTouchStart, false);
      document.addEventListener("touchmove", handleTouchMove, false);

var xDown = null;
      var yDown = null;

function handleTouchStart(event) {
        const firstTouch = event.touches[0];
        xDown = firstTouch.clientX;
        yDown = firstTouch.clientY;
      }

function handleTouchMove(event) {
        if (!xDown || !yDown) {
          return;
        }

const xUp = event.touches[0].clientX;
        const yUp = event.touches[0].clientY;

const xDiff = xDown - xUp;
        const yDiff = yDown - yUp;

if (Math.abs(xDiff) > Math.abs(yDiff)) {
          if (xDiff > 0) {
            car.moveLeft();
          } else {
            car.moveRight();
          }
        }

xDown = null;
        yDown = null;
      }

// Main game loop
      function draw() {
        // Clear the canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the car
        ctx.drawImage(carImage, car.x, car.y, 40, 40);

// Request animation frame
        requestAnimationFrame(draw);
      }
      
      // Start the game
      draw();
    </script>
  </body>
</html>