【知識ゼロからのAIゲーム制作】世界一やさしい爆速開発入門

第5回：実際に動くゲームを作ってみよう

ゲーム素材や画面イメージが揃ったら、次はいよいよ実装です。
今回はHTML / CSS / JavaScript を使って、実際に動くゲームを作ります。

ChatGPTにゲーム制作を依頼してみる

うんち落としゲームを作成してください。
イメージは添付画像のimage01.pngで、
お尻アイコンをクリック（タップ）したら、
うんちを上から下に落ちてください。
下のトイレは、ランダムでフタが空いたり閉じたりしてください。
フタが空いている時にうんちが入ったら添付画像のimage02.pngのように
水しぶきを表示してください。
上部左上はうんちカウントで、トイレに入ったうんちをカウントしてください。
上部真ん中のタイムは制限時間60秒で、残り10秒では背景を水色から赤色にしてください。
上部右上はスコアでトイレにうんちがはいったらスコア数を表示してください。
poop2.png（黄金うんち）が入ったら得点は倍にしてください。
そして、トイレにうんちが入っていくたびに、一番下部のうんちバーが増えていき、
満タンになった時に、うんちフィーバーとなり、5秒間すべてのトイレのフタを空けてください。
添付の画像を使用してください（hip.png、poop.png、poop2.png、water.png、toilet01.png、toilet02.png）
ブラウザでプレイできるようにhtmlファイルで作成してください。

了解です 👍
添付画像を使用した完全動作版HTMLを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>うんち落としゲーム</title>

<style>
body {
  margin: 0;
  background: #000;
  font-family: sans-serif;
  color: #000;
}

#game {
  width: 360px;
  margin: auto;
  background: #ccefff;
  position: relative;
}

#top {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  font-size: 20px;
  font-weight: bold;
}

#timer {
  font-size: 28px;
}

#hips {
  display: flex;
  justify-content: center;
  margin: 8px 0;
}

#hips img {
  width: 50px;
  cursor: pointer;
}

#field {
  background: #fff;
  height: 360px;
  position: relative;
  overflow: hidden;
}

.poop {
  position: absolute;
  width: 32px;
}

.water {
  position: absolute;
  width: 40px;
  animation: splash 0.5s ease-out;
}

@keyframes splash {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

#toilets {
  display: flex;
  justify-content: space-around;
  padding: 5px;
}

#toilets img {
  width: 48px;
}

#bar {
  height: 16px;
  background: #fff;
  margin: 8px;
  border-radius: 8px;
  overflow: hidden;
}

#barInner {
  height: 100%;
  width: 0%;
  background: #8b4513;
}

.fever {
  background: #ffcc00 !important;
}
</style>
</head>

<body>

<div id="game">
  <div id="top">
    <div>💩 <span id="count">0</span></div>
    <div id="timer">60</div>
    <div>⭐ <span id="score">0</span></div>
  </div>

  <div id="hips">
    <img src="hip.png" id="hip">
  </div>

  <div id="field"></div>
  <div id="toilets"></div>

  <div id="bar">
    <div id="barInner"></div>
  </div>
</div>

<script>
const field = document.getElementById("field");
const toiletsDiv = document.getElementById("toilets");
const hip = document.getElementById("hip");

const countEl = document.getElementById("count");
const scoreEl = document.getElementById("score");
const timerEl = document.getElementById("timer");
const barInner = document.getElementById("barInner");
const game = document.getElementById("game");

let count = 0;
let score = 0;
let bar = 0;
let time = 60;
let fever = false;
</script>

</body>
</html>

最初の指示では、意図した動きにはなりませんでした。

指示を修正して完成度を高める

違います。お尻は上部に6つ並べてください。
そしてクリック（タップ）したお尻からうんちが真下に落ちてください。
タイムは円で表現して、ゲージが減っていく表現にしてください。
制限時間60秒になったら、真ん中に「TIME OVER」を表記し、
うんちの数とスコアを表示させてください。
あと、うんちがトイレに入った時の水しぶきは、
トイレの真ん中に重ねて表示させてください。

了解。指定どおりに修正した完全コードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>うんち落としゲーム</title>
<style>
  :root{
    --W: 360px;
    --topH: 78px;
    --hipsH: 58px;
    --fieldH: 380px;
    --toiletH: 78px;
  }
  body{
    margin:0;
    background:#000;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  #wrap{
    width: var(--W);
    margin: 0 auto;
    background:#ccefff;
    position:relative;
    user-select:none;
    -webkit-user-select:none;
    touch-action: manipulation;
  }

  #header{
    height: var(--topH);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 8px 10px;
    box-sizing:border-box;
  }

  .panel{
    background:#fff;
    height:40px;
    min-width:110px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    border-radius:2px;
    font-size:22px;
  }

  .poopIcon{
    width:26px; height:26px; object-fit:contain;
  }
</style>
</head>

<body>

<div id="wrap">
  <div id="header">
    <div class="panel left">
      <img class="poopIcon" src="poop.png" alt="">
      <span id="count">0</span>
    </div>

    <div id="timerBox" aria-label="timer">
      <canvas id="timerCanvas" width="60" height="60"></canvas>
      <div id="timerText">60</div>
    </div>

    <div class="panel right">
      <span id="score">0</span>
    </div>
  </div>

  <div id="hipsRow"></div>
  <div id="field"></div>
  <div id="toilets"></div>

  <div id="barOuter"><div id="barInner"></div></div>

  <div id="overlay">
    <div class="box">
      <h1>TIME OVER</h1>
      <div class="result">うんち：<span id="rCount">0</span></div>
      <div class="result">スコア：<span id="rScore">0</span></div>
      <button id="retry">もう一回</button>
    </div>
  </div>
</div>

<script>
(() => {
  const wrap = document.getElementById("wrap");
  const hipsRow = document.getElementById("hipsRow");
  const field = document.getElementById("field");
  const toiletsDiv = document.getElementById("toilets");
})();
</script>

</body>
</html>

2回目の修正で、かなりイメージに近いゲームに仕上がりました。
今回はここまでとします。

まとめ：
ゲーム制作は、一度で完成させるものではありません。
「作ってみる → 思った通りに動かない → 指示を修正する → 少し理想に近づく」
この繰り返しこそが、ゲーム作りの本質です。

今回のようにAIを活用すると、
「ゼロからコードを書く」という高いハードルを一気に飛び越え、
まず“動くもの”を短時間で手に入れることができます。
そこから、「ここが違う」「こうしてほしい」と人間の感覚を言葉にして伝えることで、
ゲームは少しずつ自分のイメージに近づいていきます。

これから先は、当たり判定の調整や演出の追加、
操作感の改善など、“遊んでいて気持ちいいゲーム”に仕上げていく工程に入っていきます。
焦らず、一つずつ調整を重ねながら、
自分だけのオリジナルゲームを完成させていきましょう。

第6回：細かな部分を調整しよう >>

← トップに戻る