AI game creator

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

No:23805

←

Prev Next

→

Block Breaker
Developer User11149｜Date and time 23/11/3 17:31:00
Build time 135.584 sec｜Game capacity 5.735KB｜

Script

Sure! Here's an example implementation of a simple Block Breaker game using JavaScript and HTML:

To play this game on a smartphone, you can simply open the HTML file in your phone's browser. The game uses touch-based input for controlling the paddle. Slide your finger horizontally on the screen to move the paddle left and right. The objective of the game is to break all the blocks with the ball by bouncing it off the paddle. If the ball falls below the paddle, the game ends. If you manage to break all the blocks, a "Congratulations! You won!" message will be displayed.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example implementation of a simple Block Breaker game using JavaScript and HTML:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Block Breaker Game</title>
    <style>
        canvas {
            border: 1px solid #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="blockBreakerCanvas" width="400" height="400"></canvas>
    
    <script>
        // Create the canvas and context
        const canvas = document.getElementById("blockBreakerCanvas");
        const ctx = canvas.getContext("2d");
        
        // Set up the paddle properties
        const paddleHeight = 10;
        const paddleWidth = 75;
        let paddleX = (canvas.width - paddleWidth) / 2;
        
        // Set up the ball properties
        let ballRadius = 10;
        let ballX = canvas.width / 2;
        let ballY = canvas.height - 30;
        let dx = 2;
        let dy = -2;
        
        // Set up block properties
        const blockRowCount = 3;
        const blockColumnCount = 5;
        const blockWidth = 75;
        const blockHeight = 20;
        const blockPadding = 10;
        const blockOffsetTop = 30;
        const blockOffsetLeft = 30;
        const 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 };
            }
        }
        
        // Set up game score
        let score = 0;
        
        // Function to draw the paddle
        function drawPaddle() {
            ctx.beginPath();
            ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();
        }
        
        // Function to draw the ball
        function drawBall() {
            ctx.beginPath();
            ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
            ctx.fillStyle = "#0095DD";
            ctx.fill();
            ctx.closePath();
        }
        
        // Function to draw the blocks
        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 = "#0095DD";
                        ctx.fill();
                        ctx.closePath();
                    }
                }
            }
        }
        
        // Function to handle collision detection
        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) {
                            dy = -dy;
                            block.status = 0;
                            score++;
                            if (score === blockRowCount * blockColumnCount) {
                                alert("Congratulations! You won!");
                                document.location.reload();
                            }
                        }
                    }
                }
            }
        }
        
        // Function to update the game state
        function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawPaddle();
            drawBlocks();
            drawBall();
            collisionDetection();
            
            // Move the paddle based on user input (smartphone operation)
            document.addEventListener("touchmove", (e) => {
                const touchX = e.touches[0].clientX;
                if (touchX > paddleWidth / 2 && touchX < canvas.width - paddleWidth / 2) {
                    paddleX = touchX - paddleWidth / 2;
                }
            });
            
            // Move the ball and handle collisions
            ballX += dx;
            ballY += dy;
            if (ballX + dx > canvas.width - ballRadius || ballX + dx < ballRadius) {
                dx = -dx;
            }
            if (ballY + dy < ballRadius) {
                dy = -dy;
            } else if (ballY + dy > canvas.height - ballRadius) {
                if (ballX > paddleX && ballX < paddleX + paddleWidth) {
                    dy = -dy;
                } else {
                    alert("Game Over! Your score: " + score);
                    document.location.reload();
                }
            }
            
            requestAnimationFrame(update);
        }
        
        // Start the game
        update();
    </script>
</body>
</html>
```