【知識ゼロからのAIゲーム制作】世界一やさしい爆速開発入門
第6回：細かな部分を調整しよう
前回は、実際に動くゲームを作るところまで進みました。
今回は、そのHTMLコードをもとに「細かな部分」を調整しながら、
ゲームの完成度を一段階引き上げていきます。
ゲーム制作では、
「動いたら完成」ではなく、「遊んで気持ちいいかどうか」が非常に重要です。
そのためには、見た目・演出・挙動を細かく詰めていく作業が欠かせません。
まずは修正指示を出してみる
次は以下の点の修正をお願いします。
・現在の高さは380pxですが、250pxくらいにもっと低くしてください。
・お尻をクリック（タップ）した時は、震えるアクションをしてください。
・トイレはフタを閉じている割合の方を多くしてください。
・水しぶきは、もう少し上の方に移動させてください。
・うんちゲージが溜まったら、真ん中にFever!と表示させてください。
・フィーバー中は、ゲージと背景を7色で点滅させてください。
・あと5秒のカウントをFever!の下に表示させてください。
・フタが閉まっている時にうんちが落ちたら、画面外に弾くアクションにしてください。
・現在の高さは380pxですが、250pxくらいにもっと低くしてください。
・お尻をクリック（タップ）した時は、震えるアクションをしてください。
・トイレはフタを閉じている割合の方を多くしてください。
・水しぶきは、もう少し上の方に移動させてください。
・うんちゲージが溜まったら、真ん中にFever!と表示させてください。
・フィーバー中は、ゲージと背景を7色で点滅させてください。
・あと5秒のカウントをFever!の下に表示させてください。
・フタが閉まっている時にうんちが落ちたら、画面外に弾くアクションにしてください。
OKです 👍
ご指定の修正点をすべて反映した「完全修正版・全コード」を作成します。
ご指定の修正点をすべて反映した「完全修正版・全コード」を作成します。
この段階で、お尻の震えやフィーバー演出は実装できましたが、 制限時間のカウントなど、まだ問題点が残っていました。
さらに細かく修正を重ねる
以下の修正をお願いします。
・円のタイムが消えてしまったので、60秒カウントを元に戻してください。
・トイレのフタがランダムで開くようにしてください。
・うんちはトイレより前に表示し、中央に来たら水しぶきを出してください。
・フィーバー中はうんちゲージを溜めないでください。
・フィーバー終了時にゲージを0に戻してください。
・フィーバー中はすべてのトイレのフタを開けてください。
・閉まっているフタに当たったうんちは弾くアクションにしてください。
・円のタイムが消えてしまったので、60秒カウントを元に戻してください。
・トイレのフタがランダムで開くようにしてください。
・うんちはトイレより前に表示し、中央に来たら水しぶきを出してください。
・フィーバー中はうんちゲージを溜めないでください。
・フィーバー終了時にゲージを0に戻してください。
・フィーバー中はすべてのトイレのフタを開けてください。
・閉まっているフタに当たったうんちは弾くアクションにしてください。
了解です。
ご指摘の不具合をすべて修正した完全動作コードを提示します。
ご指摘の不具合をすべて修正した完全動作コードを提示します。
この修正で、ゲームらしい挙動にはなりましたが、 うんちがトイレの上に積み上がる問題が発生しました。
仕様を変更してゲーム性を高める
そこで発想を転換し、
「うんちが積み上がったらゲームオーバー」という
新しいルールを追加することにしました。
・うんちゲージがMAXになったらフィーバータイム5秒に戻してください。
・背景は7色点滅にしてください。
・フタが閉まっている時は、うんちが上に積み上がる仕様にしてください。
・お尻の高さまで積み上がったらGAME OVERを表示してください。
・フィーバーになったら、今まで積み上がったうんちは全て消してください。
・背景は7色点滅にしてください。
・フタが閉まっている時は、うんちが上に積み上がる仕様にしてください。
・お尻の高さまで積み上がったらGAME OVERを表示してください。
・フィーバーになったら、今まで積み上がったうんちは全て消してください。
了解です 👍
確実に修正した完全版コードを出します。
確実に修正した完全版コードを出します。
<!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">
…（以下も同様にすべてエスケープ済み）…
</body>
</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">
…（以下も同様にすべてエスケープ済み）…
</body>
</html>
これで、ゲームとしての基本的な流れと緊張感が
しっかり再現できるようになりました。
今回はここまでとします。
まとめ：
ゲーム制作において最も大切なのは、
「最初から完璧を目指さないこと」です。
まずは動くものを作り、
実際に遊んでみて、
「違和感がある」「もっとこうしたい」と感じた部分を
一つずつ言語化して修正していく。
AIを使うことで、この試行錯誤のサイクルは 驚くほど速くなります。
コードの細部に悩むよりも、
「どんなゲームにしたいか」を考える時間に集中できるようになるのです。
今回のように仕様を途中で変更することも、 決して失敗ではありません。
むしろ、ゲームが「遊びやすく」「面白く」進化している証拠です。
次回は、いよいよ演出をさらに強化するため、 効果音を追加していきます。
第7回：効果音を付けてみよう >>
ゲーム制作において最も大切なのは、
「最初から完璧を目指さないこと」です。
まずは動くものを作り、
実際に遊んでみて、
「違和感がある」「もっとこうしたい」と感じた部分を
一つずつ言語化して修正していく。
AIを使うことで、この試行錯誤のサイクルは 驚くほど速くなります。
コードの細部に悩むよりも、
「どんなゲームにしたいか」を考える時間に集中できるようになるのです。
今回のように仕様を途中で変更することも、 決して失敗ではありません。
むしろ、ゲームが「遊びやすく」「面白く」進化している証拠です。
次回は、いよいよ演出をさらに強化するため、 効果音を追加していきます。