AI game creator

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

No:24025

←

Prev Next

→

Billiards
Developer User11257｜Date and time 23/11/5 8:42:42
Build time 121.643 sec｜Game capacity 6.923KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>

<head>
    <title>Billiards Game</title>
</head>

// Variables
        var canvas;
        var canvasContext;
        var cueBall;
        var targetBall;
        var isDragging;
        var dragStartX;
        var dragStartY;
        var cuePower;

// Initialization
        function initialize() {
            canvas = document.getElementById("gameCanvas");
            canvasContext = canvas.getContext("2d");
            isDragging = false;
            cuePower = 0;

// Create the cue ball
            cueBall = {
                x: 50,
                y: 160,
                radius: 10,
                color: "#FFFFFF",
                velocityX: 0,
                velocityY: 0,
                draw: function() {
                    canvasContext.fillStyle = this.color;
                    canvasContext.beginPath();
                    canvasContext.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
                    canvasContext.fill();
                }
            };

// Create the target ball
            targetBall = {
                x: 400,
                y: 160,
                radius: 20,
                color: "#FF0000",
                velocityX: 0,
                velocityY: 0,
                draw: function() {
                    canvasContext.fillStyle = this.color;
                    canvasContext.beginPath();
                    canvasContext.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
                    canvasContext.fill();
                }
            };

// Add event listeners for touch/mouse input
            canvas.addEventListener("mousedown", handleMouseDown);
            canvas.addEventListener("touchstart", handleTouchStart);
            canvas.addEventListener("mousemove", handleMouseMove);
            canvas.addEventListener("touchmove", handleTouchMove);
            canvas.addEventListener("mouseup", handleMouseUp);
            canvas.addEventListener("touchend", handleTouchEnd);
        }

// Update game state
        function update() {
            if (isDragging) {
                // Calculate cue power based on the distance the cue is dragged
                var diffX = cueBall.x - dragStartX;
                var diffY = cueBall.y - dragStartY;
                cuePower = Math.sqrt(diffX * diffX + diffY * diffY) / 10;
            } else {
                // Apply friction to slow down balls' velocities
                cueBall.velocityX *= 0.99;
                cueBall.velocityY *= 0.99;
                targetBall.velocityX *= 0.99;
                targetBall.velocityY *= 0.99;

// Check for ball collisions
                if (checkBallCollision(cueBall, targetBall)) {
                    // Reverse velocities after collision
                    var tempVelX = cueBall.velocityX;
                    var tempVelY = cueBall.velocityY;
                    cueBall.velocityX = targetBall.velocityX;
                    cueBall.velocityY = targetBall.velocityY;
                    targetBall.velocityX = tempVelX;
                    targetBall.velocityY = tempVelY;
                }

// Update ball positions
                cueBall.x += cueBall.velocityX;
                cueBall.y += cueBall.velocityY;
                targetBall.x += targetBall.velocityX;
                targetBall.y += targetBall.velocityY;

// Check for target ball reaching the pocket
                if (targetBall.x - targetBall.radius < 0) {
                    resetGame();
                }
            }
        }

// Render game state
        function render() {
            // Clear the canvas
            canvasContext.fillStyle = "#000000";
            canvasContext.fillRect(0, 0, canvas.width, canvas.height);

// Draw balls
            cueBall.draw();
            targetBall.draw();

if (isDragging) {
                // Draw cue line while dragging
                canvasContext.strokeStyle = "#FFFFFF";
                canvasContext.beginPath();
                canvasContext.moveTo(cueBall.x, cueBall.y);
                canvasContext.lineTo(dragStartX, dragStartY);
                canvasContext.stroke();
            }

// Draw power bar
            canvasContext.fillStyle = "#FFFFFF";
            canvasContext.fillRect(10, 10, cuePower, 20);
        }

// Reset game state
        function resetGame() {
            cueBall.x = 50;
            cueBall.y = 160;
            cueBall.velocityX = 0;
            cueBall.velocityY = 0;

targetBall.x = 400;
            targetBall.y = 160;
            targetBall.velocityX = 0;
            targetBall.velocityY = 0;
        }

// Check if two balls collide
        function checkBallCollision(ball1, ball2) {
            var dx = ball1.x - ball2.x;
            var dy = ball1.y - ball2.y;
            var distance = Math.sqrt(dx * dx + dy * dy);

if (distance < ball1.radius + ball2.radius) {
                return true;
            } else {
                return false;
            }
        }

// Event handlers for touch/mouse input
        function handleMouseDown(event) {
            isDragging = true;
            dragStartX = event.clientX;
            dragStartY = event.clientY;
        }

function handleTouchStart(event) {
            isDragging = true;
            dragStartX = event.touches[0].clientX;
            dragStartY = event.touches[0].clientY;
        }

function handleMouseMove(event) {
            if (isDragging) {
                cueBall.x = event.clientX;
                cueBall.y = event.clientY;
            }
        }

function handleTouchMove(event) {
            event.preventDefault();
            if (isDragging) {
                cueBall.x = event.touches[0].clientX;
                cueBall.y = event.touches[0].clientY;
            }
        }

function handleMouseUp(event) {
            if (isDragging) {
                cueBall.velocityX = (dragStartX - event.clientX) / 30;
                cueBall.velocityY = (dragStartY - event.clientY) / 30;
                isDragging = false;
            }
        }

function handleTouchEnd(event) {
            if (isDragging) {
                cueBall.velocityX = (dragStartX - event.changedTouches[0].clientX) / 30;
                cueBall.velocityY = (dragStartY - event.changedTouches[0].clientY) / 30;
                isDragging = false;
            }
        }

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

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

</html>