AI game creator

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

No:31932

←

Prev Next

→

Billiards
Developer User15281｜Date and time 23/12/29 0:22:10
Build time 22.115 sec｜Game capacity 3.292KB｜

Script

This is a simple billiards game implemented as a single HTML file. The game is designed to be played on a smartphone. The player controls a red ball using touch input to hit other balls on the screen. The goal is to prevent the red ball from hitting the bottom wall of the canvas. The game starts automatically when the webpage is loaded. The red ball moves around the canvas, bouncing off the walls. If the red ball hits the bottom wall, the game is over and an alert is shown. The player can control the red ball using touch input. By dragging their finger across the screen, they can move the red ball horizontally.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Billiards Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="billiardsCanvas" width="400" height="400"></canvas>

var ballRadius = 15; // Ball radius
            var x = canvas.width / 2; // Initial ball x position
            var y = canvas.height - ballRadius - 5; // Initial ball y position
            var dx = 2; // Change in ball x position per frame
            var dy = -2; // Change in ball y position per frame

// Draw the ball
            function drawBall() {
                context.beginPath();
                context.arc(x, y, ballRadius, 0, Math.PI * 2);
                context.fillStyle = "#FF0000";
                context.fill();
                context.closePath();
            }

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

drawBall();

// Reverse ball direction if it hits the walls
                if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
                    dx = -dx;
                }
                if (y + dy < ballRadius) {
                    dy = -dy;
                }
                // Game over if ball hits the bottom wall
                else if (y + dy > canvas.height - ballRadius) {
                    alert("Game Over!");
                    document.location.reload();
                }

x += dx;
                y += dy;
            }

// Handle touch events to control the stick
            function touchMove(event) {
                var rect = canvas.getBoundingClientRect();
                var touchX = event.touches[0].clientX - rect.left;
                var touchY = event.touches[0].clientY - rect.top;

// Move the stick based on touch position
                if (touchY < canvas.height - 30) {
                    x = touchX;
                    if (x < ballRadius) {
                        x = ballRadius;
                    }
                    if (x > canvas.width - ballRadius) {
                        x = canvas.width - ballRadius;
                    }
                }
            }

canvas.addEventListener("touchmove", touchMove, false);

setInterval(update, 10); // Start the game
        };
    </script>
</body>
</html>
```

The game starts automatically when the webpage is loaded. The red ball moves around the canvas, bouncing off the walls. If the red ball hits the bottom wall, the game is over and an alert is shown. The player can control the red ball using touch input. By dragging their finger across the screen, they can move the red ball horizontally.