The paddle bounces the ball that falls down from the top to the bottom to destroy the blocks that fall with the quiz!'s game

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

No:9513

338

←

Prev Next

→

The paddle bounces the ball that falls down from t..ALL
Developer User3589｜Date and time 23/7/25 21:54:50
Build time 60.194 sec｜Game capacity 7.586KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>クイズとブロック崩しゲーム</title>
    <style>
        body { margin: 0; padding: 0; }
        canvas { background: #000; display: block; margin: 0 auto; }
    </style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>

// ゲームの変数
    let canvas, ctx;
    let paddleX, paddleY;
    let ballX, ballY, ballXSpeed, ballYSpeed;
    let blocks;
    let currentQuestion, currentChoices, currentAnswer;
    let score;
    let gameWon, gameOver;

// 初期化
    function init() {
        canvas = document.getElementById("gameCanvas");
        ctx = canvas.getContext("2d");
        
        paddleX = canvas.width / 2 - PADDLE_WIDTH / 2;
        paddleY = canvas.height - PADDLE_HEIGHT;
        
        ballX = canvas.width / 2;
        ballY = canvas.height - PADDLE_HEIGHT - BALL_RADIUS;
        ballXSpeed = 5;
        ballYSpeed = -5;
        
        blocks = createBlocks();
        
        score = 0;
        
        gameWon = false;
        gameOver = false;
        
        document.addEventListener("keydown", handleKeyPress);
        
        setInterval(update, 16);
    }

// ブロックの作成
    function createBlocks() {
        let blocks = [];
        for (let row = 0; row < BLOCK_ROWS; row++) {
            for (let col = 0; col < BLOCK_COLUMNS; col++) {
                let x = (BLOCK_WIDTH + 10) * col + 10;
                let y = (BLOCK_HEIGHT + 10) * row + 10;
                blocks.push({ x: x, y: y, visible: true });
            }
        }
        return blocks;
    }

// ゲームの更新
    function update() {
        if (gameWon) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = "#ffffff";
            ctx.font = "30px Arial";
            ctx.fillText("おめでとうございます！", canvas.width / 2 - 200, canvas.height / 2);
            return;
        }

if (gameOver) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = "#ffffff";
            ctx.font = "30px Arial";
            ctx.fillText("ゲームオーバー！", canvas.width / 2 - 150, canvas.height / 2);
            return;
        }

ctx.clearRect(0, 0, canvas.width, canvas.height);

drawPaddle();
        drawBall();
        drawBlocks();

movePaddle();
        moveBall();

checkCollision();
        checkWin();
    }

// パドルの描画
    function drawPaddle() {
        ctx.fillStyle = "#ffffff";
        ctx.fillRect(paddleX, paddleY, PADDLE_WIDTH, PADDLE_HEIGHT);
    }

// ボールの描画
    function drawBall() {
        ctx.beginPath();
        ctx.arc(ballX, ballY, BALL_RADIUS, 0, Math.PI * 2);
        ctx.fillStyle = "#ffffff";
        ctx.fill();
        ctx.closePath();
    }

// ブロックの描画
    function drawBlocks() {
        for (let i = 0; i < blocks.length; i++) {
            let block = blocks[i];
            if (block.visible) {
                ctx.fillStyle = "#ffffff";
                ctx.fillRect(block.x, block.y, BLOCK_WIDTH, BLOCK_HEIGHT);
            }
        }
    }

// パドルの移動
    function movePaddle() {
        if (keyState["ArrowLeft"]) {
            paddleX -= PADDLE_SPEED;
            if (paddleX < 0) {
                paddleX = 0;
            }
        }
        if (keyState["ArrowRight"]) {
            paddleX += PADDLE_SPEED;
            if (paddleX + PADDLE_WIDTH > canvas.width) {
                paddleX = canvas.width - PADDLE_WIDTH;
            }
        }
    }

// ボールの移動
    function moveBall() {
        ballX += ballXSpeed;
        ballY += ballYSpeed;

if (ballX < BALL_RADIUS || ballX > canvas.width - BALL_RADIUS) {
            ballXSpeed = -ballXSpeed;
        }
        if (ballY < BALL_RADIUS) {
            ballYSpeed = -ballYSpeed;
        }

if (ballY > canvas.height - PADDLE_HEIGHT - BALL_RADIUS) {
            if (ballX >= paddleX && ballX <= paddleX + PADDLE_WIDTH) {
                ballYSpeed = -ballYSpeed;
                showQuiz();
            } else {
                gameOver = true;
            }
        }
    }

// 衝突のチェック
    function checkCollision() {
        for (let i = 0; i < blocks.length; i++) {
            let block = blocks[i];
            if (block.visible) {
                if (ballX >= block.x && ballX <= block.x + BLOCK_WIDTH && ballY - BALL_RADIUS <= block.y + BLOCK_HEIGHT && ballY + BALL_RADIUS >= block.y) {
                    blocks[i].visible = false;
                    ballYSpeed = -ballYSpeed;
                    score++;
                    if (score === BLOCK_COLUMNS * BLOCK_ROWS) {
                        gameWon = true;
                    }
                }
            }
        }
    }

// 勝利のチェック
    function checkWin() {
        if (score === BLOCK_COLUMNS * BLOCK_ROWS) {
            gameWon = true;
        }
    }

// クイズを表示
    function showQuiz() {
        let quiz = QUIZ_OPTIONS[Math.floor(Math.random() * QUIZ_OPTIONS.length)];
        currentQuestion = quiz.question;
        currentChoices = quiz.choices;
        currentAnswer = quiz.answer;

let quizBox = document.createElement("div");
        quizBox.id = "quizBox";
        quizBox.style.position = "absolute";
        quizBox.style.background = "#ffffff";
        quizBox.style.border = "1px solid #000000";
        quizBox.style.padding = "20px";
        quizBox.style.left = canvas.width / 2 - 150 + "px";
        quizBox.style.top = canvas.height / 2 - 100 + "px";
        quizBox.innerHTML = "<h3>" + currentQuestion + "</h3>";
        for (let i = 0; i < currentChoices.length; i++) {
            let radioBtn = document.createElement("input");
            radioBtn.type = "radio";
            radioBtn.name = "answer";
            radioBtn.value = currentChoices[i];
            quizBox.appendChild(radioBtn);
            quizBox.innerHTML += currentChoices[i] + "<br>";
        }
    
        let submitBtn = document.createElement("button");
        submitBtn.innerHTML = "回答する";
        submitBtn.onclick = checkAnswer;
        quizBox.appendChild(submitBtn);

canvas.parentNode.insertBefore(quizBox, canvas.nextSibling);
    }

// 回答をチェック
    function checkAnswer() {
        let answer = document.querySelector('input[name="answer"]:checked').value;
        if (answer === currentAnswer) {
            canvas.parentNode.removeChild(document.getElementById("quizBox"));
            ballYSpeed = -ballYSpeed;
        } else {
            gameOver = true;
        }
    }

// キープレスの処理
    let keyState = {};
    function handleKeyPress(event) {
        keyState[event.key] = (event.type === "keydown");
    }

init();
</script>
</body>
</html>