AI game creator

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

No:27915

←

Prev Next

→

Block Breaker
Developer User13926｜Date and time 23/12/10 1:53:26
Build time 43.928 sec｜Game capacity 5.62KB｜

Script

Here is an example of a simple Block Breaker game implemented as a single HTML file using JavaScript:

You can save this code in a file with a `.html` extension, open it in a web browser, and play the Block Breaker game. The game involves using the left and right arrow keys to control the paddle and bounce the ball off the bricks to break them.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

Here is an example of a simple Block Breaker game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Block Breaker</title>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="300"></canvas>
    
    <script>
        // Game initialization
        var canvas = document.getElementById("gameCanvas");
        var ctx = canvas.getContext("2d");
        
        // Paddle properties
        var paddleHeight = 10;
        var paddleWidth = 75;
        var paddleX = (canvas.width - paddleWidth) / 2;
        var paddleSpeed = 7;
        var rightPressed = false;
        var leftPressed = false;
        
        // Ball properties
        var ballRadius = 10;
        var ballX = canvas.width / 2;
        var ballY = canvas.height - 30;
        var ballSpeedX = 2;
        var ballSpeedY = -2;
        
        // Brick properties
        var brickRowCount = 3;
        var brickColumnCount = 5;
        var brickWidth = 75;
        var brickHeight = 20;
        var brickPadding = 10;
        var brickOffsetTop = 30;
        var brickOffsetLeft = 30;
        var bricks = [];
        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 };
            }
        }
        
        // Game controls
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, 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;
            }
        }
        
        // Game logic
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            drawBricks();
            drawPaddle();
            drawBall();
            
            collisionDetection();
            
            if(ballX + ballSpeedX > canvas.width - ballRadius || ballX + ballSpeedX < ballRadius) {
                ballSpeedX = -ballSpeedX;
            }
            if(ballY + ballSpeedY < ballRadius) {
                ballSpeedY = -ballSpeedY;
            }
            else if(ballY + ballSpeedY > canvas.height - ballRadius) {
                if(ballX > paddleX && ballX < paddleX + paddleWidth) {
                    ballSpeedY = -ballSpeedY;
                }
                else {
                    alert("Game Over");
                    document.location.reload();
                }
            }
            
            if(rightPressed && paddleX < canvas.width - paddleWidth) {
                paddleX += paddleSpeed;
            }
            else if(leftPressed && paddleX > 0) {
                paddleX -= paddleSpeed;
            }
            
            ballX += ballSpeedX;
            ballY += ballSpeedY;
            
            requestAnimationFrame(draw);
        }
        
        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(ballX, ballY, 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 = (c * (brickWidth + brickPadding)) + brickOffsetLeft;
                        var brickY = (r * (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 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(ballX > b.x && ballX < b.x + brickWidth && ballY > b.y && ballY < b.y + brickHeight) {
                            ballSpeedY = -ballSpeedY;
                            b.status = 0;
                        }
                    }
                }
            }
        }
        
        draw();
    </script>
</body>
</html>
```