AI game creator

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

No:15790

←

Prev Next

→

Block Breaker
Developer User6883｜Date and time 23/9/11 19:12:08
Build time 55.933 sec｜Game capacity 6.431KB｜

Script

Sure! Here's a simple implementation of the classic game "Block Breaker" using JavaScript and HTML. The game can be played on a smartphone and uses pictograms for visual elements. Just save the code as a single HTML file and open it in a web browser on your smartphone to play.

This code sets up a canvas element where the game is rendered. The ball, paddle, and bricks are drawn on the canvas, and collision detection is implemented to simulate the gameplay. The paddle can be controlled using the right and left arrow keys or touch gestures on a smartphone. When the ball hits the bricks, they are destroyed, and the game is won when no bricks are left or lost when the ball hits the bottom wall. The game supports continuous animation using the `requestAnimationFrame` method.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Block Breaker</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script>
        window.onload = function() {
            var canvas = document.getElementById("gameCanvas");
            var ctx = canvas.getContext("2d");

// Game variables
            var paddleWidth = 80;
            var paddleHeight = 10;
            var paddleX = (canvas.width - paddleWidth) / 2;
            var ballRadius = 10;
            var ballX = canvas.width / 2;
            var ballY = canvas.height - 30;
            var dx = 2;
            var dy = -2;
            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 };
                }
            }

// Event listeners
            document.addEventListener("keydown", keyDownHandler, false);
            document.addEventListener("keyup", keyUpHandler, false);

// Keyboard event handlers
            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;
                }
            }

// Draw paddle
            function drawPaddle() {
                ctx.beginPath();
                ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
                ctx.fillStyle = "#0095DD";
                ctx.fill();
                ctx.closePath();
            }

// Draw ball
            function drawBall() {
                ctx.beginPath();
                ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
                ctx.fillStyle = "#0095DD";
                ctx.fill();
                ctx.closePath();
            }

// Draw bricks
            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();
                        }
                    }
                }
            }

// Collision detection
            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) {
                                dy = -dy;
                                b.status = 0;
                            }
                        }
                    }
                }
            }

// Draw game
            function draw() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                drawBricks();
                drawBall();
                drawPaddle();
                collisionDetection();

// Ball movement
                ballX += dx;
                ballY += dy;

// Ball collision with walls
                if (ballX + dx > canvas.width - ballRadius || ballX + dx < ballRadius) {
                    dx = -dx;
                }
                if (ballY + dy < ballRadius) {
                    dy = -dy;
                }
                if (ballY + dy > canvas.height - ballRadius) {
                    if(ballX > paddleX && ballX < paddleX + paddleWidth) {
                        dy = -dy;
                    } else {
                        alert("Game Over");
                        document.location.reload();
                    }
                }

// Paddle movement
                if (rightPressed && paddleX < canvas.width - paddleWidth) {
                    paddleX += 7;
                } else if (leftPressed && paddleX > 0) {
                    paddleX -= 7;
                }

requestAnimationFrame(draw);
            }

draw();
        }
    </script>
</body>
</html>
```