A cat, which gradually grows huge in length and width alternately, absorbs many dogs while rotating. After a certain size, it returns to a smaller size.'s game

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

No:5140

1701

←

Prev Next

→

A cat, which gradually grows huge in length and wi..ALL
Developer User3812｜Date and time 23/6/29 19:28:23
Build time 36.181 sec｜Game capacity 3.527KB｜

Script

以下は、JavaScriptを使用して実装された縦横交互に巨大化する猫が回転しながら犬を吸収するゲームの例です。絵文字は使用していませんが、スマートフォンで遊ぶことができます。ゲームが終了すると、猫は一定のサイズに戻ります。

このコードは、猫の初期サイズが50pxで、縦横交互に移動します。ゲームエリアの境界にぶつかると反転します。犬は1秒ごとにランダムな位置に生成され、猫と重なると吸収されます。猫のサイズは10pxずつ増え、最大サイズは100pxです。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!doctype html>
<html>
<head>
  <style>
    #game-area {
      position: relative;
      width: 400px;
      height: 400px;
      border: 1px solid black;
    }

#cat {
      position: absolute;
      width: 50px;
      height: 50px;
      background-color: orange;
      border-radius: 50%;
    }

.dog {
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: gray;
      border-radius: 50%;
    }
  </style>
</head>
<body>
  <div id="game-area">
    <div id="cat"></div>
  </div>
  
  <script>
    // 猫の情報
    let cat = {
      size: 50,
      positionX: 0,
      positionY: 0,
      directionX: 1,
      directionY: 1,
      maxBoundaryX: 400,
      maxBoundaryY: 400
    };

// ゲームエリアの情報
    const gameArea = document.getElementById('game-area');
    const gameAreaWidth = gameArea.offsetWidth;
    const gameAreaHeight = gameArea.offsetHeight;
    
    // 犬の生成と吸収
    function generateDog() {
      const dog = document.createElement('div');
      dog.classList.add('dog');
      gameArea.appendChild(dog);
      
      let dogPositionX = Math.random() * gameAreaWidth;
      let dogPositionY = Math.random() * gameAreaHeight;
      dog.style.left = dogPositionX + 'px';
      dog.style.top = dogPositionY + 'px';
      
      // 猫との当たり判定
      function checkCollision() {
        const catRect = document.getElementById('cat').getBoundingClientRect();
        const dogRect = dog.getBoundingClientRect();
        
        if (
          catRect.left < dogRect.right &&
          catRect.right > dogRect.left &&
          catRect.top < dogRect.bottom &&
          catRect.bottom > dogRect.top
        ) {
          absorbDog();
        }
      }
      
      // 犬の吸収
      function absorbDog() {
        cat.size += 10;
        cat.size = Math.min(cat.size, 100);
        cat.element.style.width = cat.size + 'px';
        cat.element.style.height = cat.size + 'px';
        dog.remove();
      }
      
      setInterval(checkCollision, 10);
    }

// 猫を動かす
    function moveCat() {
      cat.positionX += cat.directionX * 5;
      cat.positionY += cat.directionY * 5;

if (cat.positionX < 0 || cat.positionX > cat.maxBoundaryX - cat.size) {
        cat.directionX *= -1;
      }

if (cat.positionY < 0 || cat.positionY > cat.maxBoundaryY - cat.size) {
        cat.directionY *= -1;
      }

cat.element.style.left = cat.positionX + 'px';
      cat.element.style.top = cat.positionY + 'px';
    }

// ゲームの開始
    function startGame() {
      cat.element = document.getElementById('cat');
      cat.element.style.width = cat.size + 'px';
      cat.element.style.height = cat.size + 'px';
      
      setInterval(moveCat, 50);
      setInterval(generateDog, 1000);
    }

startGame();
  </script>
</body>
</html>
```