作品 ID: 3185
ブロック崩し

公開
ブロック崩しを行うゲームhigh エフェクト
ソース
プログラム

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Hyper Breakout - Chaos Edition</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            touch-action: none;
            overflow: hidden;
            background-color: #020617;
        }
        canvas {
            display: block;
            margin: 0 auto;
            border-radius: 12px;
            box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
            max-width: 100%;
            max-height: 70vh;
        }
        .ui-overlay {
            pointer-events: none;
        }
        .interactive {
            pointer-events: auto;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        .pulse-text {
            animation: pulse 2s infinite;
        }
    </style>
</head>
<body class="flex flex-col items-center justify-center min-h-screen p-4 text-slate-100 font-sans">

    <!-- ゲームのヘッダー情報 -->
    <div class="w-full max-w-2xl flex justify-between items-end mb-4 px-4">
        <div>
            <h1 class="text-3xl font-black text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500 italic">HYPER BREAKOUT</h1>
            <p class="text-xs text-blue-400 uppercase tracking-tighter">Balls: <span id="balls-count">1</span></p>
        </div>
        <div class="text-right">
            <p class="text-sm text-slate-400 uppercase">Total Score</p>
            <p class="text-3xl font-mono font-bold text-yellow-400" id="score-val">00000</p>
        </div>
    </div>

    <!-- ゲーム画面コンテナ -->
    <div class="relative w-full max-w-2xl">
        <canvas id="gameCanvas"></canvas>

        <!-- スタート・ポーズ・ゲームオーバー画面 -->
        <div id="overlay" class="absolute inset-0 flex flex-col items-center justify-center bg-slate-950/90 rounded-xl ui-overlay">
            <div id="status-msg" class="text-4xl font-black mb-8 text-center text-white drop-shadow-lg">READY?</div>
            <button id="start-btn" class="interactive bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-500 hover:to-purple-500 text-white px-10 py-4 rounded-full font-black text-xl transition-all transform hover:scale-110 active:scale-95 shadow-[0_0_20px_rgba(59,130,246,0.5)]">
                START CHAOS
            </button>
        </div>
    </div>

    <!-- 操作説明 -->
    <div class="mt-6 text-slate-400 text-center text-sm font-medium">
        <p class="hidden md:block">MOUSE または 矢印キー で操作</p>
        <p class="md:hidden">スワイプで操作 | ブロックを壊すとボールが増殖！</p>
    </div>

    <script>
        window.onload = function() {
            const canvas = document.getElementById("gameCanvas");
            const ctx = canvas.getContext("2d");
            const scoreEl = document.getElementById("score-val");
            const ballsEl = document.getElementById("balls-count");
            const overlay = document.getElementById("overlay");
            const startBtn = document.getElementById("start-btn");
            const statusMsg = document.getElementById("status-msg");

            // ゲーム設定
            let score = 0;
            let level = 1;
            let gameState = 'ready'; 
            let shakeTime = 0;

            // キャンバスサイズ
            const canvasWidth = 640;
            const canvasHeight = 400;
            canvas.width = canvasWidth;
            canvas.height = canvasHeight;

            // パドル
            const paddleHeight = 12;
            const paddleWidth = 100;
            let paddleX = (canvasWidth - paddleWidth) / 2;

            // エンティティ
            let balls = [];
            let particles = [];
            let bricks = [];

            // ブロック設定
            const brickRowCount = 6;
            const brickColumnCount = 9;
            const brickWidth = 60;
            const brickHeight = 20;
            const brickPadding = 8;
            const brickOffsetTop = 40;
            const brickOffsetLeft = (canvasWidth - (brickColumnCount * (brickWidth + brickPadding))) / 2;

            const colors = ["#f87171", "#fb923c", "#fbbf24", "#4ade80", "#2dd4bf", "#3b82f6", "#818cf8"];

            // 入力
            let rightPressed = false;
            let leftPressed = false;

            // パーティクルクラス
            class Particle {
                constructor(x, y, color) {
                    this.x = x;
                    this.y = y;
                    this.color = color;
                    this.size = Math.random() * 4 + 2;
                    this.speedX = (Math.random() - 0.5) * 8;
                    this.speedY = (Math.random() - 0.5) * 8;
                    this.life = 1.0;
                    this.decay = Math.random() * 0.05 + 0.02;
                }
                update() {
                    this.x += this.speedX;
                    this.y += this.speedY;
                    this.life -= this.decay;
                }
                draw() {
                    ctx.globalAlpha = this.life;
                    ctx.fillStyle = this.color;
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                    ctx.fill();
                    ctx.globalAlpha = 1;
                }
            }

            // ボールクラス
            class Ball {
                constructor(x, y, dx, dy, color = "#fff") {
                    this.x = x;
                    this.y = y;
                    this.dx = dx;
                    this.dy = dy;
                    this.radius = 6;
                    this.color = color;
                }
                update() {
                    this.x += this.dx;
                    this.y += this.dy;
                }
                draw() {
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                    ctx.fillStyle = this.color;
                    ctx.fill();
                    // 発光
                    ctx.shadowBlur = 15;
                    ctx.shadowColor = this.color;
                    ctx.closePath();
                    ctx.shadowBlur = 0;
                }
            }

            function initBricks() {
                bricks = [];
                for (let c = 0; c < brickColumnCount; c++) {
                    bricks[c] = [];
                    for (let r = 0; r < brickRowCount; r++) {
                        bricks[c][r] = { 
                            x: 0, 
                            y: 0, 
                            status: 1, 
                            color: colors[r % colors.length] 
                        };
                    }
                }
            }

            function createBall(x, y, isInitial = false) {
                const angle = isInitial ? -Math.PI/2 : (Math.random() * Math.PI) - Math.PI;
                const speed = 3 + (level * 0.5);
                const dx = Math.cos(angle) * speed;
                const dy = isInitial ? -speed : Math.sin(angle) * speed;
                const ballColor = isInitial ? "#fff" : colors[Math.floor(Math.random() * colors.length)];
                balls.push(new Ball(x, y, dx, dy, ballColor));
                ballsEl.textContent = balls.length;
            }

            function spawnParticles(x, y, color) {
                for (let i = 0; i < 10; i++) {
                    particles.push(new Particle(x, y, color));
                }
            }

            function triggerShake() {
                shakeTime = 10;
            }

            // イベントリスナー
            document.addEventListener("keydown", (e) => {
                if (e.key === "ArrowRight") rightPressed = true;
                if (e.key === "ArrowLeft") leftPressed = true;
            });
            document.addEventListener("keyup", (e) => {
                if (e.key === "ArrowRight") rightPressed = false;
                if (e.key === "ArrowLeft") leftPressed = false;
            });
            document.addEventListener("mousemove", (e) => {
                const rect = canvas.getBoundingClientRect();
                const relativeX = e.clientX - rect.left;
                if (relativeX > 0 && relativeX < canvas.width) {
                    paddleX = (relativeX * canvas.width / rect.width) - paddleWidth / 2;
                }
            });
            document.addEventListener("touchmove", (e) => {
                e.preventDefault();
                const rect = canvas.getBoundingClientRect();
                const touch = e.touches[0];
                const relativeX = touch.clientX - rect.left;
                if (relativeX > 0 && relativeX < canvas.width) {
                    paddleX = (relativeX * canvas.width / rect.width) - paddleWidth / 2;
                }
            }, { passive: false });

            startBtn.addEventListener("click", startGame);

            function collisionDetection() {
                for (let c = 0; c < brickColumnCount; c++) {
                    for (let r = 0; r < brickRowCount; r++) {
                        const b = bricks[c][r];
                        if (b.status === 1) {
                            for (let i = balls.length - 1; i >= 0; i--) {
                                const ball = balls[i];
                                if (ball.x > b.x && ball.x < b.x + brickWidth && ball.y > b.y && ball.y < b.y + brickHeight) {
                                    ball.dy = -ball.dy;
                                    b.status = 0;
                                    score += 10;
                                    spawnParticles(ball.x, ball.y, b.color);
                                    triggerShake();
                                    updateUI();
                                    
                                    // ブロックを崩すごとに新しいボールを生成！
                                    createBall(ball.x, ball.y);

                                    if (isLevelCleared()) {
                                        nextLevel();
                                    }
                                    break; 
                                }
                            }
                        }
                    }
                }
            }

            function isLevelCleared() {
                for (let c = 0; c < brickColumnCount; c++) {
                    for (let r = 0; r < brickRowCount; r++) {
                        if (bricks[c][r].status === 1) return false;
                    }
                }
                return true;
            }

            function nextLevel() {
                level++;
                gameState = 'paused';
                statusMsg.textContent = `LEVEL ${level-1} COMPLETE`;
                startBtn.textContent = "NEXT LEVEL";
                overlay.style.display = "flex";
            }

            function updateUI() {
                scoreEl.textContent = score.toString().padStart(5, '0');
                ballsEl.textContent = balls.length;
            }

            function draw() {
                if (gameState !== 'playing') return;

                // 画面シェイクの適用
                ctx.save();
                if (shakeTime > 0) {
                    const dx = (Math.random() - 0.5) * shakeTime;
                    const dy = (Math.random() - 0.5) * shakeTime;
                    ctx.translate(dx, dy);
                    shakeTime--;
                }

                // トレイル効果のための半透明クリア
                ctx.fillStyle = "rgba(2, 6, 23, 0.3)";
                ctx.fillRect(0, 0, canvas.width, canvas.height);

                // ブロック描画
                for (let c = 0; c < brickColumnCount; c++) {
                    for (let r = 0; r < brickRowCount; r++) {
                        if (bricks[c][r].status === 1) {
                            const bX = c * (brickWidth + brickPadding) + brickOffsetLeft;
                            const bY = r * (brickHeight + brickPadding) + brickOffsetTop;
                            bricks[c][r].x = bX;
                            bricks[c][r].y = bY;
                            
                            ctx.fillStyle = bricks[c][r].color;
                            ctx.shadowBlur = 5;
                            ctx.shadowColor = bricks[c][r].color;
                            ctx.beginPath();
                            ctx.roundRect(bX, bY, brickWidth, brickHeight, 4);
                            ctx.fill();
                            ctx.shadowBlur = 0;
                        }
                    }
                }

                // パーティクル更新・描画
                for (let i = particles.length - 1; i >= 0; i--) {
                    particles[i].update();
                    particles[i].draw();
                    if (particles[i].life <= 0) particles.splice(i, 1);
                }

                // パドル描画
                ctx.fillStyle = "#3b82f6";
                ctx.shadowBlur = 20;
                ctx.shadowColor = "rgba(59, 130, 246, 0.8)";
                ctx.beginPath();
                ctx.roundRect(paddleX, canvas.height - paddleHeight - 10, paddleWidth, paddleHeight, 6);
                ctx.fill();
                ctx.shadowBlur = 0;

                // ボール更新・描画
                for (let i = balls.length - 1; i >= 0; i--) {
                    const ball = balls[i];
                    ball.update();
                    ball.draw();

                    // 壁衝突
                    if (ball.x + ball.dx > canvas.width - ball.radius || ball.x + ball.dx < ball.radius) {
                        ball.dx = -ball.dx;
                        triggerShake();
                    }
                    if (ball.y + ball.dy < ball.radius) {
                        ball.dy = -ball.dy;
                    } else if (ball.y + ball.dy > canvas.height - ball.radius - 10) {
                        // パドル衝突
                        if (ball.x > paddleX && ball.x < paddleX + paddleWidth) {
                            let hitPos = (ball.x - (paddleX + paddleWidth / 2)) / (paddleWidth / 2);
                            ball.dx = hitPos * 6;
                            ball.dy = -Math.abs(ball.dy);
                            triggerShake();
                        } else if (ball.y > canvas.height + 20) {
                            // 画面外へ
                            balls.splice(i, 1);
                            updateUI();
                            if (balls.length === 0) {
                                gameOver();
                            }
                        }
                    }
                }

                collisionDetection();

                // パドル移動制御
                if (rightPressed && paddleX < canvas.width - paddleWidth) paddleX += 8;
                if (leftPressed && paddleX > 0) paddleX -= 8;

                ctx.restore();
                requestAnimationFrame(draw);
            }

            function startGame() {
                if (gameState === 'gameover' || gameState === 'ready') {
                    score = 0;
                    level = 1;
                    balls = [];
                    particles = [];
                    initBricks();
                    createBall(canvas.width / 2, canvas.height - 50, true);
                } else if (gameState === 'paused') {
                    initBricks();
                    // 次のレベルではボールを1つにリセット（カオスすぎるのを防ぐため）
                    balls = [];
                    createBall(canvas.width / 2, canvas.height - 50, true);
                }
                
                gameState = 'playing';
                overlay.style.display = "none";
                updateUI();
                draw();
            }

            function gameOver() {
                gameState = 'gameover';
                statusMsg.innerHTML = `<span class="text-red-500">MISSION FAILED</span><br><span class="text-2xl font-normal text-slate-400">SCORE: ${score}</span>`;
                startBtn.textContent = "REBOOT SYSTEM";
                overlay.style.display = "flex";
            }

            initBricks();
            updateUI();
            
            // 背景の初期描画
            ctx.fillStyle = "#020617";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        };
    </script>
</body>
</html>
作品について
作品情報

作品を編集
TkoTko 作
ライセンス: 未指定（未指定/貯蔵庫のみ）
形式: html
タグ: -
利用バージョン: 3.7.14
アクセス数(累計): 10
アクセス数(今月): 10
更新日時: 2026/02/04 12:46
⭐
作品公開情報
交流
コメントを取得中...