「ブロック崩しなんて、昔はプログラマーしか作れないもの」
そんなイメージを持っていました。
私は57歳の薬剤師で、プログラマーではありません。HTMLやCSS、JavaScriptについても詳しいわけではありません。
それでも最近はChatGPTがあるので、「もしかしたら作れるのでは？」と思い、試しにブロック崩しゲームの作成に挑戦してみました。
実際にやってみると、ゲームのコード自体は意外とあっさり完成しました。しかし、その後のWordPressへの設置で思わぬ苦戦をすることになります。
CodePenでは問題なく動いたのに、WordPressでは動かない。
コードが悪いのかと思って何度も修正しましたが、原因は別のところにありました。
この記事では、57歳の薬剤師が普通のChatGPTとのやり取りだけでブロック崩しゲームを作り、WordPress（Cocoon）へ設置するまでの試行錯誤を紹介します。
同じように「AIで何か作ってみたい」と思っている方の参考になれば幸いです。
ChatGPTでブロック崩しを作ろうと思った理由
きっかけは、「Codexって何？」でした。
ChatGPTを使っていると、左側のメニューにCodexという項目が表示されるようになりました。
名前は聞いたことがあったのですが、正直なところ何ができるのかよく分かっていませんでした。
調べてみると、プログラムの作成や修正など、コード関連の作業を支援する機能らしいことが分かりました。
そこでふと思いました。
「プログラマーでもない57歳の薬剤師が、本当にゲームなんて作れるのだろうか？」
私はHTMLやCSS、JavaScriptについて詳しいわけではありません。
それでもChatGPTがあれば、ある程度形になるのか試してみたくなりました。
最初に作るなら、誰でもルールが分かるシンプルなものが良い。
そう考えて選んだのが、昔からおなじみのブロック崩しゲームです。
軽い気持ちで始めたのですが、思った以上に苦戦することになります。
ゲームを作ることよりも、WordPressに設置する方が大変だったのです。
普通のChatGPTでブロック崩しを作成してみた
最初はCodexについて調べていただけでした。
「コードを書く人向けの機能らしい」
ということは分かったのですが、私自身はプログラマーではありません。
そこでChatGPTとの会話の中で、
「簡単なゲームなら、このチャットでも作れますよ」
という話になりました。
正直なところ、最初は半信半疑でした。
私はHTMLやCSS、JavaScriptの知識がほとんどありません。
そのため、「本当にゲームなんて作れるのかな？」という気持ちの方が強かったです。
そこで試しに、
「HTML・CSS・JavaScriptのみで動作するブロック崩しゲームを作成してください」
と依頼してみました。
すると、思っていた以上にしっかりしたコードが出てきました。
- パドル操作
- ボールの反射
- ブロック破壊
- スコア表示
- ハイスコア保存
- ゲームオーバー
- ゲームクリア
といった基本機能が最初から組み込まれていました。
昔の感覚だと、ゲームを作るには専門知識を学び、本を読みながら何日もかけてコードを書くものだと思っていました。
ところが今回は、ChatGPTとのやり取りだけでブロック崩しの原型が完成してしまったのです。
「これはすごい時代になったな」
というのが率直な感想でした。
ただし、この時点ではまだ完成ではありませんでした。
実際にコードを動かしてみると、次の問題が待っていたのです。
CodePenでは動いたのにWordPressでは動かなかった
ChatGPTが作ったブロック崩しは、まずCodePenで試してみました。
すると、予想以上にあっさり動きました。
ボールも動くし、ブロックも壊れる。
「これならWordPressへの設置も簡単だろう」
そう思っていたのですが、実際は違いました。
最初はコードが間違っていると思った
WordPressへ設置すると、画面は表示されるのにゲームが動きません。
そのため最初は、
「ChatGPTが間違ったコードを書いたのかな？」
と思いました。
コードを修正したり、別の書き方を試したりしましたが、状況は変わりませんでした。
原因はWordPress側の設置方法だった
何度か試行錯誤して分かったのは、原因がコードではなかったことです。
CodePenでは問題なく動いていたため、そもそもコード自体は完成していました。
問題だったのは、WordPress側への設置方法でした。
私はプログラマーではないので、この違いを全く理解していませんでした。
HTML・CSS・JavaScriptを分けて入力する必要があった
今回使った環境では、
- HTML
- CSS
- JavaScript
をそれぞれ別の場所へ入力する必要がありました。
CodePenではそのまま動いていたため、WordPressでも同じように貼り付ければ動くと思い込んでいたのです。
結果的に、ゲームを作ることよりも、WordPressへ正しく設置する方が苦戦しました。
それでも試行錯誤の末、無事にブログ上でブロック崩しを動かすことができました。
実際に完成したブロック崩しゲーム
試行錯誤の末、最終的に完成したのがこちらのブロック崩しゲームです。
もう一度チャレンジしましょう。
スマホ：タッチ / スワイプ操作
見た目はシンプルですが、
- パドル操作
- ボールの反射
- ブロック破壊
- スコア表示
- ハイスコア保存
- ゲームオーバー
- ゲームクリア
といった基本的な機能は一通り実装されています。
もちろん、本格的なゲームと比べるとシンプルです。
それでも、プログラマーではない57歳の薬剤師が、ChatGPTとのやり取りだけでここまで作れたことには少し驚きました。
昔ならゲームを作るという発想すら持たなかったと思います。
実際に完成したゲームで遊んでみると、つい「あと1回だけ」と繰り返してしまいます。
もしよければ、少し遊んでみてください。
今回やってみて感じたこと
今回のブロック崩し作成は、単純にゲームを作っただけではなく、AIとの付き合い方やWordPressの仕組みについても学ぶ良い機会になりました。
ゲームを作るより設置する方が大変だった
正直なところ、一番苦戦したのはゲーム作りではありませんでした。
ChatGPTがコードを作成してくれたため、ブロック崩しそのものは意外と早く完成しました。
苦戦したのは、その後のWordPressへの設置です。
CodePenでは問題なく動いていたのに、WordPressでは動かない。
原因を探しながら何度も試行錯誤することになりました。
結果的には、ゲームを作ることよりも、完成したコードを正しく設置する方が大変だったというのが率直な感想です。
プログラマーではなくても作れる時代
私は57歳の薬剤師で、プログラマーではありません。
HTMLやCSS、JavaScriptについても詳しいわけではありません。
それでもChatGPTとのやり取りを続けることで、実際に遊べるゲームを作ることができました。
もちろん、専門的な知識があった方が有利なのは間違いありません。
しかし、以前のように「コードが書けないから無理」という時代ではなくなったと感じます。
AIを活用すれば、アイデアを形にするハードルはかなり下がっているのかもしれません。
次は別のミニツールも作ってみたい
今回の経験で、ゲームだけでなく簡単なツールも作れそうだと感じました。
例えば、
- BMI計算
- ダイエット関連ツール
- 食事管理ツール
- ちょっとしたミニゲーム
などは、ブログとの相性も良さそうです。
まだ何を作るかは決めていませんが、せっかく覚えたので今後も色々と試してみたいと思っています。
次はもう少し実用的なものに挑戦するかもしれません。
実際に動いたコード
今回、最終的にWordPress上で動いたコードも載せておきます。
実は、このコード自体を作るよりも、WordPressへ設置する方が苦戦しました。
最初は、カスタムHTMLブロックにコードを貼れば動くと思っていました。
しかし実際にはうまくいきません。
HTML・CSS・JavaScriptをまとめて貼ってみたり、それぞれ分けて入力してみたりしましたが、何度やってもゲームは動きませんでした。
そのため、
「ChatGPTが作ったコードが間違っているのかな？」
と思い、コードの修正ばかり繰り返していました。
ところが原因はコードではありませんでした。
私が使っている環境では、
- HTMLコード → カスタムHTMLブロック
- CSSコード → 記事編集画面下部のCSS欄
- JavaScriptコード → 記事編集画面下部のJavaScript欄
という形で、それぞれ別の場所へ入力する必要があったのです。
この違いを理解してからは、驚くほどあっさり動きました。
プログラマーの方には当たり前のことかもしれませんが、私のような初心者にとっては大きな発見でした。
もし同じようにWordPressで試す方がいれば、コードの内容だけでなく「どこへ入力するのか」も確認することをおすすめします。
以下が、実際に動作したコードです。
HTMLコード
<div class="wp-neon-breakout">
<div class="wp-game-title">ネオンブロック崩し</div>
<div class="wp-neon-score">
<div>スコア：<span id="wpScore">0</span></div>
<div>ハイスコア：<span id="wpHighScore">0</span></div>
</div>
<div class="wp-neon-canvas-box">
<canvas id="wpBreakoutCanvas" width="800" height="520"></canvas>
<div class="wp-neon-message" id="wpMessage">
<div class="wp-neon-card">
<div class="wp-message-title" id="wpMessageTitle">ゲームオーバー</div>
<p id="wpMessageText">もう一度チャレンジしましょう。</p>
<button id="wpRestartBtn" type="button">リスタート</button>
</div>
</div>
</div>
<div class="wp-neon-guide">
PC：マウス移動 / 左右矢印キー<br>
スマホ：タッチ / スワイプ操作
</div>
</div>CSSコード
.wp-neon-breakout{
max-width:820px;
margin:20px auto;
padding:12px;
background:#050510;
color:#fff;
text-align:center;
border-radius:16px;
font-family:sans-serif;
}
.wp-game-title{
color:#00f5ff;
font-size:32px;
font-weight:bold;
text-shadow:0 0 10px #00f5ff;
margin:0 0 12px;
}
.wp-neon-score{
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
margin-bottom:10px;
}
.wp-neon-score div{
padding:8px 14px;
border:1px solid #00f5ff;
border-radius:20px;
box-shadow:0 0 8px #00f5ff;
}
.wp-neon-canvas-box{
position:relative;
border:2px solid #00f5ff;
border-radius:14px;
overflow:hidden;
background:#050510;
box-shadow:0 0 18px #00f5ff;
}
#wpBreakoutCanvas{
display:block;
width:100%;
height:auto;
}
.wp-neon-message{
display:none;
position:absolute;
inset:0;
background:rgba(5,5,16,.88);
align-items:center;
justify-content:center;
z-index:10;
}
.wp-neon-card{
padding:22px;
border:1px solid #ff2bd6;
border-radius:16px;
background:#111126;
box-shadow:0 0 18px #ff2bd6;
}
.wp-message-title{
color:#ff2bd6;
font-size:28px;
font-weight:bold;
margin:0 0 10px;
}
.wp-neon-card button{
padding:10px 22px;
border:none;
border-radius:20px;
background:#00f5ff;
font-weight:bold;
cursor:pointer;
}
.wp-neon-guide{
margin-top:10px;
font-size:14px;
color:#d8faff;
}JavaScriptコード
(function(){
setTimeout(function(){
const canvas=document.getElementById("wpBreakoutCanvas");
if(!canvas)return;
const ctx=canvas.getContext("2d");
const scoreEl=document.getElementById("wpScore");
const highScoreEl=document.getElementById("wpHighScore");
const message=document.getElementById("wpMessage");
const messageTitle=document.getElementById("wpMessageTitle");
const messageText=document.getElementById("wpMessageText");
const restartBtn=document.getElementById("wpRestartBtn");
const W=canvas.width;
const H=canvas.height;
let score=0;
let highScore=Number(localStorage.getItem("wpBreakoutHighScore"))||0;
let running=true;
let animationId=null;
highScoreEl.textContent=highScore;
const paddle={
x:W/2-65,
y:H-42,
width:130,
height:16,
speed:8,
left:false,
right:false
};
const ball={
x:W/2,
y:H-70,
r:8,
dx:4,
dy:-4
};
const brickSetting={
rows:5,
cols:10,
width:68,
height:22,
padding:8,
top:70,
left:36
};
const colors=["#ff2bd6","#00f5ff","#ffe600","#39ff14","#ff6b00"];
let bricks=[];
let particles=[];
function createBricks(){
bricks=[];
for(let r=0;r<brickSetting.rows;r++){
for(let c=0;c<brickSetting.cols;c++){
bricks.push({
x:brickSetting.left+c*(brickSetting.width+brickSetting.padding),
y:brickSetting.top+r*(brickSetting.height+brickSetting.padding),
w:brickSetting.width,
h:brickSetting.height,
color:colors[r],
active:true
});
}
}
}
function drawRect(x,y,w,h,color,glow){
ctx.save();
ctx.shadowBlur=glow;
ctx.shadowColor=color;
ctx.fillStyle=color;
ctx.fillRect(x,y,w,h);
ctx.restore();
}
function draw(){
ctx.clearRect(0,0,W,H);
bricks.forEach(function(b){
if(!b.active)return;
drawRect(b.x,b.y,b.w,b.h,b.color,14);
});
particles.forEach(function(p){
ctx.save();
ctx.globalAlpha=p.life;
ctx.fillStyle=p.color;
ctx.beginPath();
ctx.arc(p.x,p.y,p.size,0,Math.PI*2);
ctx.fill();
ctx.restore();
});
drawRect(paddle.x,paddle.y,paddle.width,paddle.height,"#00f5ff",18);
ctx.save();
ctx.shadowBlur=18;
ctx.shadowColor="#ffffff";
ctx.fillStyle="#ffffff";
ctx.beginPath();
ctx.arc(ball.x,ball.y,ball.r,0,Math.PI*2);
ctx.fill();
ctx.restore();
}
function update(){
if(paddle.left)paddle.x-=paddle.speed;
if(paddle.right)paddle.x+=paddle.speed;
paddle.x=Math.max(0,Math.min(W-paddle.width,paddle.x));
ball.x+=ball.dx;
ball.y+=ball.dy;
if(ball.x-ball.r<0 || ball.x+ball.r>W)ball.dx*=-1;
if(ball.y-ball.r<0)ball.dy*=-1;
if(
ball.y+ball.r>=paddle.y &&
ball.y-ball.r<=paddle.y+paddle.height &&
ball.x>=paddle.x &&
ball.x<=paddle.x+paddle.width
){
const hit=(ball.x-(paddle.x+paddle.width/2))/(paddle.width/2);
ball.dx=hit*6;
ball.dy=-Math.abs(ball.dy);
}
bricks.forEach(function(b){
if(!b.active)return;
if(
ball.x+ball.r>b.x &&
ball.x-ball.r<b.x+b.w &&
ball.y+ball.r>b.y &&
ball.y-ball.r<b.y+b.h
){
b.active=false;
ball.dy*=-1;
score+=10;
scoreEl.textContent=score;
createParticles(b.x+b.w/2,b.y+b.h/2,b.color);
saveHighScore();
if(bricks.every(function(item){return !item.active;})){
endGame(true);
}
}
});
particles.forEach(function(p){
p.x+=p.vx;
p.y+=p.vy;
p.life-=0.03;
});
particles=particles.filter(function(p){
return p.life>0;
});
if(ball.y-ball.r>H){
endGame(false);
}
}
function createParticles(x,y,color){
for(let i=0;i<18;i++){
particles.push({
x:x,
y:y,
vx:(Math.random()-0.5)*6,
vy:(Math.random()-0.5)*6,
size:Math.random()*4+2,
life:1,
color:color
});
}
}
function saveHighScore(){
if(score>highScore){
highScore=score;
localStorage.setItem("wpBreakoutHighScore",highScore);
highScoreEl.textContent=highScore;
}
}
function endGame(clear){
running=false;
cancelAnimationFrame(animationId);
messageTitle.textContent=clear?"クリア！":"ゲームオーバー";
messageText.textContent=clear
?"全てのブロックを壊しました。お見事です。"
:"ボールが落ちました。もう一度挑戦しましょう。";
message.style.display="flex";
}
function resetGame(){
score=0;
scoreEl.textContent=score;
paddle.x=W/2-paddle.width/2;
ball.x=W/2;
ball.y=H-70;
ball.dx=4*(Math.random()>0.5?1:-1);
ball.dy=-4;
particles=[];
createBricks();
running=true;
message.style.display="none";
loop();
}
function loop(){
if(!running)return;
update();
draw();
animationId=requestAnimationFrame(loop);
}
document.addEventListener("keydown",function(e){
if(e.key==="ArrowLeft")paddle.left=true;
if(e.key==="ArrowRight")paddle.right=true;
});
document.addEventListener("keyup",function(e){
if(e.key==="ArrowLeft")paddle.left=false;
if(e.key==="ArrowRight")paddle.right=false;
});
canvas.addEventListener("mousemove",function(e){
const rect=canvas.getBoundingClientRect();
const scaleX=W/rect.width;
const mouseX=(e.clientX-rect.left)*scaleX;
paddle.x=mouseX-paddle.width/2;
paddle.x=Math.max(0,Math.min(W-paddle.width,paddle.x));
});
canvas.addEventListener("touchmove",function(e){
e.preventDefault();
const rect=canvas.getBoundingClientRect();
const scaleX=W/rect.width;
const touchX=(e.touches[0].clientX-rect.left)*scaleX;
paddle.x=touchX-paddle.width/2;
paddle.x=Math.max(0,Math.min(W-paddle.width,paddle.x));
},{passive:false});
canvas.addEventListener("touchstart",function(e){
e.preventDefault();
},{passive:false});
restartBtn.addEventListener("click",resetGame);
createBricks();
loop();
},500);
})();まとめ
今回、ChatGPTを使ってブロック崩しゲームを作り、WordPressへ設置してみました。
きっかけは「Codexって何だろう？」という単純な興味でしたが、結果的には思っていた以上に面白い経験になりました。
実際にやってみると、ゲームのコードを作ること自体よりも、WordPressへ正しく設置する方が苦戦しました。
それでも試行錯誤を繰り返した結果、無事に自分のブログ上で動くブロック崩しゲームを完成させることができました。
私は57歳の薬剤師で、プログラマーではありません。
それでも普通のChatGPTとのやり取りだけで、実際に遊べるゲームを作ることができました。
もちろん、もっと複雑なものを作るには知識も必要だと思います。
しかし、「コードが書けないから無理」と諦める時代ではなくなっていることは実感できました。
これからもAIを活用しながら、ミニゲームや便利なツールなど、面白そうなものがあれば色々と試してみたいと思います。
もしよければ、完成したブロック崩しでも遊んでみてください。
