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

No:37769

←

Prev Next

→

スイカゲーム
Developer User17126｜Date and time 24/1/21 15:49:53
Build time 7.441 sec｜Game capacity 1.544KB｜

Script

了解です。以下にスイカゲームのプログラム例を示します。

スイカゲーム

Score: 0

クリックしてスイカを割ろう！

🍉

このプログラムでは、スイカをクリックするとスイカが割れて爆発するアニメーションが表示され、スコアが増えます。スコアが10に達すると「おめでとう！スイカ割り成功！」とメッセージが表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

了解です。以下にスイカゲームのプログラム例を示します。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      background-color: lightblue;
      text-align: center;
      padding-top: 100px;
    }
    #watermelon {
      font-size: 100px;
      cursor: pointer;
    }
  </style>
  <title>スイカゲーム</title>
</head>
<body>
  <h1>スイカゲーム</h1>
  <p id="score">Score: 0</p>
  <p id="message"></p>
  <p>クリックしてスイカを割ろう！</p>
  <p>
    <span id="watermelon" onclick="splitWatermelon()">🍉</span>
  </p>

function splitWatermelon() {
      var watermelon = document.getElementById("watermelon");
      watermelon.innerHTML = "💥";
      score++;

var scoreText = document.getElementById("score");
      scoreText.innerHTML = "Score: " + score;

setTimeout(function() {
        watermelon.innerHTML = "🍉";
      }, 1000);

if (score >= 10) {
        var message = document.getElementById("message");
        message.innerHTML = "おめでとう！スイカ割り成功！";
      }
    }
  </script>
</body>
</html>
```