AI game creator

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

No:3606

7232

←

Prev Next

→

Sushi with eyes
Developer User3589｜Date and time 23/6/25 19:16:30
Build time 23.809 sec｜Game capacity 2.893KB｜

Script

目のついた寿司をタップして消すゲームを作ります。以下が実装例になります。

このゲームでは、1秒ごとにランダムな寿司を画面に表示し、目のついた寿司をタップすると寿司が消え、10点加算されます。5秒経過すると、その寿司は自動的に消えます。スコアは画面右上に表示されます。目のついた寿司をどれだけ素早く見つけられるかを競うゲームになります。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

目のついた寿司をタップして消すゲームを作ります。

以下が実装例になります。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>目のついた寿司ゲーム</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #game-container {
            width: 100%;
            height: 100vh;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            font-size: 5vw;
        }
        .sushi {
            margin: 10px;
            padding: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="game-container"></div>

// 寿司を生成する関数
        function generateSushi() {
            // ランダムな寿司画像を取得
            const randomIndex = Math.floor(Math.random() * sushiImages.length);
            const sushiImg = sushiImages[randomIndex];

// 寿司要素を作成して画面に表示
            const sushiElem = document.createElement('div');
            sushiElem.classList.add('sushi');
            sushiElem.textContent = sushiImg;
            container.appendChild(sushiElem);

// クリックされたら寿司を削除してスコアを加算
            sushiElem.addEventListener('click', () => {
                sushiElem.remove();
                score += 10;
                updateScore();
            });

// 5秒後に寿司を削除
            setTimeout(() => {
                sushiElem.remove();
            }, 5000);
        }

// スコア表示を更新する関数
        function updateScore() {
            const scoreElem = document.getElementById('score');
            scoreElem.textContent = score;
        }

// 1秒ごとに寿司を生成する関数
        setInterval(generateSushi, 1000);

// 初期スコア表示
        const scoreElem = document.createElement('div');
        scoreElem.textContent = 0;
        scoreElem.style.fontSize = '10vw';
        scoreElem.style.position = 'absolute';
        scoreElem.style.top = '20px';
        scoreElem.style.right = '20px';
        scoreElem.id = 'score';
        document.body.appendChild(scoreElem);
    </script>
</body>
</html>
```