Make a sword game and sword having drogons power's game

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

No:49451

←

Prev Next

→

Make a sword game and sword having drogons power
Developer User21054｜Date and time 24/3/5 3:08:41
Build time 9.802 sec｜Game capacity 2.23KB｜

Script

In this game, the player controls a sword with the power of a dragon to slay a dragon on the canvas. The player can move the sword using the arrow keys and when the sword collides with the dragon, an alert message pops up indicating victory. Players can continue to play and slay the dragon by maneuvering the sword.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Sword Game</title>
</head>
<body>
  <canvas width="400" height="400" style="border:1px solid black;"></canvas>
  
  <script>
    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');
    
    const sword = {
      x: 200,
      y: 200,
      size: 50,
      power: 'Dragon',
      color: 'silver'
    };
    
    const dragon = {
      x: Math.random() * 360 + 20,
      y: Math.random() * 360 + 20,
      size: 40,
      color: 'red'
    };
    
    function drawSword() {
      ctx.fillStyle = sword.color;
      ctx.fillRect(sword.x, sword.y, sword.size, sword.size);
    }
    
    function drawDragon() {
      ctx.fillStyle = dragon.color;
      ctx.beginPath();
      ctx.arc(dragon.x, dragon.y, dragon.size, 0, Math.PI * 2);
      ctx.fill();
    }
    
    function detectCollision() {
      if (sword.x < dragon.x + dragon.size &&
          sword.x + sword.size > dragon.x &&
          sword.y < dragon.y + dragon.size &&
          sword.y + sword.size > dragon.y) {
        alert('You have slain the Dragon with your Sword of Power!');
        resetDragon();
      }
    }
    
    function resetDragon() {
      dragon.x = Math.random() * 360 + 20;
      dragon.y = Math.random() * 360 + 20;
    }
    
    function moveSword(event) {
      switch(event.key) {
        case 'ArrowUp':
          sword.y -= 10;
          break;
        case 'ArrowDown':
          sword.y += 10;
          break;
        case 'ArrowLeft':
          sword.x -= 10;
          break;
        case 'ArrowRight':
          sword.x += 10;
          break;
      }
      detectCollision();
      draw();
    }
    
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawSword();
      drawDragon();
    }
    
    window.addEventListener('keydown', moveSword);
    
    draw();
  </script>
</body>
</html>
```