A game where you have to break blocks bulid tools upgrade your tools whith different materials fight monsters and beat the final boss of the game game updates at 500 visits's game

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

No:15618

←

Prev Next

→

A game where you have to break blocks bulid tools ..ALL
Developer User6337｜Date and time 23/9/10 6:28:49
Build time 36.176 sec｜Game capacity 6.722KB｜

Script

Sure! Here's an example of a simple game that meets your requirements:

Please note that this is a simplified version of a block breaker game and does not include the upgrade system or monster fighting elements you mentioned. It's a starting point that you can build upon to add those features.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

Sure! Here's an example of a simple game that meets your requirements:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Block Breaker Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    
    <script>
        // Initial game variables
        var canvas = document.getElementById("gameCanvas");
        var ctx = canvas.getContext("2d");

var blockWidth = 50;
        var blockHeight = 20;
        var blockColor = "#0095DD";
        var blockRows = 5;
        var blockColumns = 8;

var paddleWidth = 75;
        var paddleHeight = 10;
        var paddleColor = "#0095DD";

var ballRadius = 10;
        var ballColor = "#0095DD";
        var ballSpeedX = 2;
        var ballSpeedY = -2;

var score = 0;
        var level = 1;

// Create blocks
        var blocks = [];
        for (var c = 0; c < blockColumns; c++) {
            blocks[c] = [];
            for (var r = 0; r < blockRows; r++) {
                blocks[c][r] = { x: 0, y: 0, status: 1 };
            }
        }

// Create paddle
        var paddleX = (canvas.width - paddleWidth) / 2;

// Create ball
        var ballX = canvas.width / 2;
        var ballY = canvas.height - 30;

// Game controls
        var rightPressed = false;
        var leftPressed = false;

// Event listeners for keyboard controls
        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;
            }
        }

// Collision detection between ball and blocks
        function collisionDetection() {
            for (var c = 0; c < blockColumns; c++) {
                for (var r = 0; r < blockRows; r++) {
                    var b = blocks[c][r];
                    if (b.status == 1) {
                        if (ballX > b.x && ballX < b.x + blockWidth && ballY > b.y && ballY < b.y + blockHeight) {
                            ballSpeedY = -ballSpeedY;
                            b.status = 0;
                            score++;
                            if (score == blockRows * blockColumns) {
                                if (level < 3) {
                                    level++;
                                    resetGame();
                                } else {
                                    alert("Congratulations! You beat the final boss!");
                                    document.location.reload();
                                }
                            }
                        }
                    }
                }
            }
        }

// Update game state
        function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBlocks();
            drawPaddle();
            drawBall();
            collisionDetection();

// Reverse ball direction if hit paddle or wall
            if (ballX + ballSpeedX > canvas.width - ballRadius || ballX + ballSpeedX < ballRadius) {
                ballSpeedX = -ballSpeedX;
            }
            if (ballY + ballSpeedY < ballRadius) {
                ballSpeedY = -ballSpeedY;
            }

// Check if game is over
            if (ballY + ballSpeedY > canvas.height - ballRadius) {
                if (ballX > paddleX && ballX < paddleX + paddleWidth) {
                    ballSpeedY = -ballSpeedY;
                } else {
                    alert("Game Over");
                    document.location.reload();
                }
            }

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

// Move ball
            ballX += ballSpeedX;
            ballY += ballSpeedY;

requestAnimationFrame(update);
        }

// Draw blocks
        function drawBlocks() {
            for (var c = 0; c < blockColumns; c++) {
                for (var r = 0; r < blockRows; r++) {
                    if (blocks[c][r].status == 1) {
                        var blockX = (c * (blockWidth + 10)) + 30;
                        var blockY = (r * (blockHeight + 10)) + 30;
                        blocks[c][r].x = blockX;
                        blocks[c][r].y = blockY;
                        ctx.beginPath();
                        ctx.rect(blockX, blockY, blockWidth, blockHeight);
                        ctx.fillStyle = blockColor;
                        ctx.fill();
                        ctx.closePath();
                    }
                }
            }
        }

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

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

// Reset game state
        function resetGame() {
            ballX = canvas.width / 2;
            ballY = canvas.height - 30;
            paddleX = (canvas.width - paddleWidth) / 2;
            ballSpeedX = 2 + level;
            ballSpeedY = -(2 + level);
            blocks = [];
            for (var c = 0; c < blockColumns; c++) {
                blocks[c] = [];
                for (var r = 0; r < blockRows; r++) {
                    blocks[c][r] = { x: 0, y: 0, status: 1 };
                }
            }
        }

// Start game
        update();
    </script>
</body>
</html>
```