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

No:24798

←

Prev Next

→

Billiards
Developer User11805｜Date and time 23/11/12 7:44:11
Build time 70.016 sec｜Game capacity 2.554KB｜

Script

Billiards Game

←

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>
<body>
    <h1>Billiards Game</h1>
    
    <canvas id="myCanvas" width="480" height="320"></canvas>

var holeRadius = 15;
            var holeX = [75, 225, 375];
            var holeY = [75, 225, 75];
            
            // Initializing the position and velocity of the cue ball
            var cueBallVelX = 2;
            var cueBallVelY = -2;
            
            // Drawing the billiards table
            function drawTable() {
                // Drawing the table background
                ctx.fillStyle = tableColor;
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                // Drawing the holes
                ctx.beginPath();
                for (var i = 0; i < holeX.length; i++) {
                    ctx.arc(holeX[i], holeY[i], holeRadius, 0, Math.PI * 2);
                }
                ctx.fillStyle = holeColor;
                ctx.fill();

// Drawing the cue ball
                ctx.beginPath();
                ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
                ctx.fillStyle = ballColor;
                ctx.fill();
                ctx.closePath();
                
                // Updating the position of the cue ball
                ballX += cueBallVelX;
                ballY += cueBallVelY;
                
                // Handling collisions with the walls
                if (ballX + cueBallVelX > canvas.width - ballRadius || ballX + cueBallVelX < ballRadius) {
                    cueBallVelX = -cueBallVelX;
                }
                
                if (ballY + cueBallVelY > canvas.height - ballRadius || ballY + cueBallVelY < ballRadius) {
                    cueBallVelY = -cueBallVelY;
                }
            }
            
            // Calling the drawTable function every 10 milliseconds to create the animation
            setInterval(drawTable, 10);
        };
    </script>
</body>
</html>