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

No:2551

1691

Power up with okra
Developer anonymous｜Date and time 23/6/21 23:07:09
Build time 49.595 sec｜Game capacity 3.028KB｜

HTMLファイルを作って，JavaScriptでゲームを実装します。スマホで操作することを前提としているので，操作性を考慮してレイアウトと操作方法を設計します。ゲームは「オクラでパワーアップ」というタイトルで，画面上にはオクラが表示されます。プレイヤーがオクラをタップすると，オクラがパワーアップして成長します。成長度は画面上に表示されます。成長度が一定の値に達すると，画面上には別のオクラが表示されます。このオクラをタップすると，また別のオクラが表示されます。これを繰り返して、どれだけ多くのオクラをパワーアップさせられるか競います。操作方法は、スマホの画面上でタップするだけです。レイアウトは、画面上部にスコアを表示し、画面下部に成長度を表示します。画面中央にオクラを配置します。絵文字は、「🌱」をオクラのアイコンとして使用します。成長度を表す絵文字は、「🌿」を使用します。スコアの表示は、「👑ＸＸＸ」のようにします。実際のプログラムは以下の通りです。

オクラでパワーアップ

🌱

👑0

🌿0

以上が「オクラでパワーアップ」というゲームを1枚のHTMLファイルで実装する例です。スコアと成長度を視覚的に表す絵文字などを使用して、楽しみながらプレイできるようにしました。

→ 　

0　

0　

[PR]現在の新着人気ランキング

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

(C)2023 HisashiApp

HTMLファイルを作って，JavaScriptでゲームを実装します。スマホで操作することを前提としているので，操作性を考慮してレイアウトと操作方法を設計します。

ゲームは「オクラでパワーアップ」というタイトルで，画面上にはオクラが表示されます。プレイヤーがオクラをタップすると，オクラがパワーアップして成長します。成長度は画面上に表示されます。

成長度が一定の値に達すると，画面上には別のオクラが表示されます。このオクラをタップすると，また別のオクラが表示されます。これを繰り返して、どれだけ多くのオクラをパワーアップさせられるか競います。

操作方法は、スマホの画面上でタップするだけです。レイアウトは、画面上部にスコアを表示し、画面下部に成長度を表示します。画面中央にオクラを配置します。

絵文字は、「🌱」をオクラのアイコンとして使用します。成長度を表す絵文字は、「🌿」を使用します。スコアの表示は、「👑ＸＸＸ」のようにします。

実際のプログラムは以下の通りです。

```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>オクラでパワーアップ</title>
<style>
body {
  background-color: lightgreen;
  text-align: center;
}
#okra {
  font-size: 10rem;
  cursor: pointer;
}
#score {
  font-size: 3rem;
}
#growth {
  font-size: 2rem;
}
</style>
</head>
<body>
<h1>オクラでパワーアップ</h1>
<div id="okra">🌱</div>
<div id="score">👑0</div>
<div id="growth">🌿0</div>
<script>
let score = 0;
let growth = 0;
let okra = document.getElementById("okra");

okra.addEventListener("click", function() {
  growth++;
  if (growth >= 10) {
    okra.textContent = "🍆";
    score++;
    growth = 0;
    showNewOkra();
  } else {
    okra.textContent = "🌱".repeat(growth + 1);
  }
  document.getElementById("score").textContent = "👑" + score;
  document.getElementById("growth").textContent = "🌿" + growth;
});

function showNewOkra() {
  let newOkra = document.createElement("div");
  newOkra.id = "okra";
  newOkra.style.fontSize = "10rem";
  newOkra.style.cursor = "pointer";
  newOkra.textContent = "🌱";
  newOkra.addEventListener("click", function() {
    okra = newOkra;
    growth = 0;
    showNextOkra();
  });
  document.body.appendChild(newOkra);
}

function showNextOkra() {
  let okraCount = document.querySelectorAll("#okra").length;
  if (okraCount <= 5) {
    showNewOkra();
  } else {
    alert("ゲームオーバー！あなたのスコアは" + score + "です。");
  }
}

showNextOkra();
</script>
</body>
</html>
```

以上が「オクラでパワーアップ」というゲームを1枚のHTMLファイルで実装する例です。スコアと成長度を視覚的に表す絵文字などを使用して、楽しみながらプレイできるようにしました。