こんにちは、AM0500です。
今回は、AI「Claude（claude 4 sonnet）」に指示を出して作ってみた、ブロック崩し風のミニゲームをご紹介します。誰でも作れるのでお気軽に試してみてくださいね。
🔗 実際にプレイしてみる
▼ ブラウザでそのまま遊べます（PC推奨）：
👉 ブロック崩しゲームをプレイする （外部のゲームページに飛びます。）
作る際に使用したツールはこちらです。
👉 Claude（claude 4 sonnet）はこちら
※英語でとっつきにくく見えますが、やり取りは日本語でできます。
🎮 ゲーム画面（スクリーンショット）
📝 一言コメント
このブロック崩しが私がClaudeで初めて作成してみたゲームになります。
どれくらい簡単な命令で作成できるのか、どんなクオリティになるのかを確認するため、非常にシンプルな命令にしています。
こんな命令でも、こんなクオリティのものができてしまうんですね。
🧠 使用したClaudeへのプロンプト
以下のような指示だけで、今回のゲームが生成されました。
ブロック崩しのようなゲームを作れますか？たったこれだけの命令（プロンプト）です。
シンプルすぎて不安になりますが、実際にこの1行だけ作れました。
🕹️ Claudeが返してくれた説明文
ゲームプレイ
左右矢印キーまたはA/Dキーでパドルを操作
ボールがパドルに当たる位置で跳ね返る角度が変わる
6段×10列のカラフルなブロックをすべて破壊するとクリア
ゲームシステム
3ライフ制（ボールが下に落ちるとライフが減る）
スコアシステム（ブロック1個につき10点）
ゲームオーバー時にリスタート可能
視覚効果
モダンなグラスモーフィズムデザイン
グラデーション背景
段ごとに異なる色のブロック
滑らかなアニメーション
操作方法はシンプルで、左右矢印キー（またはA/Dキー）でパドルを動かしてボールを跳ね返し、すべてのブロックを壊すことが目標です。ぜひプレイしてみてください！
💡 ソースコード（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;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.game-container {
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 20px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
canvas {
border: 3px solid #fff;
border-radius: 10px;
background: #000;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.info {
color: white;
text-align: center;
margin-bottom: 10px;
font-size: 18px;
font-weight: bold;
}
.controls {
color: white;
text-align: center;
margin-top: 10px;
font-size: 14px;
}
.game-over {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 20px;
border-radius: 10px;
text-align: center;
font-size: 24px;
display: none;
}
.restart-btn {
background: #667eea;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
margin-top: 10px;
cursor: pointer;
font-size: 16px;
}
.restart-btn:hover {
background: #764ba2;
}
</style>
</head>
<body>
<div class="game-container">
<div class="info">
<div>スコア: <span id="score">0</span> | ライフ: <span id="lives">3</span></div>
</div>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<div class="controls">
左右矢印キー または A/Dキー でパドルを移動
</div>
<div class="game-over" id="gameOver">
<div id="gameOverText">ゲームオーバー</div>
<button class="restart-btn" onclick="restartGame()">もう一度</button>
</div>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');
const livesElement = document.getElementById('lives');
const gameOverElement = document.getElementById('gameOver');
const gameOverText = document.getElementById('gameOverText');
// ゲーム状態
let gameState = {
score: 0,
lives: 3,
gameRunning: true
};
// パドル
const paddle = {
x: canvas.width / 2 - 60,
y: canvas.height - 30,
width: 120,
height: 15,
speed: 8
};
// ボール
const ball = {
x: canvas.width / 2,
y: canvas.height / 2,
radius: 8,
dx: 4,
dy: -4,
speed: 4
};
// ブロック
const blocks = [];
const blockRows = 6;
const blockCols = 10;
const blockWidth = 70;
const blockHeight = 20;
const blockPadding = 5;
const blockOffsetTop = 60;
const blockOffsetLeft = (canvas.width - (blockCols * (blockWidth + blockPadding) - blockPadding)) / 2;
// ブロックの色
const blockColors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD'];
// ブロックを初期化
function initBlocks() {
blocks.length = 0;
for (let r = 0; r < blockRows; r++) {
for (let c = 0; c < blockCols; c++) {
blocks.push({
x: c * (blockWidth + blockPadding) + blockOffsetLeft,
y: r * (blockHeight + blockPadding) + blockOffsetTop,
width: blockWidth,
height: blockHeight,
color: blockColors[r],
visible: true
});
}
}
}
// キー入力の処理
const keys = {};
document.addEventListener('keydown', (e) => {
keys[e.key] = true;
});
document.addEventListener('keyup', (e) => {
keys[e.key] = false;
});
// パドルの更新
function updatePaddle() {
if ((keys['ArrowLeft'] || keys['a'] || keys['A']) && paddle.x > 0) {
paddle.x -= paddle.speed;
}
if ((keys['ArrowRight'] || keys['d'] || keys['D']) && paddle.x < canvas.width - paddle.width) {
paddle.x += paddle.speed;
}
}
// ボールの更新
function updateBall() {
ball.x += ball.dx;
ball.y += ball.dy;
// 壁との衝突
if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
ball.dx = -ball.dx;
}
if (ball.y - ball.radius < 0) {
ball.dy = -ball.dy;
}
// 下の壁（ゲームオーバー）
if (ball.y + ball.radius > canvas.height) {
gameState.lives--;
if (gameState.lives <= 0) {
gameOver();
} else {
resetBall();
}
}
// パドルとの衝突
if (ball.y + ball.radius > paddle.y &&
ball.y - ball.radius < paddle.y + paddle.height &&
ball.x > paddle.x &&
ball.x < paddle.x + paddle.width) {
// パドルのどの部分に当たったかで角度を変更
const hitPos = (ball.x - paddle.x) / paddle.width;
ball.dx = (hitPos - 0.5) * 8;
ball.dy = -Math.abs(ball.dy);
}
// ブロックとの衝突
for (let i = 0; i < blocks.length; i++) {
const block = blocks[i];
if (block.visible &&
ball.x > block.x &&
ball.x < block.x + block.width &&
ball.y > block.y &&
ball.y < block.y + block.height) {
ball.dy = -ball.dy;
block.visible = false;
gameState.score += 10;
// すべてのブロックが破壊されたかチェック
if (blocks.every(b => !b.visible)) {
gameWin();
}
break;
}
}
}
// ボールをリセット
function resetBall() {
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
ball.dx = (Math.random() > 0.5 ? 1 : -1) * 4;
ball.dy = -4;
}
// 描画関数
function draw() {
// 背景をクリア
ctx.clearRect(0, 0, canvas.width, canvas.height);
// パドルを描画
ctx.fillStyle = '#fff';
ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
// ボールを描画
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
ctx.fillStyle = '#fff';
ctx.fill();
ctx.closePath();
// ブロックを描画
for (let i = 0; i < blocks.length; i++) {
const block = blocks[i];
if (block.visible) {
ctx.fillStyle = block.color;
ctx.fillRect(block.x, block.y, block.width, block.height);
// ブロックの境界線
ctx.strokeStyle = '#fff';
ctx.lineWidth = 1;
ctx.strokeRect(block.x, block.y, block.width, block.height);
}
}
}
// ゲームオーバー
function gameOver() {
gameState.gameRunning = false;
gameOverText.textContent = 'ゲームオーバー';
gameOverElement.style.display = 'block';
}
// ゲームクリア
function gameWin() {
gameState.gameRunning = false;
gameOverText.textContent = 'ゲームクリア！';
gameOverElement.style.display = 'block';
}
// ゲームリスタート
function restartGame() {
gameState.score = 0;
gameState.lives = 3;
gameState.gameRunning = true;
gameOverElement.style.display = 'none';
// パドルとボールをリセット
paddle.x = canvas.width / 2 - 60;
resetBall();
// ブロックを再初期化
initBlocks();
}
// UI更新
function updateUI() {
scoreElement.textContent = gameState.score;
livesElement.textContent = gameState.lives;
}
// メインゲームループ
function gameLoop() {
if (gameState.gameRunning) {
updatePaddle();
updateBall();
}
draw();
updateUI();
requestAnimationFrame(gameLoop);
}
// ゲーム初期化
initBlocks();
gameLoop();
</script>
</body>
</html>🔔 補足・注意事項
このコードや説明は、Claudeのバージョンや環境によって出力内容が異なる可能性があります。
同じ命令をしても、まったく違うコードが返ってくることもあるので、再現性は参考程度にご覧ください。
0 件のコメント:
コメントを投稿