js实现随机数小游戏-前端开发

下面是JS实现随机数小游戏的完整攻略：

下面是JS实现随机数小游戏的完整攻略：

需求分析

实现随机数游戏需要满足以下基本需求：

用户可以通过点击按钮开始游戏；
程序会生成一个随机数；
用户需要输入一个数进行猜测；
如果猜测的数与随机数相等，则提示用户猜对了并计算游戏时间；
如果猜测的数与随机数不相等，则提示用户猜错了并显示猜错次数，同时根据猜错次数给出提示。

实现步骤

下面是实现随机数游戏需要遵循的步骤：

步骤一：创建HTML页面和CSS样式

首先要创建一个HTML页面，在其中添加一个按钮和输入框，用于用户的操作，同时使用CSS美化页面。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>随机数游戏</title>
    <style>
        button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
        input {
            font-size: 20px;
            margin-left: 10px;
            padding: 5px;
            width: 200px;
        }
    </style>
</head>
<body>
    <h1>随机数游戏</h1>
    <button id="startBtn">开始游戏</button>
    <p id="result"></p>
    <input type="number" id="guessNum" placeholder="输入猜测的数字">
</body>
</html>

步骤二：获取DOM元素，定义随机数

接下来，在JS文件中获取页面中需要操作的DOM元素，定义游戏需要使用的随机数。

const startBtn = document.getElementById('startBtn');
const guessNumInput = document.getElementById('guessNum');
const getResult = document.getElementById('result');
let randomNumber;

步骤三：绑定事件，生成随机数

使用addEventListener方法为按钮绑定点击事件，同时生成随机数。

startBtn.addEventListener('click',startGame);

function startGame() {
    randomNumber = Math.floor(Math.random() * 100) + 1;
    getResult.innerHTML = '';
}

步骤四：实现猜数逻辑

在猜数逻辑中，需要对用户猜测的数字与随机数进行比较，同时提示用户猜错次数。如果用户猜对了，还需要计算游戏时间。

let guessCount = 0;
function checkGuess() {
    const userGuess = Number(guessNumInput.value);
    if(userGuess === randomNumber) {
        guessCount++;
        let timeTaken = guessCount * 6;
        getResult.innerHTML = `恭喜你猜对了，用时${timeTaken}秒`;
    }
    else if(userGuess > randomNumber) {
        guessCount++;
        getResult.innerHTML = `猜大了，再试一次，已经猜错了${guessCount}次`;
    } 
    else {
        guessCount++;
        getResult.innerHTML = `猜小了，再试一次，已经猜错了${guessCount}次`;
    }
}

步骤五：绑定猜测事件

使用addEventListener方法为用户输入框绑定回车事件，当用户输入后按下回车键后，程序自动执行猜数逻辑。

guessNumInput.addEventListener('keypress',function(event) {
    if(event.key === 'Enter') {
        checkGuess();
    }
});

步骤六：完整代码

下面是完整的随机数游戏代码，包括上述全部的步骤：

const startBtn = document.getElementById('startBtn');
const guessNumInput = document.getElementById('guessNum');
const getResult = document.getElementById('result');
let randomNumber;
let guessCount = 0;

startBtn.addEventListener('click',startGame);
guessNumInput.addEventListener('keypress',function(event) {
    if(event.key === 'Enter') {
        checkGuess();
    }
});

function startGame() {
    randomNumber = Math.floor(Math.random() * 100) + 1;
    getResult.innerHTML = '';
    guessNumInput.value='';
    guessCount = 0;
}

function checkGuess() {
    const userGuess = Number(guessNumInput.value);
    if(userGuess === randomNumber) {
        guessCount++;
        let timeTaken = guessCount * 6;
        getResult.innerHTML = `恭喜你猜对了，用时${timeTaken}秒`;
    }
    else if(userGuess > randomNumber) {
        guessCount++;
        getResult.innerHTML = `猜大了，再试一次，已经猜错了${guessCount}次`;
    } 
    else {
        guessCount++;
        getResult.innerHTML = `猜小了，再试一次，已经猜错了${guessCount}次`;
    }
}