ビッグベン　丸い　アナログ時計　黒い長針　黒い短針　親子時計　ウェストミンスターチャイム　数取り's game | AI game creator

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

No:20749

47

ビッグベン　丸い　アナログ時計　黒い長針　黒い短針　親子時計　ウェストミンスターチャイム　数取り
Developer User3589｜Date and time 23/10/10 22:29:17
Build time 37.128 sec｜Game capacity 3.421KB｜

了解しました。以下にビッグベンのアナログ時計と数取りゲームを組み合わせたHTMLファイルのプログラムを示します。

このプログラムでは、HTMLの`#clock`要素を使ってビッグベンのアナログ時計を描画しています。`#hour-hand`要素と`#minute-hand`要素には、それぞれ長針と短針の要素を表示しています。`updateClock`関数では、現在の時刻に応じて長針と短針の角度を計算して更新しています。また、ゲームのルールは、1から100までのランダムな数字を生成し、プレーヤーにその数字を当ててもらうというものです。`prompt`関数を使ってプレーヤーに数字の入力を受け付け、入力した数字と正解の数字を比較して結果を表示しています。最後に、`setInterval`関数を使ってアナログ時計の針を1秒ごとに更新する処理を行っています。このHTMLファイルをブラウザで開くと、ビッグベンのアナログ時計が表示され、数取りゲームが実行されます。また、スマートフォンでも操作が可能です。

→ 　

0　

0　

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

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

(C)2023 HisashiApp

了解しました。以下にビッグベンのアナログ時計と数取りゲームを組み合わせたHTMLファイルのプログラムを示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ビッグベン数取りゲーム</title>
    <style>
        #clock {
            position: relative;
            width: 400px;
            height: 400px;
            border: 10px solid black;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
        }
        #hour-hand, #minute-hand {
            position: absolute;
            width: 4px;
            height: 140px;
            background-color: black;
            transform-origin: bottom center;
            transition: all 0.3s ease-in-out;
        }
        #hour-hand {
            transform: rotate(270deg);
        }
        #minute-hand {
            transform: rotate(180deg);
        }
    </style>
</head>
<body>
    <div id="clock">
        <div id="hour-hand"></div>
        <div id="minute-hand"></div>
    </div>
    <script>
        // アナログ時計の長針と短針の角度を取得する関数
        function updateClock() {
            const date = new Date();
            const hour = date.getHours() % 12;
            const minute = date.getMinutes();
            const hourHand = document.getElementById('hour-hand');
            const minuteHand = document.getElementById('minute-hand');
            const hourAngle = (hour * 30) + (minute * 0.5) + 270;
            const minuteAngle = (minute * 6) + 180;
            hourHand.style.transform = `rotate(${hourAngle}deg)`;
            minuteHand.style.transform = `rotate(${minuteAngle}deg)`;
        }

// 数取りゲームの処理
        const targetNumber = Math.floor(Math.random() * 100) + 1;
        const guessInput = prompt('1から100までの数字を入力してください:');
        const guess = parseInt(guessInput, 10);
        if (guess === targetNumber) {
            alert('正解です！おめでとうございます！');
        } else {
            alert(`残念！正解は ${targetNumber} でした！`);
        }

// 定期的にアナログ時計の針を更新する関数を呼び出す
        setInterval(updateClock, 1000);
    </script>
</body>
</html>
```

このプログラムでは、HTMLの`#clock`要素を使ってビッグベンのアナログ時計を描画しています。`#hour-hand`要素と`#minute-hand`要素には、それぞれ長針と短針の要素を表示しています。`updateClock`関数では、現在の時刻に応じて長針と短針の角度を計算して更新しています。

また、ゲームのルールは、1から100までのランダムな数字を生成し、プレーヤーにその数字を当ててもらうというものです。`prompt`関数を使ってプレーヤーに数字の入力を受け付け、入力した数字と正解の数字を比較して結果を表示しています。

最後に、`setInterval`関数を使ってアナログ時計の針を1秒ごとに更新する処理を行っています。

このHTMLファイルをブラウザで開くと、ビッグベンのアナログ時計が表示され、数取りゲームが実行されます。また、スマートフォンでも操作が可能です。