ブロック崩しをClaudeで作成!!※コードを無料配布中
どうも、こんにちは！Stepon（@m2e70259765・ステポン）です！！
AIとやり取りするだけでゲームが作れるというので、ブロック崩しを作成してみました。
以下がコードです。
---//ここから//---------------
<!DOCTYPE html>
<html>
<head>
<title>ブロック崩し</title>
<style>
#game {
width: 350px;
height: 450px;
border: 1px solid black;
position: relative;
overflow: hidden;
margin: 0 auto; /* 追加 */
}
#ball { width: 10px; height: 10px; background-color: red; border-radius: 50%; position: absolute; } .block { width: 45px; height: 20px; position: absolute; } #paddle { width: 60px; height: 10px; background-color: red; position: absolute; left: 145px; bottom: 10px; }
</style>
</head>
<body>
<div id="game">
<div id="ball"></div>
<div id="paddle"></div>
</div>
<button id="start-btn">Game Start</button>
<script>
const game = document.getElementById('game');
const ball = document.getElementById('ball');
const paddle = document.getElementById('paddle');
const startBtn = document.getElementById('start-btn');
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
let ballX = 170; let ballY = 420; let ballSpeedX = 0; let ballSpeedY = 0; let paddleX = 145; let blocks = []; function createBlocks() { for (let row = 0; row < 7; row++) { for (let col = 0; col < 7; col++) { const block = document.createElement('div'); block.classList.add('block'); block.style.left = (col * 50) + (175 - (7 * 50 / 2)) + 'px'; /* 変更 */ block.style.top = row * 25 + 25 + 'px'; block.style.backgroundColor = colors[row]; game.appendChild(block); blocks.push(block); } } } createBlocks(); // 以下は変更なし function moveBall() { ballX += ballSpeedX; ballY += ballSpeedY; if (ballX < 0 || ballX > 340) { ballSpeedX = -ballSpeedX; } if (ballY < 0) { ballSpeedY = -ballSpeedY; } if (ballY > 440) { resetBall(); } const paddleLeft = paddleX; const paddleRight = paddleX + 60; if (ballY + 10 >= 440 && ballX >= paddleLeft && ballX <= paddleRight) { ballSpeedY = -ballSpeedY; } for (let i = 0; i < blocks.length; i++) { const block = blocks[i]; const blockLeft = block.offsetLeft; const blockRight = blockLeft + block.offsetWidth; const blockTop = block.offsetTop; const blockBottom = blockTop + block.offsetHeight; if ( ballX >= blockLeft && ballX <= blockRight && ballY >= blockTop && ballY <= blockBottom ) { ballSpeedY = -ballSpeedY; game.removeChild(block); blocks.splice(i, 1); i--; } } ball.style.left = ballX + 'px'; ball.style.top = ballY + 'px'; requestAnimationFrame(moveBall); } function resetBall() { ballX = 170; ballY = 420; ballSpeedX = 0; ballSpeedY = 0; } function startGame() { ballSpeedX = 2; ballSpeedY = -2; moveBall(); } startBtn.addEventListener('click', startGame); document.addEventListener('keydown', (e) => { if (e.key === 'ArrowLeft' && paddleX > 0) { paddleX -= 20; } else if (e.key === 'ArrowRight' && paddleX < 290) { paddleX += 20; } paddle.style.left = paddleX + 'px'; });
</script>
</body>
</html>
---//ここまで//---------------特別むずかしいことは何もしていなくて、Claudeと相談しながら作成しました。
Claude:
https://claude.ai/chats
ブロック崩しを以下の作成条件に従って作成してください。
作成条件:
- 7色の壁を画面上部に設置してください。
- 赤色の玉が当たると壁が消えるようにしてください。
- 画面下に赤色の玉を跳ね返すバーを設置してください。
こんな感じです。適当にプロンプトを打ち込んで生成結果をみながら微調整を5回繰り返したら、上記のコードの完成です。
もちろん、BGMはないし、7色の壁が左に少しズレてるし、スタートボタンがショボいし・・・といった点が気にはなるんですが、5分～10分で完成したんですよ。プロンプトを打ち込んで待ってるだけで、ダダダーっとコードを書き出してくれます。ほんと今のAIはすごいですね。
普段は発想法関係のプロンプトばかり制作してるんですが、よかったら見ていってください。
ではまた！！
文: Stepon（ステポン）
この記事が気に入ったらサポートをしてみませんか？