A warrior protecting a castle's game

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

No:14899

174

←

Prev Next

→

A warrior protecting a castle
Developer anonymous｜Date and time 23/9/4 21:35:42
Build time 2374 sec｜Game capacity 2.374KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Castle Defender Game</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>

// Set up the warrior object
  var warrior = {
    x: canvas.width / 2,
    y: canvas.height / 2,
    width: 50,
    height: 50,
    color: "#FF0000"
  };

// Set up the castle object
  var castle = {
    x: canvas.width / 2 - 25,
    y: canvas.height / 2 - 25,
    width: 100,
    height: 100,
    color: "#0000FF"
  };

// Function to draw the warrior
  function drawWarrior() {
    ctx.fillStyle = warrior.color;
    ctx.fillRect(warrior.x, warrior.y, warrior.width, warrior.height);
  }

// Function to draw the castle
  function drawCastle() {
    ctx.fillStyle = castle.color;
    ctx.fillRect(castle.x, castle.y, castle.width, castle.height);
  }

// Function to update the game state
  function updateGame() {
    // Clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the warrior and castle
    drawWarrior();
    drawCastle();

// Check for collision between warrior and castle
    if (
      warrior.x < castle.x + castle.width &&
      warrior.x + warrior.width > castle.x &&
      warrior.y < castle.y + castle.height &&
      warrior.y + warrior.height > castle.y
    ) {
      alert("Castle breached! Game over.");
      document.location.reload();
    }
  }

// Function to handle warrior movement
  function moveWarrior(event) {
    switch (event.key) {
      case "ArrowUp":
        if (warrior.y > 0) {
          warrior.y -= 10;
        }
        break;
      case "ArrowDown":
        if (warrior.y < canvas.height - warrior.height) {
          warrior.y += 10;
        }
        break;
      case "ArrowLeft":
        if (warrior.x > 0) {
          warrior.x -= 10;
        }
        break;
      case "ArrowRight":
        if (warrior.x < canvas.width - warrior.width) {
          warrior.x += 10;
        }
        break;
    }
  }

// Add event listener for warrior movement
  document.addEventListener("keydown", moveWarrior);

// Start the game loop
  setInterval(updateGame, 20);
</script>

</body>
</html>