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

No:8107

2410

←

Prev Next

→

Yakult Lady
Developer User4134｜Date and time 23/7/13 0:24:21
Build time 16.974 sec｜Game capacity 2.624KB｜

Script

了解しました。では、スマホ操作前提のゲームを作成しましょう。絵文字を使用し、JavaScriptを含むHTMLファイルとして実装します。

ヤクルトレディゲーム

スコア: 0

残り時間: 30秒

以上がHTMLファイルとして実装された「ヤクルトレディゲーム」です。ゲームを開始すると、画面上にランダムに配置されたヤクルトレディの絵文字（🥛）が表示されます。それをクリックするとスコアが加算され、新しい位置にヤクルトレディが再配置されます。30秒経過するとゲームが終了し、最終スコアがアラートで表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

了解しました。では、スマホ操作前提のゲームを作成しましょう。絵文字を使用し、JavaScriptを含むHTMLファイルとして実装します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>ヤクルトレディ ゲーム</title>
</head>
<body>
    <h1>ヤクルトレディ ゲーム</h1>
    <p id="score">スコア: 0</p>
    <p id="time">残り時間: 30秒</p>
    <button onclick="startGame()">ゲーム開始</button>
    <div id="gameArea"></div>

function startGame() {
            score = 0;
            time = 30;
            updateScore();
            updateTime();
            createYakultLady();
            intervalId = setInterval(updateTime, 1000);
        }

function updateScore() {
            document.getElementById("score").textContent = "スコア: " + score;
        }

function updateTime() {
            document.getElementById("time").textContent = "残り時間: " + time + "秒";
            if (time === 0) {
                endGame();
            }
            time--;
        }

function createYakultLady() {
            var gameArea = document.getElementById("gameArea");
            gameArea.innerHTML = "";

var yakultLady = document.createElement("span");
            yakultLady.textContent = "🥛";
            yakultLady.style.fontSize = "40px";
            yakultLady.style.position = "absolute";
            yakultLady.style.left = getRandomPosition(gameArea.offsetWidth - 40) + "px";
            yakultLady.style.top = getRandomPosition(gameArea.offsetHeight - 40) + "px";
            yakultLady.onclick = function() {
                score++;
                updateScore();
                createYakultLady();
            };

gameArea.appendChild(yakultLady);
        }

function getRandomPosition(max) {
            return Math.floor(Math.random() * max);
        }

function endGame() {
            clearInterval(intervalId);
            alert("ゲーム終了\nスコア: " + score);
        }
    </script>
</body>
</html>
```

以上がHTMLファイルとして実装された「ヤクルトレディ ゲーム」です。ゲームを開始すると、画面上にランダムに配置されたヤクルトレディの絵文字（🥛）が表示されます。それをクリックするとスコアが加算され、新しい位置にヤクルトレディが再配置されます。30秒経過するとゲームが終了し、最終スコアがアラートで表示されます。

ヤクルトレディ ゲーム

ヤクルトレディゲーム