AI game creator

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

No:17618

←

Prev Next

→

Ball catcher
Developer User7748｜Date and time 23/9/24 4:12:24
Build time 38.489 sec｜Game capacity 4.787KB｜

Script

Sure, here's an example of a simple ball catcher game implemented as a single HTML file using JavaScript and pictograms:

This code sets up a canvas element and handles touch events for smartphones and keyboard events for desktops. The user controls a paddle at the bottom of the screen to catch the bouncing ball. The game loop updates the positions of the ball and paddle, performs collision detection, and redraws the canvas on each frame.

←

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 ball catcher game implemented as a single HTML file using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ball Catcher</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

// Set the canvas size to fit the screen
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

// Ball properties
        const ballRadius = 25;
        let ballX = canvas.width / 2;
        let ballY = canvas.height - ballRadius - 50;
        let ballSpeedX = 8;

// Paddle properties
        const paddleWidth = 100;
        const paddleHeight = 20;
        let paddleX = (canvas.width - paddleWidth) / 2;

let leftPressed = false;
        let rightPressed = false;

// Handle touch events on smartphones
        canvas.addEventListener("touchstart", touchStartHandler);
        canvas.addEventListener("touchend", touchEndHandler);
        canvas.addEventListener("touchmove", touchMoveHandler);

function touchEndHandler(e) {
            e.preventDefault();
            leftPressed = false;
            rightPressed = false;
        }

// Handle keyboard events on desktop
        document.addEventListener("keydown", keyDownHandler);
        document.addEventListener("keyup", keyUpHandler);

function keyDownHandler(e) {
            if (e.key === "ArrowLeft") {
                leftPressed = true;
            } else if (e.key === "ArrowRight") {
                rightPressed = true;
            }
        }

function keyUpHandler(e) {
            if (e.key === "ArrowLeft") {
                leftPressed = false;
            } else if (e.key === "ArrowRight") {
                rightPressed = false;
            }
        }

// Update the game state
        function update() {
            // Move the paddle horizontally
            if (leftPressed && paddleX > 0) {
                paddleX -= 7;
            } else if (rightPressed && paddleX + paddleWidth < canvas.width) {
                paddleX += 7;
            }

// Move the ball
            ballX += ballSpeedX;

// Perform ball-paddle collision detection
            if (
                ballX + ballRadius > paddleX &&
                ballX - ballRadius < paddleX + paddleWidth &&
                ballY + ballRadius > canvas.height - (paddleHeight + ballRadius) &&
                ballY - ballRadius < canvas.height
            ) {
                ballSpeedX = -ballSpeedX;
            }

// Perform ball-wall collision detection
            if (ballX + ballRadius > canvas.width || ballX - ballRadius < 0) {
                ballSpeedX = -ballSpeedX;
            }

// Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the paddle
            ctx.beginPath();
            ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
            ctx.fillStyle = "#000";
            ctx.fill();
            ctx.closePath();

// Draw the ball
            ctx.beginPath();
            ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
            ctx.fillStyle = "#f00";
            ctx.fill();
            ctx.closePath();

// Request the next frame
            requestAnimationFrame(update);
        }

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