AI game creator

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

No:23728

←

Prev Next

→

Shooting fish
Developer User10914｜Date and time 23/11/3 10:16:44
Build time 67.336 sec｜Game capacity 3.539KB｜

Script

Sure! Here's a simple implementation of a shooting fish game using JavaScript, HTML, and pictograms:

In this game, you control a fish and shoot bullets to catch other fish. The fish moves horizontally based on touch/clicks on the canvas, and bullets are fired when you release your touch/click. If a bullet collides with another fish, it is considered shot. The game continuously loops and renders the fish and bullet positions on the canvas. Note: In this implementation, you would need to provide your own fish and bullet pictogram images (`emozi_all/fish.png` and `emozi_apple.png`) to display on the canvas.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

Sure! Here's a simple implementation of a shooting fish game using JavaScript, HTML, and pictograms:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Shooting Fish Game</title>
  </head>
  <body>
    <canvas id="gameCanvas" width="300" height="300"></canvas>

// Fish properties
      const fishSize = 50; // Size of the fish pictogram
      let fishX = canvas.width / 2 - fishSize / 2; // Initial fish position
      let isFishShot = false; // Track if the fish is shot

// Bullet properties
      const bulletSize = 10; // Size of the bullet pictogram
      let bulletX = canvas.width / 2 - bulletSize / 2; // Initial bullet position
      let bulletY = canvas.height - bulletSize; // Initial bullet position
      let isBulletFired = false; // Track if the bullet is fired

// Check for fish bullet collision
      function checkCollision() {
        if (bulletX < fishX + fishSize && bulletX + bulletSize > fishX && bulletY < fishSize && bulletY + bulletSize > 0) {
          isFishShot = true;
        }
      }

// Draw fish and bullet on canvas
      function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);

// Draw fish pictogram
        const fishImage = new Image();
        fishImage.onload = function () {
          if (!isFishShot) {
            context.drawImage(fishImage, fishX, 0, fishSize, fishSize);
          }
        };
        fishImage.src = 'fish.png';

// Draw bullet pictogram
        const bulletImage = new Image();
        bulletImage.onload = function () {
          if (!isBulletFired) {
            bulletX = fishX + fishSize / 2 - bulletSize / 2;
            context.drawImage(bulletImage, bulletX, bulletY, bulletSize, bulletSize);
          }
        };
        bulletImage.src = 'bullet.png';

// Update fish position based on touch/click event
        canvas.addEventListener('touchmove', function (event) {
          const touchX = event.touches[0].clientX - canvas.offsetLeft - fishSize / 2;
          if (touchX >= 0 && touchX <= canvas.width - fishSize) {
            fishX = touchX;
          }
        });

// Shoot bullet on touch/click event
        canvas.addEventListener('touchend', function () {
          if (!isBulletFired) {
            isBulletFired = true;
            bulletY = canvas.height - bulletSize;
            bulletX = fishX + fishSize / 2 - bulletSize / 2;
            setInterval(function () {
              bulletY -= 3; // Bullet speed
              if (bulletY < 0) {
                // Reset bullet position
                isBulletFired = false;
                bulletY = canvas.height - bulletSize;
              }
              checkCollision();
            }, 10);
          }
        });

// Game loop
        requestAnimationFrame(draw);
      }

// Start the game
      draw();
    </script>
  </body>
</html>
```

Note: In this implementation, you would need to provide your own fish and bullet pictogram images (`fish.png` and `bullet.png`) to display on the canvas.