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

No:919

162

←

Prev Next

→

A game in which East becomes West when seven dogs ..ALL
Developer User3194｜Date and time 23/6/17 22:34:47
Build time 34.078 sec｜Game capacity 3.159KB｜

Script

7 人の犬を見つけてください！

以上が、7人の犬を見つけたら東が西になるゲームのHTMLコードです。JavaScriptを含め、スマホでも操作可能なようにデザインし、それぞれの犬には絵文字を使っています。プレイヤーが7匹の犬を見つけると「おめでとう！」というメッセージが表示されます。また、時間内に見つけられなかった場合は「時間切れ！」というメッセージが表示されます。リセットボタンもあり、ボタンを押すことでゲームをリセットできます。

←

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>Dogs Game</title>
    <style>
      body {
        font-size: 3rem;
        text-align: center;
      }
      button {
        font-size: 1.5rem;
        padding: 1rem;
        margin-top: 2rem;
      }
      #message {
        font-size: 2rem;
        margin-top: 2rem;
      }
    </style>
  </head>
  <body>
    <h1>7 人の犬を見つけてください！</h1>
    <img src="dog1.png" id="dog1">
    <img src="dog2.png" id="dog2">
    <img src="dog3.png" id="dog3">
    <img src="dog4.png" id="dog4">
    <img src="dog5.png" id="dog5">
    <img src="dog6.png" id="dog6">
    <img src="dog7.png" id="dog7">
    <div id="message"></div>
    <button id="start-btn">スタート</button>
    <button id="reset-btn">リセット</button>
    <script>
      const dogs = document.querySelectorAll('img');
      const startBtn = document.getElementById('start-btn');
      const resetBtn = document.getElementById('reset-btn');
      const message = document.getElementById('message');
      let count = 0;
      let time = 30;
      let timer = null;
      let isPlaying = false;

function init() {
        count = 0;
        time = 30;
        timer = null;
        isPlaying = false;
        message.textContent = '';
        dogs.forEach(dog => {
          dog.style.display = 'none';
          dog.addEventListener('click', countDogs);
        });
      }

function resetGame() {
        clearInterval(timer);
        init();
        dogs.forEach(dog => dog.removeEventListener('click', countDogs));
        startBtn.addEventListener('click', startGame);
      }

function countDogs() {
        count++;
        if (count === 7) {
          clearInterval(timer);
          isPlaying = false;
          message.textContent = 'おめでとう！7 人の犬を見つけました！';
          dogs.forEach(dog => dog.removeEventListener('click', countDogs));
        }
      }

init();
      startBtn.addEventListener('click', startGame);
      resetBtn.addEventListener('click', resetGame);
    </script>
  </body>
</html>