AI game creator

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

No:21114

←

Prev Next

→

Billiards
Developer User9329｜Date and time 23/10/13 10:12:32
Build time 187.104 sec｜Game capacity 5.497KB｜

Script

Sure! Here's a basic implementation of a billiards game using JavaScript, HTML, and pictograms. Please note that this is a simplified version of the game and can be further enhanced with additional features.

To play the game on a smartphone, open the HTML file in any mobile browser that supports JavaScript and touch events. You can move the cue ball by tapping and holding on it, and then release your finger to shoot the ball in the desired direction. The other colored balls will move around the table and collide with each other and the walls.

←

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="canvas" width="600" height="400"></canvas>

// Game settings
        const canvas = document.getElementById("canvas");
        const context = canvas.getContext("2d");
        const ballRadius = 10;
        const tableColor = "#39b54a";
        const cueBallColor = "#ffffff";
        const otherBallColor = "#ff0000";
        const balls = [
            { x: 50, y: 200, dx: 2, dy: -2, color: otherBallColor },
            { x: 100, y: 250, dx: -1, dy: -1, color: otherBallColor },
            { x: 150, y: 200, dx: 2, dy: 2, color: otherBallColor },
            { x: 200, y: 250, dx: -2, dy: 1, color: otherBallColor },
            { x: 250, y: 200, dx: 1, dy: 1, color: otherBallColor },
            { x: 300, y: 250, dx: -1, dy: -2, color: otherBallColor },
            { x: 350, y: 200, dx: 1, dy: 2, color: otherBallColor },
            { x: 400, y: 250, dx: -2, dy: -1, color: otherBallColor },
            { x: 450, y: 200, dx: 2, dy: -1, color: otherBallColor },
            { x: 500, y: 250, dx: -1, dy: 2, color: otherBallColor },
            { x: 550, y: 200, dx: 1, dy: 1, color: otherBallColor },
            { x: 200, y: 150, dx: -2, dy: -2, color: otherBallColor },
            { x: 250, y: 100, dx: 2, dy: -1, color: otherBallColor },
            { x: 300, y: 150, dx: -1, dy: 2, color: otherBallColor },
            { x: 350, y: 100, dx: 1, dy: -2, color: otherBallColor },
            { x: 400, y: 150, dx: -2, dy: 1, color: otherBallColor },
            { x: 450, y: 100, dx: 2, dy: 1, color: otherBallColor },
            { x: 500, y: 150, dx: -1, dy: -2, color: otherBallColor },
            { x: 300, y: 50, dx: -2, dy: -1, color: otherBallColor },
            { x: 350, y: 0, dx: 1, dy: 2, color: otherBallColor },
            { x: 400, y: 50, dx: -1, dy: 1, color: otherBallColor },
            { x: 450, y: 0, dx: 2, dy: 1, color: otherBallColor }
        ];
        let cueBallX = 50; // Initial position of the cue ball
        let cueBallY = 150;
        let cueBallDX = 0; // Velocity of the cue ball
        let cueBallDY = 0;

// Function to draw the table
        function drawTable() {
            context.fillStyle = tableColor;
            context.fillRect(0, 0, canvas.width, canvas.height);
            context.fillStyle = cueBallColor;
            context.beginPath();
            context.arc(cueBallX, cueBallY, ballRadius, 0, Math.PI * 2);
            context.fill();

balls.forEach(ball => {
                context.fillStyle = ball.color;
                context.beginPath();
                context.arc(ball.x, ball.y, ballRadius, 0, Math.PI * 2);
                context.fill();
            });
        }

// Function to update the positions of the balls
        function updateBalls() {
            cueBallX += cueBallDX;
            cueBallY += cueBallDY;

balls.forEach(ball => {
                ball.x += ball.dx;
                ball.y += ball.dy;

// Handle ball collisions with the edges of the canvas
                if (ball.x + ballRadius > canvas.width || ball.x - ballRadius < 0) {
                    ball.dx *= -1;
                }
                if (ball.y + ballRadius > canvas.height || ball.y - ballRadius < 0) {
                    ball.dy *= -1;
                }
            });
        }

// Function to handle mouse/touch events for cue ball movement
        function handleCueBallMovement(event) {
            const rect = canvas.getBoundingClientRect();
            cueBallX = event.clientX - rect.left;
            cueBallY = event.clientY - rect.top;
        }

// Function to handle mouse/touch events for cue ball shooting
        function handleCueBallShoot(event) {
            const rect = canvas.getBoundingClientRect();
            cueBallDX = (event.clientX - rect.left - cueBallX) * 0.05;
            cueBallDY = (event.clientY - rect.top - cueBallY) * 0.05;
        }

// Function to clear the canvas
        function clearCanvas() {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }

// Function to handle game updates and rendering
        function gameLoop() {
            clearCanvas();
            drawTable();
            updateBalls();
            requestAnimationFrame(gameLoop);
        }

// Register mouse/touch event listeners
        canvas.addEventListener("mousedown", handleCueBallMovement);
        canvas.addEventListener("touchstart", handleCueBallMovement);

canvas.addEventListener("mouseup", handleCueBallShoot);
        canvas.addEventListener("touchend", handleCueBallShoot);

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