クスッと笑えて感動する！たった数行で作れるJavaScriptミニミニゲーム集

プロコム開発チーム

「JavaScriptって難しそう…」
「勉強しても途中で挫折しちゃう…」

そんなあなたにこそ試してほしい、たった数行で作れて、ちょっと感動するミニミニゲームを紹介します！

今回のテーマは「作って楽しい・動かして嬉しい・アレンジして学べる」。
初心者でもコピペですぐ動かせる、楽しい練習コード7選です。

Contents

0.1 1. ランダム励ましメッセージボタン
0.2 2. クリックジャンプゲーム（スコア付き）
0.3 3. カウントダウン宝探し
0.4 4. 背景チェンジでおしゃれ気分
0.5 5. ミニ診断メーカー
0.6 6. チャット風つぶやき記録
0.7 7. 星マークがマウスを追いかける！

1 🎁 まとめ：JavaScriptは楽しいから続く！

1. ランダム励ましメッセージボタン

🔧 コード例：

<button onclick="alert(['がんばって！', '君ならできる！', '休憩も大事！'][Math.floor(Math.random()*3)])">励ましボタン</button>

😊 なぜ感動する？

クリックするたびに違う言葉が出てくるワクワク感。
小さな応援が画面に現れるだけで、ちょっと笑顔になります。

💡 応用アイデア：

セリフを自分の好きなアイドル風に変えても面白い！
朝・昼・夜で内容を切り替えるのもアリ。

2. クリックジャンプゲーム（スコア付き）

🔧 コード例：

<div id="ball" onclick="score++ && moveBall()" style="width:50px;height:50px;background:red;position:absolute;"></div>
<script>
  let score = 0;
  function moveBall() {
    const ball = document.getElementById("ball");
    ball.style.top = Math.random()*400 + "px";
    ball.style.left = Math.random()*400 + "px";
    document.title = "スコア: " + score;
  }
  moveBall();
</script>

🎮 遊び方

赤いボールをクリックするとスコアが増えて、次の場所へ飛びます！

😊 なぜ感動する？

スコアがリアルタイムに更新される → 成長してる実感！

💡 応用アイデア：

画像に変えて「ネコを捕まえろ！」ゲームに
難易度アップで速く動く敵に変更も可能

3. カウントダウン宝探し

🔧 コード例：

<button onclick="startGame()">ゲーム開始</button>
<div id="msg"></div>
<script>
  function startGame() {
    let count = 5;
    const interval = setInterval(() => {
      document.getElementById("msg").innerText = "残り: " + count + "秒";
      if (count-- === 0) {
        clearInterval(interval);
        alert("宝は消えてしまった…");
      }
    }, 1000);
  }
</script>

⏱ ゲーム内容

制限時間内に次のボタンやヒントを探す宝探し系の土台に。

😊 なぜ感動する？

ドキドキするカウントダウン演出。簡単だけどワクワク！

4. 背景チェンジでおしゃれ気分

🔧 コード例：

<button onclick="document.body.style.background = '#' + Math.floor(Math.random()*16777215).toString(16)">背景チェンジ</button>

🎨 楽しみ方

押すたびに背景の色がガラリと変わる！自分だけのテーマカラーも探せるかも？

😊 なぜ感動する？

「こんなに自由に色が変えられるんだ！」という発見。

💡 応用アイデア：

「今日のラッキーカラー占い」にも発展できそう！

5. ミニ診断メーカー

🔧 コード例：

<input id="name" placeholder="名前を入力">
<button onclick="diagnose()">診断する</button>
<p id="result"></p>
<script>
  function diagnose() {
    const name = document.getElementById("name").value;
    const results = ["天才肌", "癒し系", "行動派", "ムードメーカー"];
    const index = name.length % results.length;
    document.getElementById("result").innerText = name + "さんは" + results[index] + "です！";
  }
</script>

😊 なぜ感動する？

入力→結果表示の流れに「作った感」「動いた感」がある！

💡 応用アイデア：

結果に画像を加えてSNS映えも狙える！

6. チャット風つぶやき記録

🔧 コード例：

<input id="chat" placeholder="つぶやき">
<button onclick="postChat()">送信</button>
<div id="log"></div>
<script>
  function postChat() {
    const text = document.getElementById("chat").value;
    document.getElementById("log").innerHTML += "<p>" + text + "</p>";
    document.getElementById("chat").value = "";
  }
</script>

🗨 雰囲気が出る！

1人用チャット風に何でも記録できる。ちょっとした日記にも◎

💡 応用アイデア：

保存機能（localStorage）をつければミニ日記帳に！

7. 星マークがマウスを追いかける！

🔧 コード例：

document.body.innerHTML += '<div id="star" style="position:fixed;font-size:30px;">⭐</div>';
document.addEventListener("mousemove", e => {
  const star = document.getElementById("star");
  star.style.left = e.clientX + "px";
  star.style.top = e.clientY + "px";
});