• 💂 個人網站:【 海擁】【摸魚小游戲】
• 🤟 風趣幽默的人工智能學習網站：👉人工智能
• 💅 想尋找共同學習交流的小伙伴，請點擊【全棧技術交流群】
• 💬 免費且實用的計算機相關知識題庫：👉進來逛逛

給大家安利一個免費且實用的前端刷題（面經大全）網站，👉點擊跳轉到網站。

博主前些天發現了一個巨牛的人工智能學習網站，通俗易懂，風趣幽默，忍不住也分享一下給大家，👉點擊跳轉到網站。

直接跳到末尾 去評論區領書

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

關于（JS）構建過程：

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

在我制作的 HTML 中：

• playerChoiceImg
• playerChoiceTxt
• computerChoiceImg
• computerChoiceTxt

能夠修改其中的每個內容。

然后創建了一個points變量，它將存儲每個玩家（玩家和計算機）的分數。

之后，我需要一個介于 1 和 3 之間的隨機生成的數字來指示計算機的選擇。

// 變量 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;

老實說我給這些對象一個ID，但沒有在項目中使用它們。我只是在選擇時使用了每個索引。

添加事件監聽器：

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

這個事件監聽器將完成大部分工作。

// 事件監聽 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 語句以及根據按鈕的 textContent 來定義哪個按鈕執行什么操作。

if-else 語句：

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

之后，我創建了計算機的選擇功能，如下所示：

// 選擇功能 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 幅圖創建了一個循環 gif。

2.然后添加了一個setTimeout，它負責動畫的時長。

3.在里面我讓函數創建一個介于 0-2 之間的隨機數，這是選擇對象中的元素編號，這將指示計算機的選擇。

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

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

6.更新了每個玩家點數指示器的文本內容。

7.檢查每個函數調用的分數，以檢查是否有人獲勝。（whoWon() 函數）

函數 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]++;} }

這個函數檢查玩家的選擇并檢查計算機選擇是否可以戰勝它。我已經根據游戲規則設置了這些 if-else 語句。如果計算機贏了，則計算機的分數加 1，否則玩家的分數加 1。

函數 whoWon()

又是 if-else 語句

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

最后只要檢查點數組是否有人已經達到 10 個分，如果是，則將這些點重置為其初始值。

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

代碼我已經放在GitHub上了，歡迎來取，順帶給個星星吧👇

https://github.com/wanghao221/moyu

🥇 評論區抽粉絲送書啦

💌抽獎鏈接：https://haiyong.site/post/2fb89390.html💌

《Vue.js全家桶零基礎入門到進階項目實戰》

【內容簡介】

Vue.js 是一套構建用戶界面的漸進式框架，本書旨在幫助讀者全面掌握 Vue.js 全家桶技術和單頁面前后端分離項目開發，理解 MVVM 框架思想，讓前端和后端開發人員快速精通 Vue.js 全家桶技術。
　　本書貫穿入門準備實操、基礎核心案例、中級進階實戰、綜合進階項目進行講解，循序漸進、環環相扣，通俗易懂，并分析為什么這樣使用，讓你知其所以然。包含的主要技術：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 基礎的 Vue.js 零基礎小白、前端開發人員、后端開發人員。同時，也適合以下人員閱讀：在校生，需要掌握流行的新技術，做到與職場同步；在職人員，工作中需要學習使用Vue；有基礎學員，需要系統、全面、高效使用 Vue 技術。

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

京東自營購買鏈接：

《Vue.js全家桶零基礎入門到進階項目實戰》- 京東圖書

當當自營購買鏈接：

《Vue.js全家桶零基礎入門到進階項目實戰》- 當當圖書

📣 注意：

大家點贊關注，兩天后也就是 4月2日 從參與抽獎的同學中抽取三位送書

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

回復【資源】可獲取上面的資料👇🏻👇🏻👇🏻

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。