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

No:3336

1994

←

Prev Next

→

Somali (people)
Developer User3655｜Date and time 23/6/24 14:36:14
Build time 30.582 sec｜Game capacity 3.171KB｜

Script

ン語で記述します。

かるた大会

「よーい、どん！」と言ったら、カードを取りに行こう！👇🏻

これは、「かるた大会」というカードゲームのアプリです。スタートボタンをタップすると、ゲームが始まります。2秒ごとに新しいカードが表示されますので、そのカードを取りに行きましょう。カードを取ると、次のカードが表示されます。すべてのカードを取り終えたら、ゲームクリアです。もう一度遊びたい場合は、再度スタートボタンをタップしてください。楽しんでください！

←

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>
      body {
        background-color: #FFE5B4;
        text-align: center;
        font-size: 24px;
        color: #B22222;
      }
      div {
        margin: 10px;
      }
      img {
        height: 200px;
        margin: 10px;
      }
      button {
        font-size: 18px;
        background-color: #F5DEB3;
        border-radius: 5px;
        border: none;
        padding: 10px;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <h1>かるた大会</h1>
    <div id="start">
      <p>「よーい、どん！」と言ったら、カードを取りに行こう！<span>👇🏻</span></p>
      <button onclick="start()">スタート！<span>💥</span></button>
    </div>
    <div id="playing" style="display: none;">
      <p id="text">「いっせーのーせ！」</p>
      <img id="card" src="">
      <button onclick="gotCard()">取った！<span>👍</span></button>
    </div>
    <div id="end" style="display: none;">
      <p>おめでとう！あなたの勝ちです！<span>🎉</span></p>
      <button onclick="playAgain()">もう一度遊ぶ</button>
    </div>
    <script>
      const cards = ["hana", "tsuru", "ushi", "kame"];
      let currentCardIndex = 0;
      let isPlaying = false;
      let timerId;

function start() {
        isPlaying = true;
        document.getElementById("start").style.display = "none";
        document.getElementById("playing").style.display = "block";
        timerId = setInterval(showNextCard, 2000);
      }

function showNextCard() {
        if (currentCardIndex >= cards.length) {
          endGame();
          return;
        }
        const image = document.getElementById("card");
        const cardName = cards[currentCardIndex];
        const imagePath = cardName + ".png";
        image.src = imagePath;
        const text = document.getElementById("text");
        text.textContent = cardName;
        currentCardIndex++;
      }

function endGame() {
        clearInterval(timerId);
        isPlaying = false;
        document.getElementById("playing").style.display = "none";
        document.getElementById("end").style.display = "block";
      }

function gotCard() {
        if (!isPlaying) {
          return;
        }
        showNextCard();
      }

function playAgain() {
        currentCardIndex = 0;
        document.getElementById("end").style.display = "none";
        document.getElementById("start").style.display = "block";
      }
    </script>
  </body>
</html>