HTML+JS實(shí)現(xiàn)猜拳游戲的示例代碼

更新時(shí)間：2022年04月01日 08:35:10 作者：海擁

這篇文章主要為大家詳細(xì)介紹了如何利用HTML+CSS+JS編寫一個(gè)猜拳游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

效果圖

游戲可以通過這個(gè)鏈接進(jìn)入

關(guān)于JS構(gòu)建過程

首先，我創(chuàng)建了一個(gè)對(duì)象，其中包含每種可能性的文本格式（石頭、紙、剪刀），然后將圖像源也添加到該對(duì)象中。

在我制作的 HTML 中：

playerChoiceImg
playerChoiceTxt
computerChoiceImg
computerChoiceTxt

能夠修改其中的每個(gè)內(nèi)容。

然后創(chuàng)建了一個(gè)points變量，它將存儲(chǔ)每個(gè)玩家（玩家和計(jì)算機(jī)）的分?jǐn)?shù)。

之后，我需要一個(gè)介于 1 和 3 之間的隨機(jī)生成的數(shù)字來指示計(jì)算機(jī)的選擇。

// 變量
const choices = [{
        id: 1,
        name: "石頭",
        image: "./img/rock.png"
    },{
        id: 2,
        name: "布",
        image: "./img/paper.png"
    },{
        id: 3,
        name: "剪刀",
        image: "./img/scissors.png"
    }]

let playerPoints = document.querySelector(".playerPoints")
let computerPoints = document.querySelector(".computerPoints")
let playerChoiceImg = document.querySelector("#playerChoiceImg")
let playerChoiceTxt = document.querySelector("#playerChoiceTxt")
let computerChoiceImg = document.querySelector("#computerChoiceImg")
let computerChoiceTxt = document.querySelector("#computerChoiceTxt")
let buttons = document.querySelectorAll(".btn")
let points = [0, 0]
let randomNumber;

老實(shí)說我給這些對(duì)象一個(gè)ID，但沒有在項(xiàng)目中使用它們。我只是在選擇時(shí)使用了每個(gè)索引。

添加事件監(jiān)聽器

這里我使用 forEach() 方法將事件監(jiān)聽器附加到按鈕上。

這個(gè)事件監(jiān)聽器將完成大部分工作。

// 事件監(jiān)聽
buttons.forEach((button) => {
    button.addEventListener("click", () => {
        if (button.textContent === "石頭") {
            playerChoiceImg.src = choices[0].image;
            playerChoiceTxt.textContent = choices[0].name;
        } else if (button.textContent === "布") {
            playerChoiceImg.src = choices[1].image;
            playerChoiceTxt.textContent = choices[1].name;
        } else if (button.textContent === "剪刀") {
            playerChoiceImg.src = choices[2].image;
            playerChoiceTxt.textContent = choices[2].name;
        }
        getComputerChoice();
        console.log(points);
    })
})

正如大家在上面代碼中看到的那樣，我使用 if-else 語句以及根據(jù)按鈕的 textContent 來定義哪個(gè)按鈕執(zhí)行什么操作。

if-else 語句：

如果按鈕本身有“石頭”文字，那么會(huì)在playerChoiceTxt中顯示“石頭”，同時(shí)將playerChoiceImg的圖像源更改為存儲(chǔ)在對(duì)象中的圖像源，其他 2 個(gè)也是如此。

之后，我創(chuàng)建了計(jì)算機(jī)的選擇功能，如下所示：

// 選擇功能
function getComputerChoice() {
    computerChoiceImg.src = "./img/gif.gif"
    setTimeout(() => {
        randomNumber = Math.floor(Math.random() * 3);
        computerChoiceImg.src = choices[randomNumber].image;
        computerChoiceTxt.textContent = choices[randomNumber].name;
        gameRules();
        playerPoints.textContent = points[0];
        computerPoints.textContent = points[1];
        whoWon();
    }, 1000);
}

1.我用石頭、剪紙和剪刀的 3 幅圖創(chuàng)建了一個(gè)循環(huán) gif。

2.然后添加了一個(gè)setTimeout，它負(fù)責(zé)動(dòng)畫的時(shí)長(zhǎng)。

3.在里面我讓函數(shù)創(chuàng)建一個(gè)介于 0-2 之間的隨機(jī)數(shù)，這是選擇對(duì)象中的元素編號(hào)，這將指示計(jì)算機(jī)的選擇。

4.將文本和圖像內(nèi)容更改為所選對(duì)象元素的名稱和圖像源。

5.然后運(yùn)行 ??gameRules() 函數(shù)（我們稍后會(huì)談到）。

6.更新了每個(gè)玩家點(diǎn)數(shù)指示器的文本內(nèi)容。

7.檢查每個(gè)函數(shù)調(diào)用的分?jǐn)?shù)，以檢查是否有人獲勝。（whoWon() 函數(shù)）

函數(shù) gameRules()

function gameRules() {
    if (playerChoiceTxt.textContent === choices[0].name && computerChoiceTxt.textContent === choices[1].name) {
        points[1]++;
    } else if (playerChoiceTxt.textContent === choices[1].name && computerChoiceTxt.textContent === choices[2].name) {
        points[1]++;
    } else if (playerChoiceTxt.textContent === choices[2].name && computerChoiceTxt.textContent === choices[0].name) {
        points[1]++;
    } else if (playerChoiceTxt.textContent === computerChoiceTxt.textContent) {
        console.log("draw");
    } else {
        points[0]++;
    }
}

這個(gè)函數(shù)檢查玩家的選擇并檢查計(jì)算機(jī)選擇是否可以戰(zhàn)勝它。我已經(jīng)根據(jù)游戲規(guī)則設(shè)置了這些 if-else 語句。如果計(jì)算機(jī)贏了，則計(jì)算機(jī)的分?jǐn)?shù)加 1，否則玩家的分?jǐn)?shù)加 1。

函數(shù) whoWon()

又是 if-else 語句

function whoWon() {
    if (points[0] === 10) {
        alert("你干掉了AI成功取得勝利!")
        points = [0, 0];
    } else if (points[1] === 10) {
        alert("你被人工智能打敗了!")
        points = [0, 0];
    }
}

最后只要檢查點(diǎn)數(shù)組是否有人已經(jīng)達(dá)到 10 分，如果是，則將這些點(diǎn)重置為其初始值。

完整代碼

以上就是HTML+JS實(shí)現(xiàn)猜拳游戲的示例代碼的詳細(xì)內(nèi)容，更多關(guān)于JS猜拳的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: