AI game creator

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

No:23992

←

Prev Next

→

Pixel smash
Developer User11236｜Date and time 23/11/5 2:12:49
Build time 145.893 sec｜Game capacity 5.891KB｜

Script

Sure, here's an example of a simple game called "Pixel Smash" implemented as a single HTML file:

To play the game, simply open the HTML file in a web browser (preferably on a smartphone to get a better experience). The game involves moving the paddle using mouse movement to bounce the ball and smash the pixels (represented by bricks). The objective is to clear all the pixels by hitting them with the ball using the paddle. The score is displayed at the top left corner of the canvas. If the ball falls below the paddle, the game is over. If all the pixels are cleared, a "Congratulations" message is shown.

←

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 called "Pixel Smash" implemented as a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pixel Smash</title>
    <style>
        canvas {
            border: 1px solid black;
            margin: 0 auto;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Game variables
        var canvas, ctx;
        var ballX, ballY, dx, dy;
        var paddleX, paddleWidth;
        var brickRowCount, brickColumnCount, brickWidth, brickHeight, brickPadding, brickOffsetTop;
        var bricks;
        var score;

// Initialize the game
        function init() {
            canvas = document.getElementById("gameCanvas");
            ctx = canvas.getContext("2d");

ballX = canvas.width / 2;
            ballY = canvas.height - 30;
            dx = 2;
            dy = -2;

paddleWidth = 75;
            paddleX = (canvas.width - paddleWidth) / 2;

brickRowCount = 3;
            brickColumnCount = 5;
            brickWidth = 75;
            brickHeight = 20;
            brickPadding = 10;
            brickOffsetTop = 30;

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 };
                }
            }

score = 0;

document.addEventListener("mousemove", mouseMoveHandler, false);

setInterval(draw, 10);
        }

// Handle mouse movement for paddle control
        function mouseMoveHandler(e) {
            var relativeX = e.clientX - canvas.offsetLeft;
            if (relativeX > 0 && relativeX < canvas.width) {
                paddleX = relativeX - paddleWidth / 2;
            }
        }

// 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;
                            score++;
                            if (score == brickRowCount * brickColumnCount) {
                                alert("Congratulations! You smashed all the pixels!");
                                document.location.reload();
                            }
                        }
                    }
                }
            }
        }

// Draw the game objects
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

drawBall();
            drawPaddle();
            drawBricks();
            drawScore();

collisionDetection();

if (ballX + dx > canvas.width - 10 || ballX + dx < 10) {
                dx = -dx;
            }
            if (ballY + dy < 10) {
                dy = -dy;
            } else if (ballY + dy > canvas.height - 10) {
                if (ballX > paddleX && ballX < paddleX + paddleWidth) {
                    dy = -dy;
                } else {
                    alert("Game Over! You missed the ball.");
                    document.location.reload();
                }
            }

ballX += dx;
            ballY += dy;
        }

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

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

// Draw the 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)) + brickPadding;
                        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();
                    }
                }
            }
        }

// Draw the score
        function drawScore() {
            ctx.font = "16px Arial";
            ctx.fillStyle = "#0095DD";
            ctx.fillText("Score: " + score, 8, 20);
        }

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