基于JS制作一個(gè)網(wǎng)頁版的猜數(shù)字小游戲

更新時(shí)間：2022年07月22日 09:19:21 作者：Java猿~

這篇文章主要為大家詳細(xì)介紹了如何利用HTML+CSS+JavaScript實(shí)現(xiàn)一個(gè)簡(jiǎn)單的網(wǎng)頁版的猜數(shù)字小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

一. 游戲簡(jiǎn)介

在輸入框內(nèi)輸一個(gè)數(shù)字，點(diǎn)擊后面的“猜”按鈕，系統(tǒng)會(huì)根據(jù)你猜的數(shù)字的大小，返回你是猜大猜小還是猜正確，系統(tǒng)還會(huì)統(tǒng)計(jì)你猜的次數(shù)，在猜數(shù)字的途中你點(diǎn)擊按鈕隨時(shí)可以重新開始游戲

二. 頁面預(yù)覽

因?yàn)槭呛?jiǎn)易版，所以沒有太多的樣式

猜數(shù)字之前：

猜小了：

猜大了：

猜對(duì)了：

三. 頁面實(shí)現(xiàn)

頁面框架：

<body>
    <div id="i1">
        <span>請(qǐng)輸入您猜的數(shù)字：</span>
        <input type="text" id="text">
        <input type="button" value="猜" id="guess">
        <br>
        <span>您已經(jīng)猜的次數(shù)：</span>
        <span id="count">0</span>
        <br>
        結(jié)果：<span class="c1"></span>
        <br>
        <br>
        <input type="button" value="重新開始游戲" id="reBu">
    </div>
</body>

頁面簡(jiǎn)單樣式：

       #i1 {
            box-sizing: border-box;
            width: 400px;
            height: 300px;
            border-style: dashed;
            border-color:blue;
            padding: 85px;
            margin-top: 150px;
            margin-left: 500px;
        }

四. 功能實(shí)現(xiàn)

使用document.querySelector()獲取頁面上的元素：

    var text = document.querySelector("#text");//獲取輸入元素
    var count = document.querySelector("#count");//獲取次數(shù)元素
    var result = document.querySelector(".c1");//獲取結(jié)果元素
    var guessBu = document.querySelector("#guess");//獲取“猜”按鈕元素
    var reBu = document.querySelector("#reBu");//獲取“重新開始”按鈕元素
    var sum = 0;//猜的總次數(shù)

生成隨機(jī)數(shù)：

var guessNumber = Math.floor(Math.random()*100)+1;//生成隨機(jī)數(shù)

說明：Math.random()隨機(jī)生成[0,1)的數(shù)字，乘上100范圍為[0,100)，加上1，范圍為[1,101)，使用Math.floor()去掉小數(shù)部分，最后生成數(shù)字的范圍為[0,100]

給“猜”按鈕綁定點(diǎn)擊事件：

點(diǎn)擊按鈕后，啟動(dòng)比較功能
首先將猜的總次數(shù)sum++，并將sum設(shè)置到頁面中
需要先用parseInt()將輸入框的內(nèi)容轉(zhuǎn)為整數(shù)，再進(jìn)行比較
若輸入的數(shù)大，則將提示顏色調(diào)整為紅色，并設(shè)置到頁面中
若輸入的數(shù)小，則將提示顏色調(diào)整為紅色，并設(shè)置到頁面中
若輸入的數(shù)為系統(tǒng)生成的隨機(jī)數(shù)，則將提示信息調(diào)整為綠色，并設(shè)置到頁面中

    guessBu.onclick = function(){ //給“猜”按鈕綁定點(diǎn)擊功能
        sum++;
        count.innerHTML = sum;
        var userGuess = parseInt(text.value);//獲取輸入的數(shù)字
        if(userGuess > guessNumber){ //如果輸入大于系統(tǒng)生成數(shù)字
            result.innerHTML = "很遺憾，您猜大了！";
            result.style.color = "red"; //調(diào)正顏色為紅色
        }else if(userGuess < guessNumber){//如果輸入小于系統(tǒng)生成數(shù)字
            result.innerHTML = "很遺憾，您猜小了！";
            result.style.color = "red";
        }else { //輸入等于系統(tǒng)生成數(shù)字
            result.className = "c2";
            result.innerHTML = "恭喜您，您猜對(duì)了！";
            result.style.color = "green";//調(diào)整顏色為綠色
        }
    }

給“重新開始游戲”按鈕綁定點(diǎn)擊事件：

首先重新生成隨機(jī)數(shù)
再將猜測(cè)的總次數(shù)置0，并設(shè)置到頁面中
再將提示信息置空，并設(shè)置到頁面中
最后將輸入框數(shù)字置空，并設(shè)置到頁面中

    reBu.onclick = function(){//給“重新開始”按鈕綁定點(diǎn)擊事件
        guessNumber = Math.floor(Math.random()*100)+1;//重新生成隨機(jī)數(shù)
        sum = 0;//猜的總次數(shù)置0
        count.innerHTML = sum;//將0填充
        result.innerHTML = "";//結(jié)果置空
        text.value = "";//輸入框置空
    }

五. 參考源碼

拿來即可在自己電腦上運(yùn)行，大家快來試試吧！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜數(shù)字游戲?。?！</title>
    <style>
        #i1 {
            box-sizing: border-box;
            width: 400px;
            height: 300px;
            border-style: dashed;
            border-color:blue;
            padding: 85px;
            margin-top: 150px;
            margin-left: 500px;
        }
    </style>
</head>
<body>
    <div id="i1">
        <span>請(qǐng)輸入您猜的數(shù)字：</span>
        <input type="text" id="text">
        <input type="button" value="猜" id="guess">
        <br>
        <span>您已經(jīng)猜的次數(shù)：</span>
        <span id="count">0</span>
        <br>
        結(jié)果：<span class="c1"></span>
        <br>
        <br>
        <input type="button" value="重新開始游戲" id="reBu">
    </div>
</body>
<script>
    var text = document.querySelector("#text");//獲取輸入元素
    var count = document.querySelector("#count");//獲取次數(shù)元素
    var result = document.querySelector(".c1");//獲取結(jié)果元素
    var guessBu = document.querySelector("#guess");//獲取“猜”按鈕元素
    var reBu = document.querySelector("#reBu");//獲取“重新開始”按鈕元素
    var guessNumber = Math.floor(Math.random()*100)+1;//生成隨機(jī)數(shù)
    var sum = 0;//猜的總次數(shù)
    guessBu.onclick = function(){ //給“猜”按鈕綁定點(diǎn)擊功能
        sum++;
        count.innerHTML = sum;
        var userGuess = parseInt(text.value);//獲取輸入的數(shù)字
        if(userGuess > guessNumber){ //如果輸入大于系統(tǒng)生成數(shù)字
            result.innerHTML = "很遺憾，您猜大了！";
            result.style.color = "red"; //調(diào)正顏色為紅色
        }else if(userGuess < guessNumber){//如果輸入小于系統(tǒng)生成數(shù)字
            result.innerHTML = "很遺憾，您猜小了！";
            result.style.color = "red";
        }else { //輸入等于系統(tǒng)生成數(shù)字
            result.className = "c2";
            result.innerHTML = "恭喜您，您猜對(duì)了！";
            result.style.color = "green";//調(diào)整顏色為綠色
        }
    }
    reBu.onclick = function(){//給“重新開始”按鈕綁定點(diǎn)擊事件
        guessNumber = Math.floor(Math.random()*100)+1;//重新生成隨機(jī)數(shù)
        sum = 0;//猜的總次數(shù)置0
        count.innerHTML = sum;//將0填充
        result.innerHTML = "";//結(jié)果置空
        text.value = "";//輸入框置空
    }
</script>
</html>

以上就是基于JS制作一個(gè)網(wǎng)頁版的猜數(shù)字小游戲的詳細(xì)內(nèi)容，更多關(guān)于JS猜數(shù)字游戲的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: