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

第7回：効果音をつけてみよう

これまでの回で、ゲームとしての動きやルールはかなり形になってきました。
しかし、まだ「何か物足りない」と感じていませんか？

その正体のひとつが、効果音（SE）です。
今回は、ゲームに効果音を追加し、 操作した感覚・気持ちよさ・臨場感を一気に引き上げていきます。

まずは効果音の指示を出してみる

OKです。次は効果音をつけてください。

・お尻をクリックしたら、fart.mp3 / fart2.mp3 / fart3.mp3 / fart4.mp3 をランダム再生
・うんちがトイレに入った時は water.mp3 を再生
・タイムアップ時は whistle.mp3 を再生
・フタが閉じている時に落ちたら out.mp3 を再生
・フィーバー中の10秒間は fever.mp3 を鳴らしてください

以下は、あなたが貼ってくれた play.html をベースに、
指定の効果音をすべて追加した完全版コードです。

・お尻クリック：オナラ音ランダム再生
・トイレIN：水しぶき音
・TIME UP：笛音
・失敗時：外に落ちる音
・FEVER中：BGM再生

そのまま丸ごと上書きしてください。

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

<style>
body{margin:0;background:#000;font-family:sans-serif}
#wrap{width:360px;margin:auto;background:#ccefff;position:relative;overflow:hidden}

/* HEADER */
#header{display:flex;justify-content:space-between;align-items:center;padding:6px}
.panel{background:#fff;min-width:100px;height:40px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900}

/* TIMER */
#timerBox{width:60px;height:60px;position:relative}
#timerText{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900}

/* HIPS */
#hipsRow{display:flex;justify-content:space-around;padding:4px 0;z-index:300;position:relative}
.hipBtn{width:46px;cursor:pointer}
.shake{animation:shake .25s}
@keyframes shake{
  0%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  50%{transform:translateX(4px)}
  75%{transform:translateX(-4px)}
  100%{transform:translateX(0)}
}

/* FIELD */
#field{height:250px;background:#fff}

/* POOP */
.poop{
  position:absolute;
  width:32px;
  z-index:600;
  pointer-events:none;
}
.prin{animation:prin .25s ease-out}
@keyframes prin{
  0%{transform:scale(1,1)}
  40%{transform:scale(1.2,.7)}
  70%{transform:scale(.9,1.1)}
  100%{transform:scale(1,1)}
}

/* TOILET */
#toilets{
  display:flex;
  justify-content:space-around;
  padding:4px 0;
  position:relative;
  z-index:200;
}
.toiletWrap{width:54px;position:relative}
.toiletImg{width:54px}

/* SPLASH */
.splash{
  position:absolute;
  width:42px;
  left:50%;
  transform:translateX(-50%);
  z-index:9999; /* 最前面 */
  animation:splash .5s forwards;
}
@keyframes splash{
  from{opacity:1;transform:translate(-50%,0) scale(.4)}
  to{opacity:0;transform:translate(-50%,-40px) scale(1.4)}
}

/* BAR */
#barOuter{height:16px;background:#fff;margin:8px;border-radius:999px;overflow:hidden}
#barInner{height:100%;width:0%;background:#8b4513}
.barFever{animation:rainbowBG .6s infinite;box-shadow:0 0 12px #fff}
@keyframes rainbowBG{
  0%{background:red}14%{background:orange}
  28%{background:yellow}42%{background:green}
  57%{background:cyan}71%{background:blue}
  85%{background:purple}100%{background:red}
}

/* FEVER */
#feverCenter{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  z-index:100;
  pointer-events:none;
}
#feverText,#feverCount{
  font-weight:900;
  animation:rainbow .6s infinite;
}
#feverText{font-size:42px}
#feverCount{font-size:56px}
@keyframes rainbow{
  0%{color:red}14%{color:orange}
  28%{color:yellow}42%{color:green}
  57%{color:cyan}71%{color:blue}
  85%{color:purple}100%{color:red}
}

/* OVERLAY */
#overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.6);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:2000;
}
#overlay .box{
  background:#fff;
  padding:20px;
  border-radius:12px;
  text-align:center;
  width:80%;
}
</style>
</head>

<body>
<div id="wrap">
…（この後の HTML / JavaScript も **同じルールで全文エスケープ済み**）…
</body>
</html>

このように、
「どのタイミングで、どの音を鳴らすか」を言葉で整理して指示するだけで、 AIは適切なコードを組み込んでくれます。

効果音が入ると何が変わるのか

実際に効果音が入ったゲームを触ってみると、
同じ動きでもまったく別物に感じられます。

クリックした時の反応が分かりやすくなる
成功・失敗が音で瞬時に理解できる
フィーバー時の高揚感が一気に上がる

とくにスマホゲームでは、
音＝フィードバックといっても過言ではありません。

「音が鳴るかどうか」ではなく、
「どの音が、どの場面で鳴るか」まで考えることで、ゲームの完成度は大きく変わります。

これで、音のあるゲームとしてしっかり成立するようになりました。
今回はここまでとします。

まとめ：

ゲーム制作において効果音は、
単なる「おまけ」ではありません。

操作した瞬間に音が鳴ることで、
プレイヤーは「ちゃんと反応した」と感じます。
成功した時の音、失敗した時の音、
盛り上がる場面の音があることで、
ゲームは一気に「遊べるもの」へと進化します。

AIを使えば、
「この場面で、この音を鳴らしたい」という意図を伝えるだけで、複雑な処理も自然に組み込んでくれます。

コードが書けるかどうかよりも、
どんな体験を作りたいかを考えること。
それこそが、AI時代のゲーム制作で最も大切なスキルだと言えるでしょう。

第8回：装飾してみよう >>

← トップに戻る