AI game creator

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

No:15228

←

Prev Next

→

Block Breaker
Developer User6594｜Date and time 23/9/7 20:49:49
Build time 95.406 sec｜Game capacity 8.473KB｜

Script

Sure! Here's a simple implementation of the Block Breaker game in a single HTML file using JavaScript. The game can be played on a smartphone, and pictograms are used for visuals. Simply copy the code below and save it as an HTML file to play the game.

Please note that this is a simplified version of the Block Breaker game, and you can enhance it further with additional features and improvements.

←

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>
        #gameCanvas {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script>
        // Game variables
        var canvas;
        var canvasContext;
        var ballX = 50;
        var ballY = 50;
        var ballSpeedX = 5;
        var ballSpeedY = 7;
        var paddleX;
        var paddleWidth = 80;
        var paddleHeight = 10;
        var rightPressed = false;
        var leftPressed = false;
        var brickRowCount = 3;
        var brickColumnCount = 5;
        var brickWidth = 75;
        var brickHeight = 20;
        var brickPadding = 10;
        var brickOffsetTop = 30;
        var brickOffsetLeft = 30;
        var bricks = [];
        var score = 0;
        var maxLives = 3;
        var lives = maxLives;
        
        // Initialize the game
        window.onload = function() {
            canvas = document.getElementById("gameCanvas");
            canvasContext = canvas.getContext("2d");
            paddleX = (canvas.width - paddleWidth) / 2;
            createBricks();
            
            // Add event listeners for touch controls
            canvas.addEventListener("touchstart", handleTouchStart);
            canvas.addEventListener("touchmove", handleTouchMove);
            
            // Add event listeners for keyboard controls
            document.addEventListener("keydown", handleKeyDown);
            document.addEventListener("keyup", handleKeyUp);
            
            // Start the game loop
            requestAnimationFrame(updateGame);
        };
        
        // Game update loop
        function updateGame() {
            movePaddle();
            moveBall();
            collisionDetection();
            draw();
            
            // Check game over condition
            if (lives <= 0) {
                gameOver();
            } else {
                requestAnimationFrame(updateGame);
            }
        }
        
        // Create the bricks for the game
        function createBricks() {
            for (var col = 0; col < brickColumnCount; col++) {
                bricks[col] = [];
                for (var row = 0; row < brickRowCount; row++) {
                    bricks[col][row] = { x: 0, y: 0, status: 1 };
                }
            }
        }
        
        // Handle paddle movement
        function movePaddle() {
            if (rightPressed && paddleX < canvas.width - paddleWidth) {
                paddleX += 7;
            } else if (leftPressed && paddleX > 0) {
                paddleX -= 7;
            }
        }
        
        // Handle ball movement
        function moveBall() {
            ballX += ballSpeedX;
            ballY += ballSpeedY;
            
            // Reverse ball direction if hitting the walls
            if (ballX < 0 || ballX > canvas.width) {
                ballSpeedX = -ballSpeedX;
            }
            if (ballY < 0) {
                ballSpeedY = -ballSpeedY;
            }
            
            // Reverse ball direction if hitting the paddle
            if (ballY > canvas.height - paddleHeight && ballX > paddleX && ballX < paddleX + paddleWidth) {
                ballSpeedY = -ballSpeedY;
            }
        }
        
        // Handle ball collision with bricks
        function collisionDetection() {
            for (var col = 0; col < brickColumnCount; col++) {
                for (var row = 0; row < brickRowCount; row++) {
                    var brick = bricks[col][row];
                    if (brick.status === 1) {
                        if (ballX > brick.x && ballX < brick.x + brickWidth && ballY > brick.y && ballY < brick.y + brickHeight) {
                            ballSpeedY = -ballSpeedY;
                            brick.status = 0;
                            score++;
                            
                            // Check win condition
                            if (score === brickRowCount * brickColumnCount) {
                                gameWin();
                            }
                        }
                    }
                }
            }
        }
        
        // Handle touch controls
        function handleTouchStart(e) {
            var touchX = e.touches[0].clientX;
            if (touchX > paddleX && touchX < paddleX + paddleWidth) {
                if (!rightPressed && !leftPressed) {
                    e.preventDefault();
                }
                rightPressed = touchX > paddleX + paddleWidth / 2;
                leftPressed = touchX <= paddleX + paddleWidth / 2;
            }
        }
        
        function handleTouchMove(e) {
            var touchX = e.touches[0].clientX;
            if (touchX > paddleX && touchX < paddleX + paddleWidth) {
                rightPressed = touchX > paddleX + paddleWidth / 2;
                leftPressed = touchX <= paddleX + paddleWidth / 2;
            } else {
                rightPressed = false;
                leftPressed = false;
            }
        }
        
        // Handle keyboard controls
        function handleKeyDown(e) {
            if (e.keyCode === 39) {
                rightPressed = true;
            } else if (e.keyCode === 37) {
                leftPressed = true;
            }
        }
        
        function handleKeyUp(e) {
            if (e.keyCode === 39) {
                rightPressed = false;
            } else if (e.keyCode === 37) {
                leftPressed = false;
            }
        }
        
        // Draw game elements on canvas
        function draw() {
            // Clear the canvas
            canvasContext.clearRect(0, 0, canvas.width, canvas.height);
            
            // Draw bricks
            for (var col = 0; col < brickColumnCount; col++) {
                for (var row = 0; row < brickRowCount; row++) {
                    if (bricks[col][row].status === 1) {
                        var brickX = col * (brickWidth + brickPadding) + brickOffsetLeft;
                        var brickY = row * (brickHeight + brickPadding) + brickOffsetTop;
                        bricks[col][row].x = brickX;
                        bricks[col][row].y = brickY;
                        
                        canvasContext.beginPath();
                        canvasContext.rect(brickX, brickY, brickWidth, brickHeight);
                        canvasContext.fillStyle = "#0095DD";
                        canvasContext.fill();
                        canvasContext.closePath();
                    }
                }
            }
            
            // Draw paddle
            canvasContext.beginPath();
            canvasContext.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
            canvasContext.fillStyle = "#0095DD";
            canvasContext.fill();
            canvasContext.closePath();
            
            // Draw ball
            canvasContext.beginPath();
            canvasContext.arc(ballX, ballY, 10, 0, Math.PI * 2);
            canvasContext.fillStyle = "#0095DD";
            canvasContext.fill();
            canvasContext.closePath();
            
            // Draw score
            canvasContext.font = "16px Arial";
            canvasContext.fillStyle = "#0095DD";
            canvasContext.fillText("Score: " + score, 8, 20);
            
            // Draw lives
            canvasContext.font = "16px Arial";
            canvasContext.fillStyle = "#0095DD";
            canvasContext.fillText("Lives: " + lives, canvas.width - 70, 20);
        }
        
        // Game over logic
        function gameOver() {
            alert("Game Over!");
            document.location.reload();
        }
        
        // Win logic
        function gameWin() {
            alert("Congratulations, you won!");
            document.location.reload();
        }
    </script>
</body>
</html>
```

Please note that this is a simplified version of the Block Breaker game, and you can enhance it further with additional features and improvements.