AI game creator

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

No:46740

←

Prev Next

→

Block Breaker
Developer User20131｜Date and time 24/2/25 21:58:24
Build time 15.8 sec｜Game capacity 5.055KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Block Breaker Game</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        
        const paddleWidth = 100;
        const paddleHeight = 10;
        let paddleX = (canvas.width - paddleWidth) / 2;
        const paddleSpeed =5;
       
        const ballRadius = 10;
        let ballX = canvas.width / 2;
        let ballY = canvas.height - 30;
        let ballDX = 2;
        let ballDY = -4;
        
        const blockRowCount = 3;
        const blockColumnCount = 5;
        const blockWidth = 75;
        const blockHeight = 20;
        const blockPadding = 10;
        const blockOffsetTop = 30;
        const blockOffsetLeft = 30;
        
        let blocks = [];
        for (let c = 0; c < blockColumnCount; c++) {
            blocks[c] = [];
            for (let r = 0; r < blockRowCount; r++) {
                blocks[c][r] = { x: 0, y: 0, status: 1 };
            }
        }
        
        let score = 0;
        
        document.addEventListener('keydown', function(event) {
            if (event.key === 'ArrowLeft' && paddleX > 0) {
                paddleX -= paddleSpeed;
            } else if (event.key === 'ArrowRight' && paddleX < canvas.width - paddleWidth) {
                paddleX += paddleSpeed;
            }
        });
        
        function collisionDetection() {
            for (let c = 0; c < blockColumnCount; c++) {
                for (let r = 0; r < blockRowCount; r++) {
                    const block = blocks[c][r];
                    if (block.status === 1) {
                        if (ballX > block.x && ballX < block.x + blockWidth && ballY > block.y && ballY < block.y + blockHeight) {
                            ballDY = -ballDY;
                            block.status = 0;
                            score++;
                            if (score === blockRowCount * blockColumnCount) {
                                alert('Congratulations! You won!');
                                document.location.reload();
                            }
                        }
                    }
                }
            }
        }
        
        function drawPaddle() {
            ctx.beginPath();
            ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
            ctx.fillStyle = 'black';
            ctx.fill();
            ctx.closePath();
        }
        
        function drawBall() {
            ctx.beginPath();
            ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
            ctx.fillStyle = 'black';
            ctx.fill();
            ctx.closePath();
        }
        
        function drawBlocks() {
            for (let c = 0; c < blockColumnCount; c++) {
                for (let r = 0; r < blockRowCount; r++) {
                    if (blocks[c][r].status === 1) {
                        const blockX = c * (blockWidth + blockPadding) + blockOffsetLeft;
                        const blockY = r * (blockHeight + blockPadding) + blockOffsetTop;
                        blocks[c][r].x = blockX;
                        blocks[c][r].y = blockY;
                        ctx.beginPath();
                        ctx.rect(blockX, blockY, blockWidth, blockHeight);
                        ctx.fillStyle = 'black';
                        ctx.fill();
                        ctx.closePath();
                    }
                }
            }
        }
        
        function drawScore() {
            ctx.font = '16px Arial';
            ctx.fillStyle = 'black';
            ctx.fillText('Score: ' + score, 8, 20);
        }
        
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBlocks();
            drawBall();
            drawPaddle();
            drawScore();
            collisionDetection();
            
            if (ballX + ballDX > canvas.width - ballRadius || ballX + ballDX < ballRadius) {
                ballDX = -ballDX;
            }
            if (ballY + ballDY < ballRadius) {
                ballDY = -ballDY;
            } else if (ballY + ballDY > canvas.height - ballRadius) {
                if (ballX > paddleX && ballX < paddleX + paddleWidth) {
                    ballDY = -ballDY;
                } else {
                    alert('Game Over. Your score is ' + score);
                    document.location.reload();
                }
            }
            
            ballX += ballDX;
            ballY += ballDY;
            
            requestAnimationFrame(draw);
        }
        
        draw();
    </script>
</body>
</html>