A superhero with laser vision and flying chasing a speedster's game

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

No:47252

←

Prev Next

→

A superhero with laser vision and flying chasing a..ALL
Developer User19723｜Date and time 24/2/27 19:41:02
Build time 6.485 sec｜Game capacity 1.381KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Superhero Chase Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="600"></canvas>
  
  <script>
    const canvas = document.getElementById("gameCanvas");
    const ctx = canvas.getContext("2d");

const superheroImage = new Image();
    superheroImage.src = "superhero.png";

const speedsterImage = new Image();
    speedsterImage.src = "speedster.png";

let superheroX = 50;
    let superheroY = 50;
    let speedsterX = 700;
    let speedsterY = 50;

function drawSuperhero() {
      ctx.drawImage(superheroImage, superheroX, superheroY, 50, 50);
    }

function drawSpeedster() {
      ctx.drawImage(speedsterImage, speedsterX, speedsterY, 50, 50);
    }

function updateGame() {
      if (superheroX < speedsterX) {
        superheroX += 1;
      } else {
        superheroX = 50;
        superheroY = 50;
      }

if (speedsterX > 0) {
        speedsterX -= 2;
      } else {
        speedsterX = 700;
        speedsterY = 50;
      }
    }

function gameLoop() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

drawSuperhero();
      drawSpeedster();
      updateGame();

requestAnimationFrame(gameLoop);
    }

superheroImage.onload = function() {
      speedsterImage.onload = function() {
        gameLoop();
      };
    };
  </script>
</body>
</html>