Guess whats crossing my phone screen, the game.'s game

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

No:7651

109

←

Prev Next

→

Guess whats crossing my phone screen, the game.
Developer o2pi4｜Date and time 23/7/9 7:44:36
Build time 9.838 sec｜Game capacity 2.61KB｜

Script

以下に、スマホ画面に横切るものを当てるゲームの例を示します。このゲームでは、文字が横切る速さや文字の種類をランダムに生成し、その文字をタップして当てることが目的です。必ず1枚のHTMLファイルで実装されており、JavaScriptもscriptタグで囲まれています。

このゲームでは、スマホ画面上にフルスクリーンのゲーム領域が表示されます。一定間隔で横切る文字が生成され、タップすることで正解となりスコアが加算されます。既定の設定では、5秒ごとに文字が横切ります。文字は絵文字で表現され、正解時にはアラートでスコアが表示されます。

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>横切る文字ゲーム</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

#game-area {
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

#target-char {
            font-size: 48px;
            animation: move 5s linear infinite;
        }

@keyframes move {
            0% { margin-left: 100%; }
            100% { margin-left: -10%; }
        }
    </style>
</head>
<body>
    <div id="game-area">
        <p id="target-char"></p>
    </div>
    <script>
        var score = 0;
        var timer;
        var chars = ["🍎", "🍌", "🍇", "🍓", "🍒", "🍊", "🍉", "🥥", "🍍", "🍋"];

function startGame() {
            timer = setInterval(generateChar, 1000);
            document.addEventListener("click", handleClick);
        }

function generateChar() {
            var gameArea = document.getElementById("game-area");
            var targetChar = document.getElementById("target-char");
            targetChar.innerText = chars[Math.floor(Math.random() * chars.length)];
            targetChar.style.marginLeft = "100%";
            gameArea.appendChild(targetChar);
        }

function handleClick(event) {
            var targetChar = event.target;
            if (targetChar.id === "target-char") {
                clearTimeout(timer);
                var gameArea = document.getElementById("game-area");
                gameArea.removeChild(targetChar);
                score++;
                alert("正解！ スコア: " + score);
                startGame();
            }
        }

startGame();
    </script>
</body>
</html>
```