A game with smooth mechanics where you control a spider who k○lls fly's's game

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

No:23188

←

Prev Next

→

A game with smooth mechanics where you control a s..ALL
Developer User10725｜Date and time 23/10/28 21:22:34
Build time 74.745 sec｜Game capacity 3.673KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Spider vs Flies</title>
</head>
<body>
  <canvas id="gameCanvas" width="480" height="320"></canvas>

// Spider starting position and dimensions
    var spiderSize = 20;
    var spiderX = canvas.width / 2;
    var spiderY = canvas.height - spiderSize;

// Spider movement speed
    var spiderSpeed = 5;

// Fly variables
    var flySize = 15;
    var flyX = Math.random() * (canvas.width - flySize);
    var flyY = Math.random() * (canvas.height - flySize);
    var flySpeed = 2;

// Keyboard controls for spider movement
    var leftPressed = false;
    var rightPressed = false;
    var upPressed = false;
    var downPressed = false;

// Event listeners to control spider movement
    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);

// Function to handle keydown events
    function keyDownHandler(event) {
      if (event.key == "Left" || event.key == "ArrowLeft") {
        leftPressed = true;
      } else if (event.key == "Right" || event.key == "ArrowRight") {
        rightPressed = true;
      } else if (event.key == "Up" || event.key == "ArrowUp") {
        upPressed = true;
      } else if (event.key == "Down" || event.key == "ArrowDown") {
        downPressed = true;
      }
    }

// Function to handle keyup events
    function keyUpHandler(event) {
      if (event.key == "Left" || event.key == "ArrowLeft") {
        leftPressed = false;
      } else if (event.key == "Right" || event.key == "ArrowRight") {
        rightPressed = false;
      } else if (event.key == "Up" || event.key == "ArrowUp") {
        upPressed = false;
      } else if (event.key == "Down" || event.key == "ArrowDown") {
        downPressed = false;
      }
    }

// Function to update the game state (position of spider and fly)
    function update() {
      // Clearing the canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

// Drawing the spider
      context.beginPath();
      context.rect(spiderX, spiderY, spiderSize, spiderSize);
      context.fillStyle = "black";
      context.fill();
      context.closePath();

// Drawing the fly
      context.beginPath();
      context.rect(flyX, flyY, flySize, flySize);
      context.fillStyle = "red";
      context.fill();
      context.closePath();

// Spider movement
      if (leftPressed && spiderX > 0) {
        spiderX -= spiderSpeed;
      } else if (rightPressed && spiderX < canvas.width - spiderSize) {
        spiderX += spiderSpeed;
      } else if (upPressed && spiderY > 0) {
        spiderY -= spiderSpeed;
      } else if (downPressed && spiderY < canvas.height - spiderSize) {
        spiderY += spiderSpeed;
      }

// Fly movement
      if (flyX < spiderX) {
        flyX += flySpeed;
      } else if (flyX > spiderX) {
        flyX -= flySpeed;
      }
      if (flyY < spiderY) {
        flyY += flySpeed;
      } else if (flyY > spiderY) {
        flyY -= flySpeed;
      }

// Collision detection
      if (
        spiderX < flyX + flySize &&
        spiderX + spiderSize > flyX &&
        spiderY < flyY + flySize &&
        spiderY + spiderSize > flyY
      ) {
        alert("¡Has atrapado a la mosca! ¡Has ganado el juego!");
        document.location.reload();
      }

// Updating the game state at 60 frames per second
      requestAnimationFrame(update);
    }

// Starting the game
    update();
  </script>
</body>
</html>