AI game creator

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

No:20464

←

Prev Next

→

ビリヤード
Developer User3589｜Date and time 23/10/9 22:38:54
Build time 25.061 sec｜Game capacity 3.836KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ビリヤードゲーム</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// 絵文字を表示するための関数
        function drawEmoji(context, emoji, x, y, size) {
            context.font = `${size}px Arial`;
            context.fillText(emoji, x, y);
        }

// ゲームの初期化
        function initGame() {
            const canvas = document.getElementById("gameCanvas");
            const context = canvas.getContext("2d");

// 絵文字を表示できるようにする
            context.fillStyle = "black";
            drawEmoji(context, "🎱", 100, 200, 30);

// ボールを生成
            for (let i = 0; i < 9; i++) {
                const ball = {
                    x: Math.random() * 370 + 15,
                    y: Math.random() * 370 + 15,
                    color: "red",
                    emoji: "🔴"
                };
                billiardsGame.balls.push(ball);
            }
        }

// ゲームの描画
        function drawGame() {
            const canvas = document.getElementById("gameCanvas");
            const context = canvas.getContext("2d");
            context.clearRect(0, 0, canvas.width, canvas.height);

// キュースティックを描画
            context.fillStyle = "brown";
            context.fillRect(billiardsGame.cueStick.x - 10, billiardsGame.cueStick.y - 2, 90, 4);

// ボールを描画
            billiardsGame.balls.forEach(function(ball) {
                context.fillStyle = ball.color;
                drawEmoji(context, ball.emoji, ball.x - 10, ball.y + 10, 20);
            });
        }

// キュースティックの動きの制御
        function controlCueStick(event) {
            const canvas = document.getElementById("gameCanvas");
            const rect = canvas.getBoundingClientRect();
            const mouseX = event.clientX - rect.left;
            const mouseY = event.clientY - rect.top;

billiardsGame.cueStick.angle = Math.atan2(mouseY - billiardsGame.cueStick.y, mouseX - billiardsGame.cueStick.x);
            billiardsGame.cueStick.power = Math.min(Math.sqrt((mouseX - billiardsGame.cueStick.x) ** 2 + (mouseY - billiardsGame.cueStick.y) ** 2) / 10, 5);
        }

// ゲームの更新
        function updateGame() {
            billiardsGame.cueStick.x = Math.max(Math.min(billiardsGame.cueStick.x + Math.cos(billiardsGame.cueStick.angle) * billiardsGame.cueStick.power, 390), 10);
            billiardsGame.cueStick.y = Math.max(Math.min(billiardsGame.cueStick.y + Math.sin(billiardsGame.cueStick.angle) * billiardsGame.cueStick.power, 390), 10);

billiardsGame.balls.forEach(function(ball) {
                ball.x = Math.max(Math.min(ball.x + Math.cos(billiardsGame.cueStick.angle), 390), 10);
                ball.y = Math.max(Math.min(ball.y + Math.sin(billiardsGame.cueStick.angle), 390), 10);
            });
        }

// ゲームループ
        function gameLoop() {
            updateGame();
            drawGame();
            requestAnimationFrame(gameLoop);
        }

// イベントリスナーの設定
        document.addEventListener("mousemove", controlCueStick);

// ゲームの初期化とループの開始
        initGame();
        gameLoop();
    </script>
</body>
</html>