Billiards's game | AI game creator

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

No:12860

101

Billiards
Developer User5586｜Date and time 23/8/23 23:57:18
Build time 39.787 sec｜Game capacity 3.524KB｜

→ 　

0　

0　

[PR]現在のプレゼントランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
    <title>Billiards Game</title>
    <style>
        canvas {
            border: 1px solid #000;
            background-color: #008000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="billiardsCanvas" width="500" height="400"></canvas>

<script>
        // Obtenemos el elemento canvas y su contexto
        const canvas = document.getElementById("billiardsCanvas");
        const context = canvas.getContext("2d");
        
        // Definimos los colores de los objetos en el juego
        const TABLE_COLOR = "#563B14";
        const BALL_COLOR = "#FFFFFF";
        const CUE_COLOR = "#000000";
        
        // Definimos las posiciones y tamaños de los objetos en el juego
        const tableX = 50;
        const tableY = 50;
        const tableWidth = 400;
        const tableHeight = 300;
        const ballRadius = 10;
        const cueWidth = 4;
        const cueHeight = 80;
        
        // Definimos las variables de estado del juego
        let cueX = canvas.width / 2;
        let cueY = canvas.height - 50;
        let isDraggingCue = false;
        
        // Agregamos un event listener al canvas para detectar los eventos de mouse/touch
        canvas.addEventListener("mousedown", dragStart);
        canvas.addEventListener("mousemove", drag);
        canvas.addEventListener("mouseup", dragEnd);
        canvas.addEventListener("touchstart", dragStart);
        canvas.addEventListener("touchmove", drag);
        canvas.addEventListener("touchend", dragEnd);
        
        // Función que se ejecuta al iniciar el arrastre del palo
        function dragStart(event) {
            const x = event.clientX || event.touches[0].clientX;
            const y = event.clientY || event.touches[0].clientY;
            
            // Comprobamos si el click/touch se realizó dentro del palo
            if (x > cueX - cueWidth/2 && x < cueX + cueWidth/2 && y > cueY && y < cueY + cueHeight) {
                isDraggingCue = true;
            }
        }
        
        // Función que se ejecuta mientras se arrastra el palo
        function drag(event) {
            if (isDraggingCue) {
                const x = event.clientX || event.touches[0].clientX;
                const y = event.clientY || event.touches[0].clientY;
                cueX = x;
                cueY = y;
            }
        }
        
        // Función que se ejecuta al finalizar el arrastre del palo
        function dragEnd() {
            isDraggingCue = false;
        }
        
        // Función para dibujar el juego en el canvas
        function draw() {
            // Limpiar el canvas
            context.clearRect(0, 0, canvas.width, canvas.height);
            
            // Dibujar la mesa de billar
            context.fillStyle = TABLE_COLOR;
            context.fillRect(tableX, tableY, tableWidth, tableHeight);
            
            // Dibujar el palo
            context.fillStyle = CUE_COLOR;
            context.fillRect(cueX - cueWidth/2, cueY, cueWidth, cueHeight);
            
            // Dibujar las bolas
            context.fillStyle = BALL_COLOR;
            context.beginPath();
            context.arc(200, 175, ballRadius, 0, Math.PI * 2);
            context.fill();
            
            // Animar el juego
            requestAnimationFrame(draw);
        }
        
        // Iniciar el juego llamando a la función draw
        draw();
    </script>
</body>
</html>