TUMUPIROタイピング✨

60秒以内にできるだけ多くの単語をタイピングしてください！

キャラクター

残り時間: 60秒

現在の単語:

単語を入力後、Enterキーで確定してください。カタカナの単語はひらがなで入力してもOK！

スコア: 0 単語

結果

WPM（1分あたりの単語数）:

CPM（1分あたりの文字数）:

正確さ: %

あなたのレベル:

参考: 初級（100-150文字/分）、中級（151-200文字/分）、上級（201-250文字/分）、プロ（251文字/分以上）

×

プログラムの仕組み

簡易的なプログラム

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイピングゲーム</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; }
        h1 { font-size: 28px; }
        button { padding: 12px 24px; background-color: #4CAF50; color: white; border: none; cursor: pointer; }
        input { padding: 12px; font-size: 18px; }
    </style>
</head>
<body>
    <h1>タイピングゲーム</h1>
    <button id="startButton">スタート</button>
    <div id="gameArea" style="display: none;">
        <p>残り時間: <span id="timer">60</span>秒</p>
        <p>現在の単語: <span id="word"></span></p>
        <input type="text" id="input">
        <p>スコア: <span id="score">0</p>
    </div>
    <div id="result" style="display: none;">
        <h2>結果</h2>
        <p>WPM: <span id="wpm"></span></p>
        <p>正確さ: <span id="accuracy"></span>%</p>
        <button onclick="location.reload()">もう一度プレイ</button>
    </div>
    <script>
        const words = ["りんご", "いぬ", "ねこ"];
        const startButton = document.getElementById("startButton");
        const gameArea = document.getElementById("gameArea");
        const result = document.getElementById("result");
        const timerDisplay = document.getElementById("timer");
        const wordDisplay = document.getElementById("word");
        const input = document.getElementById("input");
        const scoreDisplay = document.getElementById("score");
        const wpmDisplay = document.getElementById("wpm");
        const accuracyDisplay = document.getElementById("accuracy");
        let currentWord = "";
        let score = 0;
        let timeLeft = 60;
        let timer = null;
        let totalAttempts = 0;
        let correctAttempts = 0;
        function getRandomWord() {
            return words[Math.floor(Math.random() * words.length)];
        }
        startButton.addEventListener("click", () => {
            startButton.style.display = "none";
            gameArea.style.display = "block";
            input.value = "";
            input.focus();
            currentWord = getRandomWord();
            wordDisplay.textContent = currentWord;
            timer = setInterval(() => {
                timeLeft--;
                timerDisplay.textContent = timeLeft;
                if (timeLeft <= 0) {
                    clearInterval(timer);
                    gameArea.style.display = "none";
                    result.style.display = "block";
                    wpmDisplay.textContent = score;
                    const accuracy = totalAttempts > 0 ? Math.round((correctAttempts / totalAttempts) * 100) : 0;
                    accuracyDisplay.textContent = accuracy;
                }
            }, 1000);
        });
        input.addEventListener("keypress", (e) => {
            if (e.key === "Enter") {
                const userInput = input.value.trim();
                if (userInput === currentWord) {
                    score++;
                    correctAttempts++;
                    scoreDisplay.textContent = score;
                }
                totalAttempts++;
                input.value = "";
                currentWord = getRandomWord();
                wordDisplay.textContent = currentWord;
            }
        });
    </script>
</body>
</html>

画像をつける場合

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>TUMUPIROタイピング✨</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; background-color: #f0f0f0; }
        .container { background-color: white; padding: 24px; border-radius: 12px; box-shadow: 0 0 12px rgba(0, 0, 0, 0.1); }
        h1 { font-size: 28px; }
        button { padding: 12px 24px; background-color: #4CAF50; color: white; border: none; cursor: pointer; }
        input { padding: 12px; font-size: 18px; }
        .image-area { margin: 24px 0; }
        img { width: 180px; height: auto; }
    </style>
</head>
<body>
    <div class="container">
        <h1>TUMUPIROタイピング✨</h1>
        <p>60秒以内にできるだけ多くの単語をタイピングしてください！</p>
        <div class="image-area">
            <img id="character" src="normal.jpg" alt="キャラクター">
        </div>
        <button id="startButton">スタート</button>
        <div id="gameArea" style="display: none;">
            <p>残り時間: <span id="timer">60</span>秒</p>
            <p>現在の単語: <span id="word"></span></p>
            <input type="text" id="input">
            <p>スコア: <span id="score">0</span> 単語</p>
        </div>
        <div id="result" style="display: none;">
            <h2>結果</h2>
            <p>WPM: <span id="wpm"></span></p>
            <p>正確さ: <span id="accuracy"></span>%</p>
            <button onclick="location.reload()">もう一度プレイ</button>
        </div>
    </div>
    <script>
        const words = ["りんご", "いぬ", "ねこ"];
        const startButton = document.getElementById("startButton");
        const gameArea = document.getElementById("gameArea");
        const result = document.getElementById("result");
        const character = document.getElementById("character");
        const timerDisplay = document.getElementById("timer");
        const wordDisplay = document.getElementById("word");
        const input = document.getElementById("input");
        const scoreDisplay = document.getElementById("score");
        const wpmDisplay = document.getElementById("wpm");
        const accuracyDisplay = document.getElementById("accuracy");
        let currentWord = "";
        let score = 0;
        let timeLeft = 60;
        let timer = null;
        let totalAttempts = 0;
        let correctAttempts = 0;
        function getRandomWord() {
            return words[Math.floor(Math.random() * words.length)];
        }
        startButton.addEventListener("click", () => {
            character.src = "start.jpg";
            startButton.style.display = "none";
            gameArea.style.display = "block";
            input.value = "";
            input.focus();
            currentWord = getRandomWord();
            wordDisplay.textContent = currentWord;
            timer = setInterval(() => {
                timeLeft--;
                timerDisplay.textContent = timeLeft;
                if (timeLeft <= 0) {
                    clearInterval(timer);
                    gameArea.style.display = "none";
                    result.style.display = "block";
                    wpmDisplay.textContent = score;
                    const accuracy = totalAttempts > 0 ? Math.round((correctAttempts / totalAttempts) * 100) : 0;
                    accuracyDisplay.textContent = accuracy;
                    if (score < 10) {
                        character.src = "low.jpg";
                    } else {
                        character.src = "high.jpg";
                    }
                }
            }, 1000);
        });
        input.addEventListener("keypress", (e) => {
            if (e.key === "Enter") {
                const userInput = input.value.trim();
                if (userInput === currentWord) {
                    score++;
                    correctAttempts++;
                    scoreDisplay.textContent = score;
                    character.src = "start.jpg";
                } else {
                    character.src = "mistake.jpg";
                }
                totalAttempts++;
                input.value = "";
                currentWord = getRandomWord();
                wordDisplay.textContent = currentWord;
            }
        });
    </script>
</body>
</html>