ノート

アーケードクラシック「アルカノイド」をp5.jsで生成します。ブロック崩しの本格的な実装です。 ```javascript // Arkanoid Game in p5.js // ブロック崩しゲームの完全実装 let paddle; let ball; let blocks = []; let score = 0; let lives = 3; let gameState = 'playing'; // 'playing', 'win', 'lose' let blockRows = 5; let blockCols = 8; let blockWidth, blockHeight; let ballSpeed = 5; let paddleSpeed = 8; function setup() { createCanvas(800, 600); blockWidth = width / blockCols; blockHeight = 30; // パドルの初期化 paddle = { x: width / 2, y: height - 50, width: 100, height: 15, color: color(100, 200, 255) }; // ボールの初期化 resetBall(); // ブロックの生成 createBlocks(); // テキスト設定 textAlign(CENTER, CENTER); textSize(20); } function createBlocks() { blocks = []; for (let row = 0; row < blockRows; row++) { for (let col = 0; col < blockCols; col++) { let block = { x: col * blockWidth, y: row * blockHeight + 50, width: blockWidth - 4, height: blockHeight - 4, alive: true, color: color( map(row, 0, blockRows - 1, 255, 100), map(col, 0, blockCols - 1, 100, 255), 150 ) }; blocks.push(block); } } } function resetBall() { ball = { x: paddle.x, y: paddle.y - 20, vx: ballSpeed * (random() > 0.5 ? 1 : -1), vy: -ballSpeed, size: 12, color: color(255, 255, 100) }; } function draw() { background(30); // ゲーム状態に応じた処理 if (gameState === 'playing') { updateGame(); } else if (gameState === 'win') { drawWinScreen(); } else if (gameState === 'lose') { drawLoseScreen(); } // パドルの描画 fill(paddle.color); rect(paddle.x - paddle.width / 2, paddle.y - paddle.height / 2, paddle.width, paddle.height); // ボールの描画 fill(ball.color); ellipse(ball.x, ball.y, ball.size); // ブロックの描画 for (let block of blocks) { if (block.alive) { fill(block.color); rect(block.x + 2, block.y + 2, block.width, block.height); } } // スコアとライフの表示 fill(255); text(`Score: ${score}`, 100, 30); text(`Lives: ${lives}`, width - 100, 30); // ゲームオーバー時の表示 if (lives <= 0) { gameState = 'lose'; } // 全ブロック破壊時の表示 let allCleared = blocks.every(b => !b.alive); if (allCleared) { gameState = 'win'; } } function updateGame() { // パドルの移動 if (keyIsDown(LEFT_ARROW)) { paddle.x -= paddleSpeed; } if (keyIsDown(RIGHT_ARROW)) { paddle.x += paddleSpeed; } paddle.x = constrain(paddle.x, paddle.width / 2, width - paddle.width / 2); // ボールの移動 ball.x += ball.vx; ball.y += ball.vy; // 壁との衝突 if (ball.x < ball.size / 2 || ball.x > width - ball.size / 2) { ball.vx *= -1; } if (ball.y < ball.size / 2) { ball.vy *= -1; } // パドルとの衝突 if (ball.y + ball.size / 2 > paddle.y - paddle.height / 2 && ball.y + ball.size / 2 < paddle.y + paddle.height / 2 && ball.x > paddle.x - paddle.width / 2 && ball.x < paddle.x + paddle.width / 2) { ball.vy *= -1; // パドル位置に応じて角度を変える let hitPos = (ball.x - paddle.x) / (paddle.width / 2); ball.vx = hitPos * ballSpeed * 1.5; ball.vy = -abs(ball.vy); } // ボールが画面下に落ちた場合 if (ball.y > height + ball.size) { lives--; if (lives > 0) { resetBall(); } } // ブロックとの衝突 for (let i = blocks.length - 1; i >= 0; i--) { let block = blocks[i]; if (!block.alive) continue; if (ball.x > block.x && ball.x < block.x + block.width && ball.y > block.y && ball.y < block.y + block.height) { block.alive = false; score += 10; // 衝突方向の判定 let overlapLeft = ball.x - (block.x - ball.size / 2); let overlapRight = (block.x + block.width + ball.size / 2) - ball.x; let overlapTop = ball.y - (block.y - ball.size / 2); let overlapBottom = (block.y + block.height + ball.size / 2) - ball.y; let minOverlap = Math.min(overlapLeft, overlapRight, overlapTop, overlapBottom); if (minOverlap === overlapLeft || minOverlap === overlapRight) { ball.vx *= -1; } else { ball.vy *= -1; } break; } } } function drawWinScreen() { fill(0, 255, 0); textSize(40); text('YOU WIN!', width / 2, height / 2 - 20); textSize(20); text(`Final Score: ${score}`, width / 2, height / 2 + 30); text('Press R to restart', width / 2, height / 2 + 60); } function drawLoseScreen() { fill(255, 0, 0); textSize(40); text('GAME OVER', width / 2, height / 2 - 20); textSize(20); text(`Final Score: ${score}`, width / 2, height / 2 + 30); text('Press R to restart', width / 2, height / 2 + 60); } function keyPressed() { if (key === 'r' || key === 'R') { // リスタート score = 0; lives = 3; gameState = 'playing'; createBlocks(); resetBall(); } } ``` このコードは以下の機能を実装しています: 1. **パドル操作**: 左右矢印キーで移動 2. **ボール物理**: 壁・パドル・ブロックとの衝突判定 3. **ブロック生成**: 5行×8列のカラフルなブロック 4. **スコアシステム**: ブロック破壊で10点獲得 5. **ライフシステム**: 3ライフ、ボール落下で減少 6. **ゲーム状態管理**: プレイ中・勝利・敗北の3状態 7. **リスタート機能**: Rキーでゲームをリセット p5.jsのエディタ(editor.p5js.org)にコピー&ペーストして実行できます。

フリーのプロンプト百科事典 Wikiprompt より

Kris Kashtanova

2023年3月18日

アーケードクラシック「アルカノイド」をp5.jsで生成します。ブロック崩しの本格的な実装です。 ```javascript // Arkanoid Game in p5.js // ブロック崩しゲームの完全実装 let paddle; let ball; let blocks = []; let score = 0; let lives = 3; let gameState = 'playing'; // 'playing', 'win', 'lose' let blockRows = 5; let blockCols = 8; let blockWidth, blockHeight; let ballSpeed = 5; let paddleSpeed = 8; function setup() { createCanvas(800, 600); blockWidth = width / blockCols; blockHeight = 30; // パドルの初期化 paddle = { x: width / 2, y: height - 50, width: 100, height: 15, color: color(100, 200, 255) }; // ボールの初期化 resetBall(); // ブロックの生成 createBlocks(); // テキスト設定 textAlign(CENTER, CENTER); textSize(20); } function createBlocks() { blocks = []; for (let row = 0; row < blockRows; row++) { for (let col = 0; col < blockCols; col++) { let block = { x: col * blockWidth, y: row * blockHeight + 50, width: blockWidth - 4, height: blockHeight - 4, alive: true, color: color( map(row, 0, blockRows - 1, 255, 100), map(col, 0, blockCols - 1, 100, 255), 150 ) }; blocks.push(block); } } } function resetBall() { ball = { x: paddle.x, y: paddle.y - 20, vx: ballSpeed * (random() > 0.5 ? 1 : -1), vy: -ballSpeed, size: 12, color: color(255, 255, 100) }; } function draw() { background(30); // ゲーム状態に応じた処理 if (gameState === 'playing') { updateGame(); } else if (gameState === 'win') { drawWinScreen(); } else if (gameState === 'lose') { drawLoseScreen(); } // パドルの描画 fill(paddle.color); rect(paddle.x - paddle.width / 2, paddle.y - paddle.height / 2, paddle.width, paddle.height); // ボールの描画 fill(ball.color); ellipse(ball.x, ball.y, ball.size); // ブロックの描画 for (let block of blocks) { if (block.alive) { fill(block.color); rect(block.x + 2, block.y + 2, block.width, block.height); } } // スコアとライフの表示 fill(255); text(`Score: ${score}`, 100, 30); text(`Lives: ${lives}`, width - 100, 30); // ゲームオーバー時の表示 if (lives <= 0) { gameState = 'lose'; } // 全ブロック破壊時の表示 let allCleared = blocks.every(b => !b.alive); if (allCleared) { gameState = 'win'; } } function updateGame() { // パドルの移動 if (keyIsDown(LEFT_ARROW)) { paddle.x -= paddleSpeed; } if (keyIsDown(RIGHT_ARROW)) { paddle.x += paddleSpeed; } paddle.x = constrain(paddle.x, paddle.width / 2, width - paddle.width / 2); // ボールの移動 ball.x += ball.vx; ball.y += ball.vy; // 壁との衝突 if (ball.x < ball.size / 2 || ball.x > width - ball.size / 2) { ball.vx *= -1; } if (ball.y < ball.size / 2) { ball.vy *= -1; } // パドルとの衝突 if (ball.y + ball.size / 2 > paddle.y - paddle.height / 2 && ball.y + ball.size / 2 < paddle.y + paddle.height / 2 && ball.x > paddle.x - paddle.width / 2 && ball.x < paddle.x + paddle.width / 2) { ball.vy *= -1; // パドル位置に応じて角度を変える let hitPos = (ball.x - paddle.x) / (paddle.width / 2); ball.vx = hitPos * ballSpeed * 1.5; ball.vy = -abs(ball.vy); } // ボールが画面下に落ちた場合 if (ball.y > height + ball.size) { lives--; if (lives > 0) { resetBall(); } } // ブロックとの衝突 for (let i = blocks.length - 1; i >= 0; i--) { let block = blocks[i]; if (!block.alive) continue; if (ball.x > block.x && ball.x < block.x + block.width && ball.y > block.y && ball.y < block.y + block.height) { block.alive = false; score += 10; // 衝突方向の判定 let overlapLeft = ball.x - (block.x - ball.size / 2); let overlapRight = (block.x + block.width + ball.size / 2) - ball.x; let overlapTop = ball.y - (block.y - ball.size / 2); let overlapBottom = (block.y + block.height + ball.size / 2) - ball.y; let minOverlap = Math.min(overlapLeft, overlapRight, overlapTop, overlapBottom); if (minOverlap === overlapLeft || minOverlap === overlapRight) { ball.vx *= -1; } else { ball.vy *= -1; } break; } } } function drawWinScreen() { fill(0, 255, 0); textSize(40); text('YOU WIN!', width / 2, height / 2 - 20); textSize(20); text(`Final Score: ${score}`, width / 2, height / 2 + 30); text('Press R to restart', width / 2, height / 2 + 60); } function drawLoseScreen() { fill(255, 0, 0); textSize(40); text('GAME OVER', width / 2, height / 2 - 20); textSize(20); text(`Final Score: ${score}`, width / 2, height / 2 + 30); text('Press R to restart', width / 2, height / 2 + 60); } function keyPressed() { if (key === 'r' || key === 'R') { // リスタート score = 0; lives = 3; gameState = 'playing'; createBlocks(); resetBall(); } } ``` このコードは以下の機能を実装しています: 1. **パドル操作**: 左右矢印キーで移動 2. **ボール物理**: 壁・パドル・ブロックとの衝突判定 3. **ブロック生成**: 5行×8列のカラフルなブロック 4. **スコアシステム**: ブロック破壊で10点獲得 5. **ライフシステム**: 3ライフ、ボール落下で減少 6. **ゲーム状態管理**: プレイ中・勝利・敗北の3状態 7. **リスタート機能**: Rキーでゲームをリセット p5.jsのエディタ(editor.p5js.org)にコピー&ペーストして実行できます。 p5.jsでマウスがパドルを操作する、プレイ可能なアルカノイドゲームを生成するためのシンプルなワンショットプロンプト。完成とバグ修正のためのフォローアップ指示を含む。

プロンプト内容保存

🌐
p5.jsコードを書いてください。アルカノイドゲーム用で、マウスでパドルを動かせるようにしてください。

ログインして完全なプロンプトを表示

次で続行:

ログインすると、次に同意したことになります: 利用規約 プライバシーポリシー

使い方

このプロンプトは coding 向けに設計されています。上の内容をコピーして、お好みの AI ツールに貼り付けてください。

最良の結果を得るには、プレースホルダー(角括弧や大文字で示された部分)を具体的な要件に置き換えてください。

参考資料

カテゴリ:coding| twitter| p5js| game-development

ノート