【自作ゲーム】初心者が3分で「数当てゲーム」を作ってみたら意外と熱中した話-cntwork.com

【自作ゲーム】何回で正解できますか？

🔢 数当てゲーム

1 から 100 までの数字を当ててみてね

コピペでOKソースコード


     <!DOCTYPE html> 
<html lang="ja"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title> シンプル数当てゲーム</title> 
    <style> 
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            background-color: #f0f2f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .container {
            background-color: white;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            text-align: center;
            max-width: 400px;
            width: 100%;
        }
        h1 {
            color: #333;
            font-size: 24px;
            margin-bottom: 10px;
        }
        p {
            color: #666;
            font-size: 14px;
        }
        input[type="number"] {
            width: 80px;
            padding: 10px;
            font-size: 18px;
            text-align: center;
            border: 2px solid #ddd;
            border-radius: 6px;
            margin-right: 10px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.2s;
        }
        button:hover {
            background-color: #0056b3;
        }
        .message {
            margin-top: 20px;
            font-size: 18px;
            font-weight: bold;
            min-height: 27px;
        }
        .counter {
            margin-top: 10px;
            font-size: 12px;
            color: #999;
        }
        .reset-btn {
            background-color: #28a745;
            display: none;
            margin: 20px auto 0;
        }
        .reset-btn:hover {
            background-color: #218838;
        }
    </style> 
</head> 
<body> 

<div class="container"> 
    <h1> 🔢 数当てゲーム</h1> 
    <p> 1 から 100 までの数字を当ててみてね！</p> 
    
    <div id="game-box"> 
        <input type="number" id="guess-input" min="1" max="100" placeholder="50"> 
        <button id="guess-btn" onclick="checkGuess()"> 予想する</button> 
    </div> 

    <div class="message" id="message"> </div> 
    <div class="counter" id="counter"> </div> 
    
    <button class="reset-btn" id="reset-btn" onclick="initGame()"> もう一度遊ぶ</button> 
</div> 

<script> 
    let targetNumber;
    let attempts;

    // ゲームの初期化
    function initGame() {
        targetNumber = Math.floor(Math.random() * 100) + 1; // 1~100のランダムな数
        attempts = 0;
        
        document.getElementById('guess-input').value = '';
        document.getElementById('guess-input').disabled = false;
        document.getElementById('guess-btn').disabled = false;
        document.getElementById('message').innerText = '';
        document.getElementById('message').style.color = '#333';
        document.getElementById('counter').innerText = '';
        document.getElementById('reset-btn').style.display = 'none';
    }

    // 判定処理
    function checkGuess() {
        const inputElement = document.getElementById('guess-input');
        const guess = parseInt(inputElement.value);
        const messageElement = document.getElementById('message');
        const counterElement = document.getElementById('counter');

        // 入力チェック
        if (isNaN(guess) || guess < 1 || guess >  100) {
            messageElement.innerText = '⚠️ 1〜100の数字を入れてね';
            messageElement.style.color = '#dc3545';
            return;
        }

        attempts++;

        if (guess === targetNumber) {
            messageElement.innerText = `🎉 正解！おめでとう！`;
            messageElement.style.color = '#28a745';
            counterElement.innerText = `かかった回数: ${attempts} 回`;
            
            // ゲーム終了時の処理
            inputElement.disabled = true;
            document.getElementById('guess-btn').disabled = true;
            document.getElementById('reset-btn').style.display = 'block';
        } else if (guess >  targetNumber) {
            messageElement.innerText = '📉 もっと小さいよ！';
            messageElement.style.color = '#007bff';
            counterElement.innerText = `試行回数: ${attempts} 回`;
        } else {
            messageElement.innerText = '📈 もっと大きいよ！';
            messageElement.style.color = '#dc3545';
            counterElement.innerText = `試行回数: ${attempts} 回`;
        }

        // 入力欄をクリアしてフォーカスを合わせる
        inputElement.value = '';
        inputElement.focus();
    }

    // エンターキーでも入力できるようにする
    document.getElementById('guess-input').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            checkGuess();
        }
    });

    // 最初にゲームを起動
    initGame();
</script> 

</body> 
</html>

作成した感想

二分探索というアルゴリズムで解いてみたところ

５〜１３回で正解できました。何回でできたかコメントしてみてください

【自作ゲーム】初心者が3分で「数当てゲーム」を作ってみたら意外と熱中した話

【自作ゲーム】何回で正解できますか？

🔢 数当てゲーム

コピペでOKソースコード

作成した感想

4 件のコメント:

人気記事

Welcome

人気の記事

【無料】ギター練習用にメトロノームを自作してみた｜初心者がリズム感を鍛えるためのシンプルツール

主な掲載内容

このブログを検索

アーカイブ

ページ