festival game in which participants try to catch goldfish in a shallow paper ladle's game

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

No:2524

1217

←

Prev Next

→

festival game in which participants try to catch g..ALL
Developer User1006｜Date and time 23/6/21 20:56:12
Build time 33.963 sec｜Game capacity 2.991KB｜

Script

SCORE: 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;
        background-color: #33cccc;
        font-family: Arial, Helvetica, sans-serif;
      }
      canvas {
        display: block;
        margin: 0 auto;
      }
      #score {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 24px;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="320" height="480"></canvas>
    <div id="score">SCORE: 0</div>
    
    <script>
      // 金魚の画像
      const fishImg = new Image();
      fishImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/fish_1f41f.png";
      
      // キャンバスの設定
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");
      let score = 0;
      
      // 金魚の情報を格納する配列
      let fishes = [];
      
      // 金魚のクラス
      class Fish {
        constructor() {
          this.x = Math.floor(Math.random() * (canvas.width - 40)) + 20; // x座標
          this.y = -50; // y座標
          this.speed = Math.floor(Math.random() * 3) + 1; // 速度
          this.size = Math.floor(Math.random() * 40) + 20; // サイズ
          this.isCaught = false; // 捕まっているかどうか
        }
        
        // 描画関数
        draw() {
          ctx.drawImage(fishImg, this.x - this.size/2, this.y - this.size/2, this.size, this.size);
        }
        
        // 移動関数
        move() {
          this.y += this.speed;
          if (this.y > canvas.height + 50) {
            this.isCaught = true;
          }
        }
      }
      
      // 金魚を生成する関数
      function addFish() {
        fishes.push(new Fish());
      }
      
      // クリックされたときの処理
      canvas.addEventListener("click", function(e) {
        for (let i=0; i<fishes.length; i++) {
          if (!fishes[i].isCaught) {
            const dist = Math.sqrt(Math.pow(e.offsetX - fishes[i].x, 2) + Math.pow(e.offsetY - fishes[i].y, 2));
            if (dist < fishes[i].size/2) {
              fishes[i].isCaught = true;
              score += Math.floor(fishes[i].size / 10);
            }
          }
        }
      });
      
      // アニメーション関数
      function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "#fff";
        ctx.font = "24px Arial";
        ctx.fillText("SCORE: " + score, 10, 30);
        for (let i=0; i<fishes.length; i++) {
          fishes[i].draw();
          fishes[i].move();
        }
        fishes = fishes.filter(fish => !fish.isCaught);
        if (Math.random() < 0.05) {
          addFish();
        }
        requestAnimationFrame(animate);
      }
      
      addFish();
      animate();
    </script>
  </body>
</html>