動く的を100回タップする時間を競うゲーム's game

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

No:24542

←

Prev Next

→

動く的を100回タップする時間を競うゲーム
Developer バファリンヌ｜Date and time 23/11/9 21:37:29
Build time 64.839 sec｜Game capacity 2.537KB｜

Script

了解しました。以下に、要件に応じたHTMLファイルを実装する例を記述します。

的をタップしてください

タップした回数: 0

このHTMLファイルには、的をタップするゲームが実装されています。スタートボタンをクリックすると、1つずつ的が表示されていきます。的をタップすると得点が加算され、スコアが表示されます。100回的をタップするとゲーム終了し、結果が表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

了解しました。以下に、要件に応じたHTMLファイルを実装する例を記述します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>的をタップゲーム</title>
    <style>
        body {
            background-color: lightgray;
        }
        #game-area {
            text-align: center;
            padding-top: 100px;
        }
        .target {
            display: inline-block;
            font-size: 100px;
        }
    </style>
</head>
<body>
    <div id="game-area">
        <p>的をタップしてください</p>
        <p>タップした回数: <span id="score">0</span></p>
        <button id="start">START</button>
    </div>

document.getElementById("start").addEventListener("click", function() {
            startGame();
        });

function startGame() {
            score = 0;
            timer = setInterval(createTarget, 1000);
        }

function createTarget() {
            var target = document.createElement("span");
            target.classList.add("target");
            target.textContent = "🎯";
            target.style.top = Math.random() * (window.innerHeight - 150) + "px";
            target.style.left = Math.random() * (window.innerWidth - 150) + "px";
            target.addEventListener("click", function() {
                document.getElementById("score").textContent = ++score;
                this.style.display = "none";
            });
            document.body.appendChild(target);
            targets.push(target);

if (targets.length >= 100) {
                clearInterval(timer);
                endGame();
            }
        }

function endGame() {
            targets.forEach(function(target) {
                target.removeEventListener("click", function() {});
            });

var gameOver = document.createElement("h2");
            gameOver.textContent = "Game Over";
            gameOver.style.color = "red";
            document.getElementById("game-area").appendChild(gameOver);
        }
    </script>
</body>
</html>
```