作品 ID: 3176
🎮けいさんゲーム🎮

公開
小学生の計算問題を行います。
ソース
プログラム

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🎮 けいさんゲーム 🎮</title>
    <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700;900&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'M PLUS Rounded 1c', sans-serif;
            min-height: 100vh;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            overflow-x: hidden;
        }

        .bubbles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
            z-index: 0;
        }

        .bubble {
            position: absolute;
            bottom: -100px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 50%;
            animation: rise 15s infinite ease-in;
        }

        .bubble:nth-child(1) { width: 40px; height: 40px; left: 10%; animation-duration: 12s; }
        .bubble:nth-child(2) { width: 20px; height: 20px; left: 20%; animation-duration: 18s; animation-delay: 2s; }
        .bubble:nth-child(3) { width: 50px; height: 50px; left: 35%; animation-duration: 14s; animation-delay: 4s; }
        .bubble:nth-child(4) { width: 80px; height: 80px; left: 50%; animation-duration: 20s; }
        .bubble:nth-child(5) { width: 35px; height: 35px; left: 65%; animation-duration: 16s; animation-delay: 3s; }
        .bubble:nth-child(6) { width: 45px; height: 45px; left: 75%; animation-duration: 13s; animation-delay: 5s; }
        .bubble:nth-child(7) { width: 25px; height: 25px; left: 85%; animation-duration: 17s; animation-delay: 1s; }
        .bubble:nth-child(8) { width: 60px; height: 60px; left: 90%; animation-duration: 15s; animation-delay: 6s; }

        @keyframes rise {
            0% { bottom: -100px; transform: translateX(0) scale(1); opacity: 0.5; }
            50% { opacity: 0.8; }
            100% { bottom: 100vh; transform: translateX(100px) scale(0.5); opacity: 0; }
        }

        .game-container {
            position: relative;
            z-index: 1;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 30px;
            padding: 30px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2), 0 0 0 5px rgba(255, 255, 255, 0.3);
            max-width: 420px;
            width: 100%;
            text-align: center;
        }

        .title {
            font-size: 2rem;
            font-weight: 900;
            background: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
            background-size: 300% 300%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: gradient 3s ease infinite;
            margin-bottom: 8px;
        }

        @keyframes gradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .subtitle {
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 20px;
        }

        .level-selector {
            display: flex;
            gap: 8px;
            justify-content: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .level-btn {
            padding: 10px 16px;
            border: none;
            border-radius: 12px;
            font-family: inherit;
            font-size: 0.85rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .level-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
        }

        .level-btn.level-1 { background: linear-gradient(135deg, #a8e063, #56ab2f); color: white; }
        .level-btn.level-2 { background: linear-gradient(135deg, #f5af19, #f12711); color: white; }
        .level-btn.level-3 { background: linear-gradient(135deg, #667eea, #764ba2); color: white; }

        .level-btn.active {
            transform: scale(1.08);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
        }

        .stats {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
            padding: 12px;
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            border-radius: 15px;
        }

        .stat-item { text-align: center; }
        .stat-label { font-size: 0.75rem; color: #666; margin-bottom: 3px; }
        .stat-value { font-size: 1.5rem; font-weight: 900; color: #333; }
        .stat-value.score { color: #ff6b6b; }
        .stat-value.streak { color: #feca57; }

        .question-area {
            background: linear-gradient(135deg, #fff9c4, #fff59d);
            border-radius: 20px;
            padding: 20px;
            margin-bottom: 15px;
            box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .question-area.correct-flash { animation: correctFlash 0.6s ease; }
        .question-area.wrong-flash { animation: wrongFlash 0.6s ease; }

        @keyframes correctFlash {
            0%, 100% { background: linear-gradient(135deg, #fff9c4, #fff59d); }
            50% { background: linear-gradient(135deg, #a8e063, #56ab2f); }
        }

        @keyframes wrongFlash {
            0%, 100% { background: linear-gradient(135deg, #fff9c4, #fff59d); transform: translateX(0); }
            25% { background: linear-gradient(135deg, #ff6b6b, #ee5a5a); transform: translateX(-5px); }
            75% { background: linear-gradient(135deg, #ff6b6b, #ee5a5a); transform: translateX(5px); }
        }

        .question {
            font-size: 2.5rem;
            font-weight: 900;
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .question .operator { color: #ff6b6b; }

        .answer-display {
            width: 140px;
            height: 60px;
            margin: 0 auto;
            background: white;
            border: 4px solid #667eea;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.2rem;
            font-weight: 900;
            color: #333;
            box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .answer-display.empty { color: #ccc; }

        .number-pad {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-bottom: 15px;
            max-width: 280px;
            margin-left: auto;
            margin-right: auto;
        }

        .num-btn {
            height: 55px;
            border: none;
            border-radius: 12px;
            font-family: inherit;
            font-size: 1.5rem;
            font-weight: 900;
            cursor: pointer;
            transition: all 0.15s ease;
            background: linear-gradient(135deg, #74b9ff, #0984e3);
            color: white;
            box-shadow: 0 4px 0 #0066cc, 0 6px 10px rgba(0, 0, 0, 0.15);
        }

        .num-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #0066cc, 0 8px 15px rgba(0, 0, 0, 0.2); }
        .num-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #0066cc, 0 3px 5px rgba(0, 0, 0, 0.15); }

        .clear-btn {
            height: 55px;
            border: none;
            border-radius: 12px;
            font-family: inherit;
            font-size: 1.1rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.15s ease;
            background: linear-gradient(135deg, #fdcb6e, #e17055);
            color: white;
            box-shadow: 0 4px 0 #d63031, 0 6px 10px rgba(0, 0, 0, 0.15);
        }

        .clear-btn:hover { transform: translateY(-2px); }
        .clear-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #d63031, 0 3px 5px rgba(0, 0, 0, 0.15); }

        .backspace-btn {
            height: 55px;
            border: none;
            border-radius: 12px;
            font-family: inherit;
            font-size: 1.3rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.15s ease;
            background: linear-gradient(135deg, #a29bfe, #6c5ce7);
            color: white;
            box-shadow: 0 4px 0 #5541d7, 0 6px 10px rgba(0, 0, 0, 0.15);
        }

        .backspace-btn:hover { transform: translateY(-2px); }
        .backspace-btn:active { transform: translateY(2px); }

        .action-buttons {
            display: flex;
            gap: 10px;
            max-width: 280px;
            margin: 0 auto 15px auto;
        }

        .submit-btn {
            flex: 1;
            padding: 15px;
            font-family: inherit;
            font-size: 1.2rem;
            font-weight: 700;
            color: white;
            background: linear-gradient(135deg, #00b894, #00a085);
            border: none;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.15s ease;
            box-shadow: 0 4px 0 #007a63, 0 6px 10px rgba(0, 0, 0, 0.15);
        }

        .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #007a63, 0 8px 15px rgba(0, 0, 0, 0.2); }
        .submit-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #007a63, 0 3px 5px rgba(0, 0, 0, 0.15); }

        .message {
            padding: 12px;
            border-radius: 12px;
            font-size: 1.1rem;
            font-weight: 700;
            min-height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .message.correct {
            background: linear-gradient(135deg, #d4edda, #c3e6cb);
            color: #155724;
            animation: bounceIn 0.5s ease;
        }

        .message.wrong {
            background: linear-gradient(135deg, #f8d7da, #f5c6cb);
            color: #721c24;
            animation: shakeIn 0.5s ease;
        }

        .message.info {
            background: linear-gradient(135deg, #e8f4fd, #d1ecf1);
            color: #0c5460;
        }

        @keyframes bounceIn {
            0% { transform: scale(0.8); opacity: 0; }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); opacity: 1; }
        }

        @keyframes shakeIn {
            0%, 100% { transform: translateX(0); }
            20% { transform: translateX(-15px); }
            40% { transform: translateX(15px); }
            60% { transform: translateX(-10px); }
            80% { transform: translateX(10px); }
        }

        .stars-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 999;
        }

        .star {
            position: absolute;
            font-size: 2rem;
            animation: starBurst 1s ease-out forwards;
        }

        @keyframes starBurst {
            0% { opacity: 1; transform: scale(0); }
            50% { opacity: 1; transform: scale(1.2); }
            100% { opacity: 0; transform: scale(0.5) translateY(-50px); }
        }

        .wrong-emoji {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 6rem;
            animation: wrongPop 0.8s ease-out forwards;
            z-index: 1000;
        }

        @keyframes wrongPop {
            0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
            30% { transform: translate(-50%, -50%) scale(1.3); }
            100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
        }

        .level-info {
            margin-top: 10px;
            padding: 8px;
            background: rgba(102, 126, 234, 0.1);
            border-radius: 8px;
            font-size: 0.8rem;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="bubbles">
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
    </div>

    <div class="game-container">
        <h1 class="title">🎮 けいさんゲーム 🎮</h1>
        <p class="subtitle">レベルをえらんで、けいさんにチャレンジ！</p>

        <div class="level-selector">
            <button class="level-btn level-1 active" onclick="setLevel(1)">🌟 レベル1</button>
            <button class="level-btn level-2" onclick="setLevel(2)">⭐ レベル2</button>
            <button class="level-btn level-3" onclick="setLevel(3)">🌠 レベル3</button>
        </div>

        <div class="stats">
            <div class="stat-item">
                <div class="stat-label">スコア</div>
                <div class="stat-value score" id="score">0</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">れんぞく</div>
                <div class="stat-value streak" id="streak">0</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">もんだい</div>
                <div class="stat-value" id="total">0</div>
            </div>
        </div>

        <div class="question-area" id="question-area">
            <div class="question">
                <span id="num1">?</span>
                <span class="operator" id="operator">+</span>
                <span id="num2">?</span>
                <span>=</span>
            </div>
            <div class="answer-display empty" id="answer-display">?</div>
        </div>

        <div class="number-pad">
            <button class="num-btn" onclick="inputNumber(1)">1</button>
            <button class="num-btn" onclick="inputNumber(2)">2</button>
            <button class="num-btn" onclick="inputNumber(3)">3</button>
            <button class="num-btn" onclick="inputNumber(4)">4</button>
            <button class="num-btn" onclick="inputNumber(5)">5</button>
            <button class="num-btn" onclick="inputNumber(6)">6</button>
            <button class="num-btn" onclick="inputNumber(7)">7</button>
            <button class="num-btn" onclick="inputNumber(8)">8</button>
            <button class="num-btn" onclick="inputNumber(9)">9</button>
            <button class="clear-btn" onclick="clearInput()">クリア</button>
            <button class="num-btn" onclick="inputNumber(0)">0</button>
            <button class="backspace-btn" onclick="backspace()">←</button>
        </div>

        <div class="action-buttons">
            <button class="submit-btn" onclick="checkAnswer()">こたえあわせ ✓</button>
        </div>

        <div class="message info" id="message">すうじボタンをおして こたえをいれよう！🚀</div>

        <div class="level-info" id="level-info">レベル1: たしざん（1〜10）</div>
    </div>

    <div class="stars-container" id="stars-container"></div>
    <div id="wrong-effect"></div>

    <script>
        // Game state
        let currentLevel = 1;
        let score = 0;
        let streak = 0;
        let total = 0;
        let correctAnswer = 0;
        let num1 = 0;
        let num2 = 0;
        let operator = "+";
        let userInput = "";
        let isChecking = false;

        function setLevel(level) {
            currentLevel = level;
            
            // Update button styles
            document.querySelectorAll('.level-btn').forEach((btn, i) => {
                if (i + 1 === level) {
                    btn.classList.add('active');
                } else {
                    btn.classList.remove('active');
                }
            });
            
            // Update level info
            const levelInfo = document.getElementById('level-info');
            if (level === 1) {
                levelInfo.textContent = "レベル1: たしざん（1〜10）";
            } else if (level === 2) {
                levelInfo.textContent = "レベル2: たしざん・ひきざん（1〜20）";
            } else {
                levelInfo.textContent = "レベル3: たしざん・ひきざん（1〜50）";
            }
            
            generateQuestion();
        }

        function generateQuestion() {
            isChecking = false;
            userInput = "";
            updateAnswerDisplay();
            
            if (currentLevel === 1) {
                num1 = Math.floor(Math.random() * 10) + 1;
                num2 = Math.floor(Math.random() * 10) + 1;
                operator = "+";
                correctAnswer = num1 + num2;
            } else if (currentLevel === 2) {
                num1 = Math.floor(Math.random() * 20) + 1;
                num2 = Math.floor(Math.random() * 20) + 1;
                operator = Math.random() < 0.5 ? "+" : "−";
                if (operator === "−") {
                    if (num1 < num2) [num1, num2] = [num2, num1];
                    correctAnswer = num1 - num2;
                } else {
                    correctAnswer = num1 + num2;
                }
            } else {
                num1 = Math.floor(Math.random() * 50) + 1;
                num2 = Math.floor(Math.random() * 50) + 1;
                operator = Math.random() < 0.5 ? "+" : "−";
                if (operator === "−") {
                    if (num1 < num2) [num1, num2] = [num2, num1];
                    correctAnswer = num1 - num2;
                } else {
                    correctAnswer = num1 + num2;
                }
            }
            
            document.getElementById('num1').textContent = num1;
            document.getElementById('num2').textContent = num2;
            document.getElementById('operator').textContent = operator;
        }

        function updateAnswerDisplay() {
            const display = document.getElementById('answer-display');
            if (userInput === "") {
                display.textContent = "?";
                display.classList.add('empty');
            } else {
                display.textContent = userInput;
                display.classList.remove('empty');
            }
        }

        function inputNumber(num) {
            if (isChecking) return;
            if (userInput.length < 3) {
                userInput += num.toString();
                updateAnswerDisplay();
            }
        }

        function clearInput() {
            if (isChecking) return;
            userInput = "";
            updateAnswerDisplay();
        }

        function backspace() {
            if (isChecking) return;
            userInput = userInput.slice(0, -1);
            updateAnswerDisplay();
        }

        function showCorrectEffect() {
            const questionArea = document.getElementById('question-area');
            questionArea.classList.add('correct-flash');
            setTimeout(() => questionArea.classList.remove('correct-flash'), 600);
            
            // Star burst effect
            const container = document.getElementById('stars-container');
            const emojis = ["⭐", "🌟", "✨", "💫", "🎉", "🎊"];
            let html = "";
            
            for (let i = 0; i < 12; i++) {
                const x = Math.random() * 60 + 20;
                const y = Math.random() * 60 + 20;
                const emoji = emojis[Math.floor(Math.random() * emojis.length)];
                const delay = Math.random() * 300;
                html += `<div class="star" style="left:${x}%; top:${y}%; animation-delay:${delay}ms;">${emoji}</div>`;
            }
            
            container.innerHTML = html;
            setTimeout(() => container.innerHTML = "", 1200);
        }

        function showWrongEffect() {
            const questionArea = document.getElementById('question-area');
            questionArea.classList.add('wrong-flash');
            setTimeout(() => questionArea.classList.remove('wrong-flash'), 600);
            
            const wrongDiv = document.getElementById('wrong-effect');
            wrongDiv.innerHTML = '<div class="wrong-emoji">😢</div>';
            setTimeout(() => wrongDiv.innerHTML = "", 1000);
        }

        function checkAnswer() {
            if (isChecking) return;
            
            const messageDiv = document.getElementById('message');
            
            if (userInput === "") {
                messageDiv.textContent = "すうじをいれてね！🔢";
                messageDiv.className = "message info";
                return;
            }
            
            isChecking = true;
            const userAnswer = parseInt(userInput);
            
            total++;
            document.getElementById('total').textContent = total;
            
            if (userAnswer === correctAnswer) {
                score += 10 + (streak * 2);
                streak++;
                
                document.getElementById('score').textContent = score;
                document.getElementById('streak').textContent = streak;
                
                showCorrectEffect();
                
                if (streak >= 5) {
                    messageDiv.textContent = `すごい！${streak}れんぞくせいかい！🎉🎉🎉`;
                } else if (streak >= 3) {
                    messageDiv.textContent = `やったね！${streak}れんぞく！⭐⭐`;
                } else {
                    messageDiv.textContent = "せいかい！よくできました！🌟";
                }
                messageDiv.className = "message correct";
                
                setTimeout(generateQuestion, 1200);
            } else {
                streak = 0;
                document.getElementById('streak').textContent = "0";
                
                showWrongEffect();
                
                messageDiv.textContent = `ざんねん！こたえは ${correctAnswer} だよ 💪`;
                messageDiv.className = "message wrong";
                
                setTimeout(generateQuestion, 2000);
            }
        }

        // Keyboard support
        document.addEventListener('keydown', (e) => {
            if (e.key >= '0' && e.key <= '9') {
                inputNumber(parseInt(e.key));
            } else if (e.key === 'Enter') {
                checkAnswer();
            } else if (e.key === 'Backspace') {
                backspace();
            } else if (e.key === 'Escape' || e.key === 'Delete') {
                clearInput();
            }
        });

        // Initialize
        generateQuestion();
    </script>
</body>
</html>
作品について
作品情報

作品を編集
TkoTko 作
ライセンス: 未指定（未指定/貯蔵庫のみ）
形式: html
タグ: -
利用バージョン: 3.7.14
アクセス数(累計): 21
アクセス数(今月): 11
更新日時: 2026/01/30 16:04 編集: 2026/01/30 16:05
作品公開情報
交流
コメントを取得中...