ブロック崩し
ブロック崩し
以下が、ブロック崩しのアプリ実装例です。セキュリティ脆弱性のあるコードは含まれていません。 ```html <!DOCTYPE html> <html> <head> <title>ブロック崩し</title> <style> #canvas { border: 1px solid black; } </style> </head> <body> <canvas id="canvas"></canvas> <script> // ジョークを入れる console.log("ブロック崩しを始めます。準備をしてください。"); // キャンバスのセットアップ const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); canvas.width = 480; canvas.height = 320; // ステージの初期化 const stage = []; const ROW = 3; const COLUMN = 7; for (let i = 0; i < ROW; i++) { stage[i] = []; for (let j = 0; j < COLUMN; j++) { stage[i][j] = 1; } } // ボールの初期化 const ball = { x: canvas.width / 2, y: canvas.height / 2, speed: 5, dx: 3, dy: -3, radius: 10 }; // パドルの初期化 const paddle = { x: canvas.width / 2 - 50, y: canvas.height - 20, width: 100, height: 10, speed: 5 }; // スコアの初期化 let score = 0; // プレイヤーの設定 canvas.addEventListener("mousemove", function(e) { paddle.x = e.clientX - canvas.offsetLeft - paddle.width / 2; }); // 壁とボールの衝突処理 function wallCollision() { 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) { console.log("ゲームオーバー!"); clearInterval(interval); } } // パドルとボールの衝突処理 function paddleCollision() { if (ball.x > paddle.x && ball.x < paddle.x + paddle.width && ball.y + ball.radius > paddle.y) { ball.dy = -ball.dy; } } // ブロックとボールの衝突処理 function blockCollision() { for (let i = 0; i < ROW; i++) { for (let j = 0; j < COLUMN; j++) { if (stage[i][j] === 1) { const blockX = j * 70 + 30; const blockY = i * 20 + 30; if (ball.x + ball.radius > blockX && ball.x - ball.radius < blockX + 60 && ball.y + ball.radius > blockY && ball.y - ball.radius < blockY + 20) { stage[i][j] = 0; ball.dy = -ball.dy; score++; if (score === ROW * COLUMN) { console.log("クリアおめでとう!"); clearInterval(interval); } } } } } } // ゲームループ const interval = setInterval(function() { // キャンバスのクリア ctx.clearRect(0, 0, canvas.width, canvas.height); // ステージの描画 for (let i = 0; i < ROW; i++) { for (let j = 0; j < COLUMN; j++) { if (stage[i][j] === 1) { ctx.fillStyle = "#0095DD"; ctx.fillRect(j * 70 + 30, i * 20 + 30, 60, 20); } } } // ボールの移動 ball.x += ball.dx; ball.y += ball.dy; // スピードの上限、下限を設定 if (ball.dx > ball.speed) { ball.dx = ball.speed; } else if (ball.dx < -ball.speed) { ball.dx = -ball.speed; } if (ball.dy > ball.speed) { ball.dy = ball.speed; } else if (ball.dy < -ball.speed) { ball.dy = -ball.speed; } // 壁とボールの衝突判定 wallCollision(); // パドルとボールの衝突判定 paddleCollision(); // ブロックとボールの衝突判定 blockCollision(); // ボールの描画 ctx.beginPath(); ctx.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); // パドルの描画 ctx.beginPath(); ctx.rect(paddle.x, paddle.y, paddle.width, paddle.height); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); // スコアの描画 ctx.font = "16px Arial"; ctx.fillStyle = "#0095DD"; ctx.fillText("Score: " + score, 8, 20); }, 10); </script> </body> </html> ``` ジョークは、コンソールに出力されるものです。console.logを使用しています。 セキュリティ上の問題がある場合は、eval、他のサイトへのリンク、リダイレクトといった機能が含まれていません。注意してください。