AI game creator

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

No:142

268

←

Prev Next

→

Ants Nest Games
Developer ひさひさ｜Date and time 23/5/27 17:15:52
Build time 107.373 sec｜Game capacity 4.467KB｜

Script

スコア：0

ゲームオーバー
スコア：0

アリの巣ゲームは、キャンバス上でアリを操作して、エサを集めるゲームです。アリを矢印キーで移動させ、エサに接触するとスコアが加算されます。しかし、壁に接触するとゲームオーバーとなります。なるべくスマホでプレイしやすいように、簡単な操作と絵文字でデザインしました。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>アリの巣ゲーム</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
        text-align: center;
      }
      canvas {
        border: 2px solid black;
      }
      #score {
        font-size: 24px;
        margin-top: 10px;
      }
      #gameover {
        display: none;
        font-size: 36px;
        color: red;
        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <div id="score">スコア：0</div>
    <div id="gameover">ゲームオーバー<br>スコア：0</div>
    <script>
      // キャンバスの準備
      const canvas = document.getElementById('canvas');
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight - 50;
      const context = canvas.getContext('2d');
      
      // スコアの準備
      let score = 0;
      const scoreElement = document.getElementById('score');
      
      // ゲームオーバーの準備
      const gameoverElement = document.getElementById('gameover');
      
      // アリの準備（位置、サイズ、速度）
      let antX = canvas.width / 2;
      let antY = canvas.height / 2;
      const antWidth = 50;
      const antHeight = 50;
      let antSpeedX = 0;
      let antSpeedY = 0;
      
      // エサの準備（位置、サイズ）
      const foodX = Math.random() * (canvas.width - antWidth);
      const foodY = Math.random() * (canvas.height - antHeight);
      const foodWidth = 50;
      const foodHeight = 50;
      
      // キーボードのイベントリスナー
      document.addEventListener('keydown', function(event) {
        switch (event.key) {
          case 'ArrowLeft':
            antSpeedX = -10;
            break;
          case 'ArrowRight':
            antSpeedX = 10;
            break;
          case 'ArrowUp':
            antSpeedY = -10;
            break;
          case 'ArrowDown':
            antSpeedY = 10;
            break;
        }
      });
      document.addEventListener('keyup', function(event) {
        switch (event.key) {
          case 'ArrowLeft':
            antSpeedX = 0;
            break;
          case 'ArrowRight':
            antSpeedX = 0;
            break;
          case 'ArrowUp':
            antSpeedY = 0;
            break;
          case 'ArrowDown':
            antSpeedY = 0;
            break;
        }
      });
      
      // ゲームループ
      function update() {
        // アリの移動
        antX += antSpeedX;
        antY += antSpeedY;
        // アリとエサの当たり判定
        if (antX < foodX + foodWidth &&
            antX + antWidth > foodX &&
            antY < foodY + foodHeight &&
            antY + antHeight > foodY) {
          // スコアを加算
          score += 10;
          scoreElement.textContent = 'スコア：' + score;
          // 新しいエサを配置
          foodX = Math.random() * (canvas.width - antWidth);
          foodY = Math.random() * (canvas.height - antHeight);
          draw();
        }
        // アリと壁の当たり判定
        if (antX < 0 || antX > canvas.width - antWidth || antY < 0 || antY > canvas.height - antHeight) {
          // ゲームオーバー
          gameoverElement.style.display = 'block';
          gameoverElement.textContent = 'ゲームオーバー\nスコア：' + score;
        }
        else {
          draw();
          requestAnimationFrame(update);
        }
      }
      
      // 描画
      function draw() {
        // 背景
        context.fillStyle = 'white';
        context.fillRect(0, 0, canvas.width, canvas.height);
        // エサ
        context.fillStyle = 'yellow';
        context.fillRect(foodX, foodY, foodWidth, foodHeight);
        // アリ
        context.fillStyle = 'orange';
        context.fillRect(antX, antY, antWidth, antHeight);
      }
      
      // ゲーム開始
      draw();
      requestAnimationFrame(update);
    </script>
  </body>
</html>