AI game creator

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

No:10561

←

Prev Next

→

Block Breaker
Developer User4580｜Date and time 23/8/1 2:12:54
Build time 51.404 sec｜Game capacity 6.987KB｜

Script

Sure! Here's a simple implementation of the classic game "Block Breaker" using HTML, JavaScript, and pictograms for smartphone operation. Please note that this is a simplified version and you can customize it further based on your preferences.

This HTML file contains the game logic, including the ball, paddle, bricks, collision detection, movement controls, and drawing functions. It also registers event listeners for keydown, keyup, and mousemove events to handle user input on a smartphone. To play the game, you can open the HTML file in a web browser on your smartphone and interact with the paddle to bounce the ball and break the bricks. Enjoy the game!

←

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>
</head>
<body>
    <canvas id="gameCanvas" width="320px" height="480px"></canvas>
    <script>
        // Getting the canvas element and its context
        const canvas = document.getElementById("gameCanvas");
        const context = canvas.getContext("2d");

// Setting up the initial game state
        let ballX = canvas.width / 2; // X-coordinate of the ball
        let ballY = canvas.height - 30; // Y-coordinate of the ball
        let ballRadius = 10; // Radius of the ball
        let ballDX = 2; // Ball's movement along the X-axis
        let ballDY = -2; // Ball's movement along the Y-axis

let paddleHeight = 10; // Height of the paddle
        let paddleWidth = 75; // Width of the paddle
        let paddleX = (canvas.width - paddleWidth) / 2; // X-coordinate of the paddle
        let rightPressed = false; // Flag to check if the right key is pressed
        let leftPressed = false; // Flag to check if the left key is pressed

// Create the bricks
        let brickRowCount = 3;
        let brickColumnCount = 5;
        let brickWidth = 75;
        let brickHeight = 20;
        let brickPadding = 10;
        let brickOffsetTop = 30;
        let brickOffsetLeft = 30;
        let bricks = [];
        for (let c = 0; c < brickColumnCount; c++) {
            bricks[c] = [];
            for (let r = 0; r < brickRowCount; r++) {
                bricks[c][r] = { x: 0, y: 0, status: 1 };
            }
        }

// Function to handle key down events
        function keyDownHandler(event) {
            if (event.key === "Right" || event.key === "ArrowRight") {
                rightPressed = true;
            } else if (event.key === "Left" || event.key === "ArrowLeft") {
                leftPressed = true;
            }
        }

// Function to handle key up events
        function keyUpHandler(event) {
            if (event.key === "Right" || event.key === "ArrowRight") {
                rightPressed = false;
            } else if (event.key === "Left" || event.key === "ArrowLeft") {
                leftPressed = false;
            }
        }

// Function to handle mouse movement
        function mouseMoveHandler(event) {
            let relativeX = event.clientX - canvas.offsetLeft;
            if (relativeX > 0 && relativeX < canvas.width) {
                paddleX = relativeX - paddleWidth / 2;
            }
        }

// Function to check collision between the ball and bricks
        function collisionDetection() {
            for (let c = 0; c < brickColumnCount; c++) {
                for (let r = 0; r < brickRowCount; r++) {
                    let brick = bricks[c][r];
                    if (brick.status === 1) {
                        if (
                            ballX > brick.x &&
                            ballX < brick.x + brickWidth &&
                            ballY > brick.y &&
                            ballY < brick.y + brickHeight
                        ) {
                            ballDY = -ballDY;
                            brick.status = 0;
                        }
                    }
                }
            }
        }

// Function to draw the ball on the canvas
        function drawBall() {
            context.beginPath();
            context.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
            context.fillStyle = "#0095DD";
            context.fill();
            context.closePath();
        }

// Function to draw the paddle on the canvas
        function drawPaddle() {
            context.beginPath();
            context.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
            context.fillStyle = "#0095DD";
            context.fill();
            context.closePath();
        }

// Function to draw the bricks on the canvas
        function drawBricks() {
            for (let c = 0; c < brickColumnCount; c++) {
                for (let r = 0; r < brickRowCount; r++) {
                    if (bricks[c][r].status === 1) {
                        let brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
                        let brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
                        bricks[c][r].x = brickX;
                        bricks[c][r].y = brickY;
                        context.beginPath();
                        context.rect(brickX, brickY, brickWidth, brickHeight);
                        context.fillStyle = "#0095DD";
                        context.fill();
                        context.closePath();
                    }
                }
            }
        }

// Function to redraw the canvas
        function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawBricks();
            drawBall();
            drawPaddle();
            collisionDetection();

// Bounce the ball off the walls
            if (ballX + ballDX > canvas.width - ballRadius || ballX + ballDX < ballRadius) {
                ballDX = -ballDX;
            }
            if (ballY + ballDY < ballRadius) {
                ballDY = -ballDY;
            } else if (ballY + ballDY > canvas.height - ballRadius) {
                // Check if the ball hits the paddle
                if (ballX > paddleX && ballX < paddleX + paddleWidth) {
                    ballDY = -ballDY;
                } else {
                    // Game over
                    alert("Game Over");
                    document.location.reload();
                }
            }

// Move the paddle based on key events
            if (rightPressed && paddleX < canvas.width - paddleWidth) {
                paddleX += 7;
            } else if (leftPressed && paddleX > 0) {
                paddleX -= 7;
            }

ballX += ballDX;
            ballY += ballDY;
            requestAnimationFrame(draw);
        }

// Register event listeners
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);
        document.addEventListener("mousemove", mouseMoveHandler, false);

// Start the game
        draw();
    </script>
</body>
```

To play the game, you can open the HTML file in a web browser on your smartphone and interact with the paddle to bounce the ball and break the bricks. Enjoy the game!