• 💂 個(gè)人網(wǎng)站:【 海擁】【摸魚小游戲】
• 🤟 風(fēng)趣幽默的人工智能學(xué)習(xí)網(wǎng)站：👉人工智能
• 💅 想尋找共同學(xué)習(xí)交流的小伙伴，請點(diǎn)擊【全棧技術(shù)交流群】
• 💬 免費(fèi)且實(shí)用的計(jì)算機(jī)相關(guān)知識題庫：👉進(jìn)來逛逛

給大家安利一個(gè)免費(fèi)且實(shí)用的前端刷題（面經(jīng)大全）網(wǎng)站，👉點(diǎn)擊跳轉(zhuǎn)到網(wǎng)站。

博主前些天發(fā)現(xiàn)了一個(gè)巨牛的人工智能學(xué)習(xí)網(wǎng)站，通俗易懂，風(fēng)趣幽默，忍不住也分享一下給大家，👉點(diǎn)擊跳轉(zhuǎn)到網(wǎng)站。

直接跳到末尾 去評論區(qū)領(lǐng)書

游戲可以通過這個(gè)鏈接進(jìn)入 👉https://haiyong.site/moyu/shitoujiandaobu
代碼我已經(jīng)放在GitHub上了，歡迎來取，順帶給個(gè)星星吧👇
https://github.com/wanghao221/moyu

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

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

在我制作的 HTML 中：

• playerChoiceImg
• playerChoiceTxt
• computerChoiceImg
• computerChoiceTxt

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

然后創(chuàng)建了一個(gè)points變量，它將存儲每個(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í)說我給這些對象一個(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 語句：

如果按鈕本身有“石頭”文字，那么會在playerChoiceTxt中顯示“石頭”，同時(shí)將playerChoiceImg的圖像源更改為存儲在對象中的圖像源，其他 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í)長。

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

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

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

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 個(gè)分，如果是，則將這些點(diǎn)重置為其初始值。

嗯……大概就是這樣，如果大家有任何問題/建議/評論，請隨時(shí)與我聯(lián)系。

代碼我已經(jīng)放在GitHub上了，歡迎來取，順帶給個(gè)星星吧👇

https://github.com/wanghao221/moyu

🥇 評論區(qū)抽粉絲送書啦

💌抽獎(jiǎng)鏈接：https://haiyong.site/post/2fb89390.html💌

《Vue.js全家桶零基礎(chǔ)入門到進(jìn)階項(xiàng)目實(shí)戰(zhàn)》

【內(nèi)容簡介】

Vue.js 是一套構(gòu)建用戶界面的漸進(jìn)式框架，本書旨在幫助讀者全面掌握 Vue.js 全家桶技術(shù)和單頁面前后端分離項(xiàng)目開發(fā)，理解 MVVM 框架思想，讓前端和后端開發(fā)人員快速精通 Vue.js 全家桶技術(shù)。
　　本書貫穿入門準(zhǔn)備實(shí)操、基礎(chǔ)核心案例、中級進(jìn)階實(shí)戰(zhàn)、綜合進(jìn)階項(xiàng)目進(jìn)行講解，循序漸進(jìn)、環(huán)環(huán)相扣，通俗易懂，并分析為什么這樣使用，讓你知其所以然。包含的主要技術(shù)：NPM/CNPM、VS Code、Vue.js、 MVVM、Axios、Vue Router、webpack、ECMAScript 6、Vue Loader、Vue CLI、Element UI、Vuex、 Mock.js、Easy Mock、ECharts 、Promise、攔截器、組件通信、跨域問題、上線部署等。
　　本書適合有 HTML、CSS、JavaScript 基礎(chǔ)的 Vue.js 零基礎(chǔ)小白、前端開發(fā)人員、后端開發(fā)人員。同時(shí)，也適合以下人員閱讀：在校生，需要掌握流行的新技術(shù)，做到與職場同步；在職人員，工作中需要學(xué)習(xí)使用Vue；有基礎(chǔ)學(xué)員，需要系統(tǒng)、全面、高效使用 Vue 技術(shù)。

也有不想靠抽，想自己買的同學(xué)可以參考下面的鏈接

京東自營購買鏈接：

《Vue.js全家桶零基礎(chǔ)入門到進(jìn)階項(xiàng)目實(shí)戰(zhàn)》- 京東圖書

當(dāng)當(dāng)自營購買鏈接：

《Vue.js全家桶零基礎(chǔ)入門到進(jìn)階項(xiàng)目實(shí)戰(zhàn)》- 當(dāng)當(dāng)圖書

📣 注意：

大家點(diǎn)贊關(guān)注，兩天后也就是 4月2日 從參與抽獎(jiǎng)的同學(xué)中抽取三位送書

🌊 面試題庫：Java、Python、前端核心知識點(diǎn)大全和面試真題資料
🌊 辦公用品：精品PPT模板幾千套，簡歷模板一千多套
🌊 學(xué)習(xí)資料：2300套PHP建站源碼，微信小程序入門資料

回復(fù)【資源】可獲取上面的資料👇🏻👇🏻👇🏻

總結(jié)

以上是生活随笔為你收集整理的基于 HTML+CSS+JS 的石头剪刀布游戏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。