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

No:5423

1532

Spoo Drawing Song
Developer User3825｜Date and time 23/6/30 2:17:33
Build time 33.073 sec｜Game capacity 3.737KB｜

了解です。以下にスプーの絵描き歌のゲームを実装しました。このゲームでは、スプーに絵を描く歌の歌詞に従ってタップすることで絵を完成させることが目標です。スマートフォンでプレイすることを前提にしています。

スプーの絵描き歌

上記のHTMLファイルは、スタートボタンをタップすることでゲームを開始し、スプーの絵描き歌の歌詞が表示されます。その後、歌詞に従って絵を完成させるために、表示される文字と同じ文字のボタンをタップします。すべての歌詞を正しく揃えると、絵が表示されます。もう一度遊ぶ場合は、「もう一度遊ぶ」ボタンをタップしてください。スマートフォンでのプレイを想定しているため、タッチイベントを使用しています。また、ゲームの進行状況と絵の完成度を表示するために、HTML要素を動的に生成しています。このゲームでは、絵描き歌の一部をゲーム化していますが、全体のコンセプトを取り入れています。

→ 　

0　

0　

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

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

(C)2023 HisashiApp

了解です。以下にスプーの絵描き歌のゲームを実装しました。このゲームでは、スプーに絵を描く歌の歌詞に従ってタップすることで絵を完成させることが目標です。スマートフォンでプレイすることを前提にしています。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>スプーの絵描き歌</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            font-size: 24px;
            font-weight: bold;
        }

button {
            padding: 10px 20px;
            border-radius: 10px;
            background-color: lightblue;
            font-size: 24px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>スプーの絵描き歌</h1>
    <div>
        <button id="startButton">スタート</button>
    </div>

<script>
        const lyrics = ['', 'ス', 'プ', 'ー', 'は', '元', '気', 'い', 'っ', 'ぱ', 'い', 'で', '、', 'お', '絵', '描', 'き', '歌', 'が', '大', '好', 'き', '♪'];
        let currentLyricIndex = 0;
        let drawing = '';

function startGame() {
            document.getElementById('startButton').style.display = 'none';
            document.addEventListener('touchstart', handleTouchStart);
        }

function handleTouchStart(event) {
            const x = event.touches[0].clientX;
            const y = event.touches[0].clientY;

const element = document.elementFromPoint(x, y);
            if (element.tagName === 'BUTTON') {
                const button = element;
                const buttonText = button.textContent;
                const currentLyric = lyrics[currentLyricIndex];

if (buttonText === currentLyric) {
                    drawing += currentLyric;
                    currentLyricIndex++;

if (currentLyricIndex === lyrics.length) {
                        finishGame();
                    }
                }
            }
        }

function finishGame() {
            document.removeEventListener('touchstart', handleTouchStart);

const drawingText = document.createElement('h2');
            drawingText.textContent = drawing;

document.body.appendChild(drawingText);

const restartButton = document.createElement('button');
            restartButton.textContent = 'もう一度遊ぶ';
            restartButton.addEventListener('click', restartGame);
            document.body.appendChild(restartButton);
        }

function restartGame() {
            document.location.reload();
        }

document.getElementById('startButton').addEventListener('click', startGame);
    </script>
</body>
</html>
```

上記のHTMLファイルは、スタートボタンをタップすることでゲームを開始し、スプーの絵描き歌の歌詞が表示されます。その後、歌詞に従って絵を完成させるために、表示される文字と同じ文字のボタンをタップします。すべての歌詞を正しく揃えると、絵が表示されます。もう一度遊ぶ場合は、「もう一度遊ぶ」ボタンをタップしてください。スマートフォンでのプレイを想定しているため、タッチイベントを使用しています。また、ゲームの進行状況と絵の完成度を表示するために、HTML要素を動的に生成しています。

このゲームでは、絵描き歌の一部をゲーム化していますが、全体のコンセプトを取り入れています。