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

No:2300

7507

←

Prev Next

→

魚
Developer はいき｜Date and time 23/6/20 21:37:46
Build time 57.69 sec｜Game capacity 5.416KB｜

Script

魚釣りゲーム

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>魚釣りゲーム</title>
  <style>
    body {
      font-family: sans-serif;
      text-align: center;
    }
    #game-area {
      position: relative;
      display: inline-block;
      width: 100%;
      height: 400px;
      background-image: url('https://i.pinimg.com/originals/f2/f3/5c/f2f35c8f11c28da06f1a53a8f3796dc6.gif');
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }
    .fish-shadow {
      position: absolute;
      width: 50px;
      height: 50px;
      background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/237/fish_1f41f.png');
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      cursor: pointer;
    }
    .fish {
      position: absolute;
      width: 80px;
      height: 80px;
      background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/237/fish_1f41f.png');
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      animation: swim 2s alternate infinite linear;
      cursor: pointer;
    }
    .kajiki {
      width: 100px;
      height: 100px;
      background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/237/fish_1f988.png');
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      animation: swim 2s alternate infinite linear;
      cursor: pointer;
    }
    @keyframes swim {
      0% {
        transform: translateX(-50%);
      }
      100% {
        transform: translateX(150%);
      }
    }
  </style>
</head>
<body>
  <h1>魚釣りゲーム</h1>
  <p id="timer">30</p>
  <div id="game-area">
    <div class="fish-shadow" style="left: 20%; top: 60%;"></div>
    <div class="fish-shadow" style="left: 60%; top: 30%;"></div>
    <div class="fish-shadow" style="left: 40%; top: 20%;"></div>
    <div class="fish-shadow" style="left: 80%; top: 80%;"></div>
    <div class="fish-shadow" style="left: 25%; top: 10%;"></div>
    <div class="fish-shadow" style="left: 70%; top: 50%;"></div>
    <div class="fish-shadow" style="left: 10%; top: 30%;"></div>
    <div class="fish-shadow" style="left: 90%; top: 20%;"></div>
    <div class="kajiki" style="display: none; left: 50%; top: 50%;"></div>
  </div>

let countdown = 30;

setInterval(() => {
      countdown--;
      document.querySelector('#timer').textContent = countdown;
      if (countdown === 0) {
        endGame();
      }
    }, 1000);

function endGame() {
      fishShadows.forEach(fishShadow => fishShadow.style.display = 'none');
      kajiki.style.display = 'none';
      alert('終了！お疲れ様でした！');
    }

fishShadows.forEach(fishShadow => {
      fishShadow.addEventListener('click', () => {
        fishShadow.style.display = 'none';
        const fish = createFish();
        fish.style.top = (Math.random() * 80 + 10) + '%';
        fish.style.display = 'block';
        setTimeout(() => {
          fish.style.display = 'none';
        }, 1000 + Math.random() * 2000);
        document.querySelector('#game-area').appendChild(fish);
      })
    });

let isTouching = false;
    let touchStartX;
    let touchStartY;
    let touchEndX;
    let touchEndY;

document.addEventListener('touchstart', event => {
      isTouching = true;
      touchStartX = event.changedTouches[0].clientX;
      touchStartY = event.changedTouches[0].clientY;
    });

function isTouchingFish(fish, touchX, touchY) {
      const rect = fish.getBoundingClientRect();
      const fishX = rect.left + rect.width / 2;
      const fishY = rect.top + rect.height / 2;
      const distance = Math.sqrt((touchX - fishX) ** 2 + (touchY - fishY) ** 2);
      return distance < rect.width / 2;
    }
  </script>
</body>
</html>