HTML+JS实现猜拳游戏的示例代码

更新时间：2022年04月01日 08:35:10 作者：海拥

这篇文章主要为大家详细介绍了如何利用HTML+CSS+JS编写一个猜拳游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

效果图

游戏可以通过这个链接进入

关于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 分，如果是，则将这些点重置为其初始值。

完整代码

以上就是HTML+JS实现猜拳游戏的示例代码的详细内容，更多关于JS猜拳的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

JS实现水平移动与垂直移动动画
这篇文章主要为大家详细介绍了JS实现水平移动与垂直移动动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
input+select(multiple) 实现下拉框输入值
昨天做一个网站时，需要实现下拉框能够输入，从功能上讲是要实现用户在文本框输入值时，能够从后读出数据弹出下拉选项
2009-05-05
JavaScript 保存数组到Cookie的代码
大部分的浏览器一个网站只支持保存20个Cookie，超过20个Cookie，旧的Cookie会被最新的Cookie代替。那么如果要有超过20个Cookie要保存只能将Cookie存为数组然后保存到Cookie。
2010-04-04
JS实现页面跳转与刷新的方法汇总
这篇文章主要给大家介绍了关于JS实现页面跳转与刷新的方法，文中通过示例代码介绍的非常详细，对大家学习或者使用JS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-08-08
使用Chart.js图表库制作漂亮的响应式表单
数据包围着我们。虽然搜索引擎和其他应用都对基于文本方式表示的数据偏爱有加，但人们发现可视化是更容易理解的一种方式。今年初，SitePoint 发表了 Aurelio 的文章《 Chart.js简介》。在深入研究 Chart.js 的功能后，本文将会讲解这篇简介的一些重点。
2015-10-10
javascript 图片轮换函数化继承
一直让我困扰的是，我不知道如何去让这个效果自动播放，或者费了很多周折。这可能叫初始化。
2010-05-05
javascript 兼容鼠标滚轮事件
浏览地图时，使用鼠标滚轮来放大和缩小。即用到了滚轮事件。
2009-04-04
easyui-datagrid特殊字符不能显示的处理方法
下面小编就为大家带来一篇easyui-datagrid特殊字符不能显示的处理方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04
产制造追溯系统之通过微信小程序实现移动端报表平台
这篇文章主要介绍了产制造追溯系统-通过微信小程序实现移动端报表平台 ,本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-06-06
数组方法解决JS字符串连接性能问题有争议
大多数情况下，加法运算符是首选；如果用户主要使用IE6或7，并且字符串大小较大或数量较多时，那么数组技术就很值得。
2011-01-01