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

No:1473

105

←

Prev Next

→

Games to play with cats
Developer User3348｜Date and time 23/6/18 17:10:47
Build time 36.544 sec｜Game capacity 2.792KB｜

Script

にゃんにゃんゲーム

猫を操作して同じ色の魚を集めよう！

←

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>
      canvas {
        border: 2px solid black;
      }
    </style>
  </head>
  <body>
    <h1>にゃんにゃんゲーム</h1>
    <p>猫を操作して同じ色の魚を集めよう！</p>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");
      const catEmoji = "🐱";
      const fishEmoji = ["🐟", "🐠", "🐡", "🦈", "🐳"];
      const catSize = 50;
      const fishSize = 30;
      let catX = canvas.width/2;
      let catY = canvas.height/2;
      let catColor = "black";
      let currFishX, currFishY, currFishColor;
      let score = 0;

document.addEventListener("keydown", moveCat);

function drawCat() {
        ctx.fillStyle = catColor;
        ctx.font = catSize + "px serif";
        ctx.fillText(catEmoji, catX, catY);
      }

function drawFish() {
        const randomIndex = Math.floor(Math.random() * fishEmoji.length);
        let randomColor = "rgb(" + Math.floor(Math.random() * 256) + ", " + Math.floor(Math.random() * 256) + ", " + Math.floor(Math.random() * 256) + ")";
        ctx.fillStyle = randomColor;
        ctx.font = fishSize + "px serif";
        ctx.fillText(fishEmoji[randomIndex], currFishX, currFishY);
        currFishColor = randomColor;
      }

function moveCat(event) {
        switch (event.code) {
          case "ArrowLeft":
            catX -= 10;
            break;
          case "ArrowRight":
            catX += 10;
            break;
          case "ArrowUp":
            catY -= 10;
            break;
          case "ArrowDown":
            catY += 10;
            break;
        }
        checkCollision();
      }

function checkCollision() {
        const catLeft = catX - catSize/2;
        const catRight = catX + catSize/2;
        const catTop = catY - catSize/2;
        const catBottom = catY + catSize/2;

if (currFishX >= catLeft && currFishX <= catRight && currFishY >= catTop && currFishY <= catBottom) {
          if (catColor === currFishColor) {
            score++;
          } else {
            score--;
          }
          generateFish();
        }
      }

function generateFish() {
        currFishX = Math.floor(Math.random() * canvas.width);
        currFishY = Math.floor(Math.random() * canvas.height);
        drawFish();
      }

function mainLoop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawCat();
        ctx.fillText(`Score: ${score}`, 10, 50);
        window.requestAnimationFrame(mainLoop);
      }

generateFish();
      mainLoop();
    </script>
  </body>
</html>