A game in which the blocks of the block breaker are broccoli.'s game

Click here for free DL of the app version that can save data.

No:1805

8612

←

Prev Next

→

A game in which the blocks of the block breaker ar..ALL
Developer anonymous｜Date and time 23/8/14 16:22:41
Build time unknown sec｜Game capacity 6.977KB｜

Script

ゲームオーバー

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ブロッコリーブロック崩し</title>
    <style>
        canvas {
            border: solid 1px #000;
        }

#game-over {
            display: none;
            position: absolute;
            top: 35%;
            left: 20%;
            width: 60%;
            background-color: #fff;
            border: solid 1px #000;
            text-align: center;
            padding: 20px;
            box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="300" height="400"></canvas>
    <div id="game-over">
        <h2>ゲームオーバー</h2>
        <p id="score"></p>
        <button id="restart">リスタート</button>
    </div>

// ブロックの初期化
        for (var c = 0; c < brickColumnCount; c++) {
            bricks[c] = [];
            for (var r = 0; r < brickRowCount; r++) {
                bricks[c][r] = { x: 0, y: 0, status: 1 };
            }
        }

// イベントのリスナー
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);
        document.addEventListener("mousemove", mouseMoveHandler, false);

// 右キー、左キーが押されたら
        function keyDownHandler(e) {
            if (e.key == "Right" || e.key == "ArrowRight") {
                rightPressed = true;
            }
            else if (e.key == "Left" || e.key == "ArrowLeft") {
                leftPressed = true;
            }
        }

// 右キー、左キーが離されたら
        function keyUpHandler(e) {
            if (e.key == "Right" || e.key == "ArrowRight") {
                rightPressed = false;
            }
            else if (e.key == "Left" || e.key == "ArrowLeft") {
                leftPressed = false;
            }
        }

// マウスが動いたら
        function mouseMoveHandler(e) {
            var relativeX = e.clientX - canvas.offsetLeft;
            if (relativeX > 0 && relativeX < canvas.width) {
                paddleX = relativeX - paddleWidth / 2;
            }
        }

// 衝突判定
        function collisionDetection() {
            for (var c = 0; c < brickColumnCount; c++) {
                for (var r = 0; r < brickRowCount; r++) {
                    var b = bricks[c][r];
                    if (b.status == 1) {
                        if (x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) {
                            dy = -dy;
                            b.status = 0;
                            score++;
                            if (score == brickRowCount * brickColumnCount) {
                                showGameOver();
                            }
                        }
                    }
                }
            }
        }

// スコア表示
        function drawScore() {
            ctx.font = "16px Arial";
            ctx.fillStyle = "#000";
            ctx.fillText("Score: " + score, 8, 20);
        }

// パドルの描画
        function drawPaddle() {
            ctx.beginPath();
            ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();
        }

// ボールの描画
        function drawBall() {
            ctx.beginPath();
            ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();
        }

// ブロックの描画
        function drawBricks() {
            for (var c = 0; c < brickColumnCount; c++) {
                for (var r = 0; r < brickRowCount; r++) {
                    if (bricks[c][r].status == 1) {
                        var brickX = (r * (brickWidth + brickPadding)) + brickOffsetLeft;
                        var brickY = (c * (brickHeight + brickPadding)) + brickOffsetTop;
                        bricks[c][r].x = brickX;
                        bricks[c][r].y = brickY;
                        ctx.beginPath();
                        ctx.rect(brickX, brickY, brickWidth, brickHeight);
                        ctx.fillStyle = "#0095DD";
                        ctx.fill();
                        ctx.closePath();
                    }
                }
            }
        }

// ゲームを描画
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBricks();
            drawBall();
            drawPaddle();
            drawScore();
            collisionDetection();

// 左右の壁との衝突判定
            if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
                dx = -dx;
            }
            // 上の壁との衝突判定
            if (y + dy < ballRadius) {
                dy = -dy;
            }
            // パドルとの衝突判定
            else if (y + dy > canvas.height - ballRadius - paddleHeight) {
                if (x > paddleX && x < paddleX + paddleWidth) {
                    dy = -dy;
                }
                else {
                    showGameOver();
                }
            }

// パドルの移動
            if (rightPressed && paddleX < canvas.width - paddleWidth) {
                paddleX += 7;
            }
            else if (leftPressed && paddleX > 0) {
                paddleX -= 7;
            }

x += dx; // x座標を移動
            y += dy; // y座標を移動
        }

// ゲームオーバーを表示
        function showGameOver() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            clearInterval(interval);
            document.getElementById("score").innerHTML = "Score: " + score;
            document.getElementById("game-over").style.display = "block";
            document.getElementById("restart").onclick = function() {
                document.location.reload();
            };
        }

var interval = setInterval(draw, 10); // ゲームループ

</script>
</body>
</html>