AI game creator

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

No:15763

←

Prev Next

→

Maze ball
Developer User6866｜Date and time 23/9/11 10:44:45
Build time 11.313 sec｜Game capacity 2.804KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<HTML>
<body style="margin: 0; padding: 0; overflow: hidden;">
    <canvas id="gameCanvas" width="400" height="600"></canvas>
    <script>
        // Maze Ball Game
        // Define game variables
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const ballRadius = 10;
        let x = canvas.width / 2;
        let y = canvas.height - 30;
        let dx = 2;
        let dy = -2;
        let rightPressed = false;
        let leftPressed = false;
        let upPressed = false;
        let downPressed = false;

// Keyboard event listeners
        document.addEventListener('keydown', keyDownHandler);
        document.addEventListener('keyup', keyUpHandler);

// Handle key down events
        function keyDownHandler(e) {
            if (e.key === 'Right' || e.key === 'ArrowRight') {
                rightPressed = true;
            } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
                leftPressed = true;
            } else if (e.key === 'Up' || e.key === 'ArrowUp') {
                upPressed = true;
            } else if (e.key === 'Down' || e.key === 'ArrowDown') {
                downPressed = true;
            }
        }

// Handle key up events
        function keyUpHandler(e) {
            if (e.key === 'Right' || e.key === 'ArrowRight') {
                rightPressed = false;
            } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
                leftPressed = false;
            } else if (e.key === 'Up' || e.key === 'ArrowUp') {
                upPressed = false;
            } else if (e.key === 'Down' || e.key === 'ArrowDown') {
                downPressed = false;
            }
        }

// Draw the ball on the canvas
        function drawBall() {
            ctx.beginPath();
            ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
            ctx.fillStyle = '#0095DD';
            ctx.fill();
            ctx.closePath();
        }

// Update ball position and check for collision
        function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawBall();

// Handle ball movement based on keyboard input
            if (rightPressed && x < canvas.width - ballRadius) {
                x += dx;
            } else if (leftPressed && x > ballRadius) {
                x -= dx;
            } else if (upPressed && y > ballRadius) {
                y -= dy;
            } else if (downPressed && y < canvas.height - ballRadius) {
                y += dy;
            }
        }

// Game loop
        function gameLoop() {
            update();
            requestAnimationFrame(gameLoop);
        }

// Start the game
        gameLoop();

</script>
</body>
</HTML>