A Dirtbike game with jumps and boost and loopings's game

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

No:17591

121

←

Prev Next

→

A Dirtbike game with jumps and boost and loopings
Developer User7737｜Date and time 23/9/24 2:18:00
Build time 32.251 sec｜Game capacity 3.492KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Dirtbike Game</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="300"></canvas>
    <script>
      // Game variables
      let canvas, ctx;
      let dirtbike, jumpHeight, boostActive;

// Dirtbike properties
      const bikeWidth = 50;
      const bikeHeight = 30;
      const bikeSpeed = 5;
      const jumpPower = 10;
      const boostFactor = 2;

// Keyboard controls
      let leftKey = false;
      let rightKey = false;
      let upKey = false;
      let spaceKey = false;

// Initialize the game
      function init() {
        canvas = document.getElementById("gameCanvas");
        ctx = canvas.getContext("2d");

// Create dirtbike object
        dirtbike = {
          x: canvas.width / 2 - bikeWidth / 2,
          y: canvas.height - bikeHeight,
        };

// Set initial jump height and boost status
        jumpHeight = 0;
        boostActive = false;

// Keyboard event listeners
        document.addEventListener("keydown", keyDownHandler);
        document.addEventListener("keyup", keyUpHandler);

// Start the game loop
        setInterval(gameLoop, 10);
      }

// Handle key down events
      function keyDownHandler(event) {
        if (event.keyCode === 37) {
          leftKey = true;
        } else if (event.keyCode === 39) {
          rightKey = true;
        } else if (event.keyCode === 38) {
          upKey = true;
        } else if (event.keyCode === 32) {
          spaceKey = true;
        }
      }

// Handle key up events
      function keyUpHandler(event) {
        if (event.keyCode === 37) {
          leftKey = false;
        } else if (event.keyCode === 39) {
          rightKey = false;
        } else if (event.keyCode === 38) {
          upKey = false;
        } else if (event.keyCode === 32) {
          spaceKey = false;
        }
      }

// Update the game state
      function update() {
        // Move the dirtbike left
        if (leftKey && dirtbike.x > 0) {
          dirtbike.x -= bikeSpeed;
        }
        // Move the dirtbike right
        if (rightKey && dirtbike.x + bikeWidth < canvas.width) {
          dirtbike.x += bikeSpeed;
        }
        // Jump handling
        if (upKey && dirtbike.y === canvas.height - bikeHeight) {
          jumpHeight = jumpPower;
        }
        // Boost handling
        if (spaceKey && !boostActive) {
          bikeSpeed *= boostFactor;
          boostActive = true;
          setTimeout(() => {
            bikeSpeed /= boostFactor;
            boostActive = false;
          }, 3000);
        }

// Apply gravity
        if (dirtbike.y < canvas.height - bikeHeight - jumpHeight) {
          jumpHeight -= 0.5;
        } else {
          dirtbike.y = canvas.height - bikeHeight;
        }
      }

// Render the game
      function render() {
        // Clear the canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the dirtbike
        ctx.fillStyle = "blue";
        ctx.fillRect(dirtbike.x, dirtbike.y, bikeWidth, bikeHeight);

// Draw the ground
        ctx.fillStyle = "green";
        ctx.fillRect(0, canvas.height - 10, canvas.width, 10);
      }

// Game loop
      function gameLoop() {
        update();
        render();
      }

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