Mississippi pond turtle and black bass releases's game

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

No:3714

4229

←

Prev Next

→

Mississippi pond turtle and black bass releases
Developer AI絵師｜Date and time 23/6/26 10:14:32
Build time 29.044 sec｜Game capacity 3.073KB｜

Script

ゲーム

←

Prev　Next

→ 　

Back　

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

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

ゲーム

<html>
  <head>
    <meta charset="UTF-8">
    <title>ミシシッピアカミミガメとブラックバスの放逐</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
    <script>
      const canvas = document.getElementById("canvas");
      const context = canvas.getContext("2d");
      const turtleImage = document.getElementById("turtle");
      const fishImage = document.getElementById("fish");
      const width = canvas.width;
      const height = canvas.height;
      
      class Turtle {
        constructor() {
          this.x = 50;
          this.y = height / 2;
          this.radius = 30;
          this.speedX = 0;
          this.speedY = 0;
          this.maxSpeed = 5;
        }
        
        move() {
          this.x += this.speedX;
          this.y += this.speedY;
          if (this.x - this.radius <= 0) {
            this.x = this.radius;
          } else if (this.x + this.radius >= width) {
            this.x = width - this.radius;
          }
          if (this.y - this.radius <= 0) {
            this.y = this.radius;
          } else if (this.y + this.radius >= height) {
            this.y = height - this.radius;
          }
        }
        
        draw() {
          context.drawImage(turtleImage, this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2);
        }
      }
      
      class Fish {
        constructor() {
          this.x = width - 50;
          this.y = Math.random() * height;
          this.radius = 20;
          this.speedX = -Math.random() * 5 - 1;
          this.speedY = (Math.random() - 0.5) * 10;
        }
        
        move() {
          this.x += this.speedX;
          this.y += this.speedY;
          if (this.x + this.radius < 0) {
            this.reset();
          }
        }
        
        reset() {
          this.x = width - 50;
          this.y = Math.random() * height;
          this.speedX = -Math.random() * 5 - 1;
          this.speedY = (Math.random() - 0.5) * 10;
        }
        
        draw() {
          context.drawImage(fishImage, this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2);
        }
      }
      
      const turtle = new Turtle();
      const fishList = [];
      for (let i = 0; i < 10; i++) {
        const fish = new Fish();
        fishList.push(fish);
      }
      
      function update() {
        context.clearRect(0, 0, width, height);
        turtle.move();
        turtle.draw();
        fishList.forEach(function(fish) {
          fish.move();
          fish.draw();
          if (Math.sqrt(Math.pow(turtle.x - fish.x, 2) + Math.pow(turtle.y - fish.y, 2)) < turtle.radius + fish.radius) {
            fish.reset();
          }
        });
        requestAnimationFrame(update);
      }
      
      update();
      
    </script>
  </head>
  <body>
    <canvas id="canvas" width="480" height="320"></canvas>
    <img src="turtle.png" id="turtle" style="display: none;">
    <img src="fish.png" id="fish" style="display: none;">
  </body>
</html>