どうぶつスクールシミュレーター

🐶

🍗

この実装では、動物（🐶）が食べ物（🍗）を追いかけるゲームとして部分的にゲーム化されています。矢印キーを押すと、動物がそれに応じた方向に移動します。ただし、現時点では食べ物の動きやスコア計算などは行われておらず、追加の実装が必要です。

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>どうぶつスクールシミュレーター</title>
</head>
<body>
  <h1>どうぶつスクールシミュレーター</h1>
  
  <div id="game-container">
    <div id="animal">🐶</div>
    <div id="food">🍗</div>
  </div>

// ゲームコンテナの幅と高さを取得
    const container = document.getElementById("game-container");
    const containerWidth = container.offsetWidth;
    const containerHeight = container.offsetHeight;

// キー操作による動き
    document.addEventListener("keydown", function(event) {
      const key = event.key;

switch(key) {
        case "ArrowUp":
          moveUp();
          break;
        case "ArrowDown":
          moveDown();
          break;
        case "ArrowLeft":
          moveLeft();
          break;
        case "ArrowRight":
          moveRight();
          break;
        default:
          break;
      }
    });

function moveUp() {
      if (animalY > 0) {
        animalY -= 10;
      }
      updatePosition();
    }

function moveDown() {
      if (animalY < containerHeight - 50) {
        animalY += 10;
        updatePosition();
      }
    }

function moveLeft() {
      if (animalX > 0) {
        animalX -= 10;
      }
      updatePosition();
    }

function moveRight() {
      if (animalX < containerWidth - 50) {
        animalX += 10;
      }
      updatePosition();
    }

function updatePosition() {
      const animal = document.getElementById("animal");
      animal.style.left = animalX + "px";
      animal.style.top = animalY + "px";
    }
  </script>
</body>
</html>
```