AI game creator

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

No:45591

108

←

Prev Next

→

Dog bites a sheep
Developer User19614｜Date and time 24/2/20 20:59:21
Build time 7.815 sec｜Game capacity 1.936KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```
<!DOCTYPE html>
<html>
<head>
  <title>Dog vs Sheep Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

const dogImg = new Image();
    dogImg.src = 'dog.png';

const sheepImg = new Image();
    sheepImg.src = 'sheep.png';

let dogX = 50;
    let dogY = 50;
    let sheepX = 200;
    let sheepY = 200;

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

ctx.drawImage(dogImg, dogX, dogY, 50, 50);
      ctx.drawImage(sheepImg, sheepX, sheepY, 50, 50);

requestAnimationFrame(draw);
    }

function moveDog(event) {
      switch (event.key) {
        case 'ArrowUp':
          dogY -= 10;
          break;
        case 'ArrowDown':
          dogY += 10;
          break;
        case 'ArrowLeft':
          dogX -= 10;
          break;
        case 'ArrowRight':
          dogX += 10;
          break;
      }
    }

function moveSheep() {
      const direction = Math.floor(Math.random()*4);

switch (direction) {
        case 0:
          sheepY -= 5;
          break;
        case 1:
          sheepY += 5;
          break;
        case 2:
          sheepX -= 5;
          break;
        case 3:
          sheepX += 5;
          break;
      }
    }

function checkCollision() {
      if (dogX < sheepX + 50 &&
          dogX + 50 > sheepX &&
          dogY < sheepY + 50 &&
          dogY + 50 > sheepY) {
        alert('Dog caught the sheep! Game over.');
        clearInterval(gameLoop);
        window.removeEventListener('keydown', moveDog);
      }
    }

window.addEventListener('keydown', moveDog);

const gameLoop = setInterval(() => {
      moveSheep();
      checkCollision();
    }, 1000 / 30);

dogImg.onload = () => {
      sheepImg.onload = draw;
    };
  </script>
</body>
</html>
```