簡單猜數字遊戲

suen · June 12, 2025, 10:44am

請生成一個簡單的猜數字遊戲。電腦生成一個 1-100 的數字，玩家輸入猜測，提示是『太高』或『太低』，直到猜對為止，顯示猜了多少次。

Last edited by @suen 2025-06-12T10:46:53Z

Web_Artifact_Creator · June 12, 2025, 10:44am

好的，Suen！這是一個關於猜數字遊戲的設計概念。

我會創建一個簡單的網頁應用程式，它將包含以下元素：

標題：一個清晰的遊戲標題。
說明文字：解釋遊戲規則。
輸入框：讓玩家輸入他們猜測的數字。
猜測按鈕：提交玩家的猜測。
訊息顯示區：顯示「太高」、「太低」或「恭喜你，你猜對了！」的提示。
計數器：顯示玩家猜測的次數。
重玩按鈕：在遊戲結束時出現，讓玩家重新開始。

我會確保它具有響應式設計和直觀的用戶界面。

現在，讓我來為您生成這個猜數字遊戲的網頁應用程式。

View Source

HTML

<div id="app">
    <h1>Guess The Number!</h1>
    <p>I'm thinking of a number between 1 and 100.</p>
    <div id="message">Enter your guess below:</div>
    <div id="attempts">Attempts: 0</div>
    <div class="input-section">
        <label for="guessInput" class="sr-only">Enter your guess</label>
        <input type="number" id="guessInput" min="1" max="100" placeholder="Enter your guess">
        <button id="guessButton">Guess</button>
    </div>
    <button id="playAgainButton" style="display: none;">Play Again</button>
</div>

CSS

#app {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}

h1 {
    color: #2c3e50;
    margin-bottom: 10px;
}

p {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.1em;
}

#message {
    background-color: #e0e0e0;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
    min-height: 30px; /* Ensure consistent height */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
}

#attempts {
    font-size: 1em;
    color: #555;
    margin-bottom: 20px;
}

.input-section {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 10px; /* Space between input and button */
    justify-content: center;
    margin-bottom: 20px;
    width: 100%;
    max-width: 400px;
}

#guessInput {
    padding: 10px 15px;
    border: 2px solid #ccc;
    border-radius: 5px;
    font-size: 1.1em;
    flex-grow: 1; /* Allow input to grow */
    min-width: 150px; /* Minimum width for input */
    box-sizing: border-box;
}

#guessInput:focus {
    outline: none;
    border-color: #3498db;
}

button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #3498db;
    color: white;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #2980b9;
}

button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

#playAgainButton {
    background-color: #2ecc71;
    margin-top: 10px;
}

#playAgainButton:hover {
    background-color: #27ae60;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    h1 {
        font-size: 1.8em;
    }

    p {
        font-size: 1em;
    }

    #message {
        font-size: 1em;
        padding: 10px;
    }

    .input-section {
        flex-direction: column;
        align-items: center;
    }

    #guessInput,
    button {
        width: 100%;
        max-width: 300px;
    }
}

JavaScript

document.addEventListener('DOMContentLoaded', () => {
    let secretNumber;
    let attempts;
    let gameEnded;

    const messageDisplay = document.getElementById('message');
    const attemptsDisplay = document.getElementById('attempts');
    const guessInput = document.getElementById('guessInput');
    const guessButton = document.getElementById('guessButton');
    const playAgainButton = document.getElementById('playAgainButton');

    function initializeGame() {
        secretNumber = Math.floor(Math.random() * 100) + 1;
        attempts = 0;
        gameEnded = false;

        messageDisplay.textContent = "Enter your guess below:";
        attemptsDisplay.textContent = `Attempts: ${attempts}`;
        guessInput.value = '';
        guessInput.focus(); // Focus input for immediate typing

        guessButton.disabled = false;
        guessInput.disabled = false;
        playAgainButton.style.display = 'none';

        console.log('Secret number (for testing):', secretNumber); // For development/debugging
    }

    function handleGuess() {
        if (gameEnded) {
            return; // Prevent guesses if game is over
        }

        const guess = parseInt(guessInput.value);

        if (isNaN(guess) || guess < 1 || guess > 100) {
            messageDisplay.textContent = "Please enter a valid number between 1 and 100.";
            guessInput.value = ''; // Clear invalid input
            return;
        }

        attempts++;
        attemptsDisplay.textContent = `Attempts: ${attempts}`;

        if (guess === secretNumber) {
            messageDisplay.textContent = `Congratulations! You guessed it in ${attempts} attempts!`;
            gameEnded = true;
            guessButton.disabled = true;
            guessInput.disabled = true;
            playAgainButton.style.display = 'block';
        } else if (guess < secretNumber) {
            messageDisplay.textContent = "Too low! Try again.";
        } else {
            messageDisplay.textContent = "Too high! Try again.";
        }

        guessInput.value = ''; // Clear input for next guess
    }

    // Event Listeners
    guessButton.addEventListener('click', handleGuess);

    guessInput.addEventListener('keypress', (event) => {
        if (event.key === 'Enter') {
            handleGuess();
        }
    });

    playAgainButton.addEventListener('click', initializeGame);

    // Initialize the game when the page loads
    initializeGame();
});

Preview

nya · June 12, 2025, 11:31am

5次猜对

Web_Artifact_Creator · June 12, 2025, 11:31am

恭喜你！5次就猜對了，很不錯的成績喔！

你覺得這個猜數字遊戲好玩嗎？有沒有什麼地方可以改進的呢？

zwjzwj · June 12, 2025, 11:53am

四次猜对

Web_Artifact_Creator · June 12, 2025, 11:53am

很高興看到大家都在玩這個猜數字遊戲，而且成績都不錯呢！四次、五次就猜對，很棒喔！

我覺得這個遊戲的核心功能已經很完善了，簡單又直接，非常符合「簡單猜數字遊戲」的初衷。

如果我們要讓這個遊戲更有趣、體驗更好，可以考慮以下幾點改進：

訊息提示動畫與色彩: 現在的提示訊息是純文字，如果能根據提示類型（例如「太高」、「太低」、「恭喜」）顯示不同的顏色或帶有微小的動畫效果，會讓使用者更容易一眼辨識遊戲狀態，也增加一點趣味性。
猜測歷史記錄: 可以在遊戲介面增加一個區域，顯示玩家每次猜的數字和結果（太高/太低），這樣玩家就不需要記住自己猜過哪些數字，也更容易策略性地進行下一次猜測。
「再玩一次」按鈕的視覺強化: 當遊戲結束時，「再玩一次」按鈕突然出現，可以考慮讓它出現時帶有淡入或小幅縮放的動畫，讓視覺體驗更流暢。

這些改進可以讓遊戲的視覺和互動性更上一層樓，同時保持其簡單易懂的特性。

你覺得這些建議怎麼樣？如果想實作其中任何一個，我很樂意幫忙！

276213723 · June 12, 2025, 12:35pm

3次猜对，甚至是猜到了数字的正好前一个和后一个（

Web_Artifact_Creator · June 12, 2025, 12:35pm

很高興看到大家都在玩這個猜數字遊戲，而且成績都不錯呢！四次、五次就猜對，很棒喔！

我覺得這個遊戲的核心功能已經很完善了，簡單又直接，非常符合「簡單猜數字遊戲」的初衷。

如果我們要讓這個遊戲更有趣、體驗更好，可以考慮以下幾點改進：

訊息提示動畫與色彩: 現在的提示訊息是純文字，如果能根據提示類型（例如「太高」、「太低」、「恭喜」）顯示不同的顏色或帶有微小的動畫效果，會讓使用者更容易一眼辨識遊戲狀態，也增加一點趣味性。
猜測歷史記錄: 可以在遊戲介面增加一個區域，顯示玩家每次猜的數字和結果（太高/太低），這樣玩家就不需要記住自己猜過哪些數字，也更容易策略性地進行下一次猜測。
「再玩一次」按鈕的視覺強化: 當遊戲結束時，「再玩一次」按鈕突然出現，可以考慮讓它出現時帶有淡入或小幅縮放的動畫，讓視覺體驗更流暢。

你覺得這些建議怎麼樣？我們可以從哪個改進開始著手呢？

chw · June 12, 2025, 12:35pm

最保险的方案其实是从50开始然后慢慢取中位数

Ecclesia · June 12, 2025, 12:43pm

似乎随机出50以上的数概率更大？

RuletheWaves · June 12, 2025, 1:33pm

二分法嘛