当前位置： 首页 > news >正文

HTML5实现剪刀石头布小游戏(附源码)

news 2026/1/31 19:27:26

在这里插入图片描述

在这里插入图片描述

文章目录

  • 1.设计来源
    • 1.1 主界面
    • 1.2 皮肤风格
    • 1.2 游戏中界面
  • 2.效果和源码
  • 源码下载
  • 万套模板，程序开发，在线开发，在线沟通

作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/143798520

HTML5实现剪刀石头布小游戏，石头剪刀布源码，全网最全小游戏源码，游戏界面酷炫，按键提示操作，该剪刀石头布游戏使用html5和jQuery制作，具有使用简单、响应式、可定制、速度快、有积分记录的特点。这个小游戏是一个人机对战游戏，用户可以选择剪刀、石头和布三种选项中的一个，然后电脑随机出剪刀、石头和布，获胜者加一分。石头剪子布，是一种猜拳游戏。起源于中国，然后传到日本、朝鲜等地，随着亚欧贸易的不断发展它传到了欧洲，到了近现代逐渐风靡世界。代码注释完整，书写规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。

1.设计来源

        HTML5开发小游戏系列，打造全网最全的小游戏源码聚集地，如果大家有想要实现的小游戏，可以文章末尾评论，博主到时候会为大家一一写上，实现你心中所想的小游戏。

------------>更多HTML小游戏源码：点击进入专栏

1.1 主界面

        游戏开始，可以通过点击下面三个石头剪刀布，选择自己出的，然后跟系统随机出的相比较，赢了的积一分，平局不计分，也可以点击清除分数，清除当前记录。

在这里插入图片描述

1.2 皮肤风格

  • 背景颜色随机切换，可以自定义。

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

1.2 游戏中界面

        游戏开始，可以通过点击下面三个石头剪刀布，选择自己出的，然后跟系统随机出的相比较，赢了的积一分，平局不计分，也可以点击清除分数，清除当前记录。

在这里插入图片描述

2.效果和源码

    这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。或者直接在这里 下载源码，如有其他技术问题，请私信博主，博主看到后第一时间回复。

<!--各行各业的模板源码，来自CSDN上的xcLeigh博客：https://blog.csdn.net/weixin_43151418/category_12107481.html-->
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="msapplication-tap-highlight" content="no"><title>剪刀石头补小游戏 - xcLeigh</title><link rel='stylesheet prefetch' href='css/font-awesome-4.7.0/css/font-awesome.min.css'><link rel="stylesheet" href="css/style.css">
</head>
<body ng-app="app" ng-controller="ctrl"><main class="column" style="background-image: {{b}}"><div style="font-size:3vmax; padding: 16px; letter-spacing: 10px; font-weight: bold; text-shadow: 5px 5px 5px #000000;">石头剪刀布小游戏</div><article class="column"><div class="flip-container" ng-class="{'flip-me': answered}"><div class="flipper"><div class="front"><div class="chip bg-light"><span class="fa fa-hand-spock-o fa-fw ghost"></span></div></div><div class="back"><div class="chip bg-light"><span class="fa fa-hand-{{splashIcon}}-o fa-fw"></span></div></div></div></div><div class="answers row around" ng-class="{'ghost': spocked}"><div class="column align-center"><div class="chip" ng-class="uiSetMoveClasses('rock', 1)" ng-click="uiPlay('rock')"><span class="fa fa-hand-rock-o fa-fw fa-2x"></span></div></div><div class="column align-center"><div class="chip" ng-class="uiSetMoveClasses('paper', 2)" ng-click="uiPlay('paper')"><span class="fa fa-hand-paper-o fa-fw fa-2x"></span></div></div><div class="column align-center"><div class="chip" ng-class="uiSetMoveClasses('scissors', 3)" ng-click="uiPlay('scissors')"><span class="fa fa-hand-scissors-o fa-fw fa-2x"></span></div></div></div><footer class="row around"><div><span class="ghost">自己分数</span><h1>{{score.me}}</h1></div><div><span class="aa" ng-click="clearMy()">清除分数</span></div><div><span class="ghost">系统分数</span><h1>{{score.spock}}</h1></div></footer></article><div class="message-wrap content {{answered}}" ng-class="{'show': answered}"><div class="message row align-center" ng-click="uiPlayAgain()" ng-class="{'bg-warning': spocked, 'bg-info': winner==='tie','bg-success': winner=='me','bg-alert': winner=='spock'}"><div class="text">{{message}}</div><div class="chip beacon-1"><span class="fa fa-3x fa-refresh"></span></div></div></div></main><script src="js/main.js"></script>
</body>
</html>

源码下载

HTML5实现剪刀石头布小游戏（源码） 点击下载
在这里插入图片描述

万套模板，程序开发，在线开发，在线沟通

  • 专业后端大佬在线沟通需求开发
  • 专业前端大佬在线沟通需求开发
  • 专业网站整套大佬在线沟通需求开发
  • 专业毕业设计大佬在线沟通需求开发
  • 专业大作业大佬在线沟通需求开发
  • 【优惠活动】专属定制，程序在线开发
--------------- 业精于勤，荒于嬉 ---------------

请添加图片描述

--------------- 行成于思，毁于随 ---------------

     💢 关注博主 带你实现畅游前后端

     🏰 加入社区 带你体验马航不孤单

     💯 神秘个人简介 带你体验不一样得介绍

     💘 为爱表白 为你那个TA，体验别致的浪漫惊喜

     🎀 酷炫邀请函 带你体验高大上得邀请

     ① 🉑提供云服务部署（有自己的阿里云）；
     ② 🉑提供前端、后端、应用程序、H5、小程序、公众号、大作业等相关业务；
     如🈶合作请联系我，期待您的联系。
    注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。

     亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请 留言（私信或评论），博主看见后一定及时给您答复，💌💌💌

原文地址：https://blog.csdn.net/weixin_43151418/article/details/143798520（防止抄袭，原文地址不可删除）

相关文章：

HTML5实现剪刀石头布小游戏(附源码)

文章目录 1.设计来源1.1 主界面1.2 皮肤风格1.2 游戏中界面 2.效果和源码源码下载万套模板&#xff0c;程序开发&#xff0c;在线开发&#xff0c;在线沟通 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/143798520 HTM…...

编程日记 2024/11/19 22:56:19

集群聊天服务器(3)muduo网络库

目录 基于muduo的客户端服务器编程 muduo只能装在linux中&#xff0c;依赖boost库 客户端并不需要高并发 基于muduo的客户端服务器编程 支持epoll线程池&#xff0c;muduo封装了线程池 而且还有完善的日志系统 使用muduo库代码非常固定&#xff0c;基本就只有chatserver的类名…...

编程日记 2024/11/19 22:54:17

解决在Ubuntu 20.04中使用PyCharm时无法输入中文的问题

解决在Ubuntu 20.04中使用PyCharm时无法输入中文的问题 要解决在Ubuntu 20.04中使用PyCharm时无法输入中文的问题&#xff0c;特别是当使用IBus作为输入法框架时&#xff0c;我们需要通过设置适当的环境变量来确保PyCharm可以正确调用IBus输入法。下面将详细说明原因及解决步骤…...

编程日记 2024/11/19 22:53:16

【jvm】HotSpot中方法区的演进

目录 1. 说明2. JDK1.6及以前3. JDK1.74. JDK1.8及以后 1. 说明 1.在HotSpot虚拟机中&#xff0c;方法区&#xff08;Method Area&#xff09;的演进是一个重要的内存管理优化过程。2.从JDK1.6到JDK1.8&#xff0c;HotSpot虚拟机中的方法区经历了从永久代到元空间的重大变化。…...

编程日记 2024/11/19 22:49:11

Win10/11 安装使用 Neo4j Community Edition

如果你下载的是 Neo4j Community Edition 的压缩包&#xff0c;意味着你需要手动解压并配置 Neo4j。以下是详细的使用步骤&#xff1a; 0. 下载压缩包 访问Neo4j官网&#xff0c;找到 Community Edition 版本并选择 4.x 或者 5.x 下载&#xff1a;https://neo4j.com/deployme…...

编程日记 2024/11/19 22:47:09

Ubuntu 22.04 上快速搭建 Samba 文件共享服务器

Samba 简介 Samba 是一个开源软件&#xff0c;它扮演着不同操作系统间沟通的桥梁。通过实现 SMB&#xff08;Server Message Block&#xff09;协议&#xff0c;Samba 让文件和打印服务在 Windows、Linux 和 macOS 之间自由流动。 以下是 Samba 的特点&#xff1a; 跨平台兼…...

编程日记 2024/11/19 22:46:07

JQuery 基础知识学习（详尽版）2024.11.17

一、jQuery简介及使用详解 1.1 jQuery简介 写更少的代码&#xff0c;做更多的事&#xff1b;jQuery可以做&#xff1a;HTML 元素选取 &#xff0c; HTML 元素操作 &#xff0c;CSS 操作 &#xff0c;HTML 事件函数 &#xff0c;JavaScript 特效和动画 &#xff0c;HTML DOM 遍…...

编程日记 2024/11/19 22:45:06

Spring Validation参数校验

Validation Validation是Spring提供的一个参数校验框架&#xff0c;使用预定义的注解完成参数校验 使用步骤 引入Spring Validation起步依赖在需要校验的参数所在的类上添加Validated注解在需要校验的参数前面加上Pattern注解 <!--参数校验依赖--><dependency>&l…...

编程日记 2024/11/19 22:42:02

高斯数据库Postgresql死锁和锁表解决方法

解决死锁进方法&#xff1a; 查询死锁进程列表 select * from pg_stat_activity where waiting‘t’ 发现有好几条挂起的记录&#xff0c;记录下所有或需要解锁的pid 解决死锁进程 select pg_cancel_backend(‘pid值’) 解决完后&#xff0c;刷新后测试&#xff0c;恢复正…...

编程日记 2024/11/19 22:41:01

【设计模式】模板方法模式 在java中的应用

设计模式&#xff1a; 设计模式是对软件设计中普遍存在&#xff08;反复出现&#xff09;的各种问题&#xff0c;所提出的解决方案。这个术语是由Erich Gamma等人在1995年的书《设计模式&#xff1a;可复用面向对象软件的基础》中首次引入的。设计模式可以加快开发过程&#x…...

编程日记 2024/11/19 22:38:56

PVE纵览-安装系统卡“Loading Driver”的快速解决方案

PVE纵览-安装系统卡“Loading Driver”的快速解决方案 文章目录 PVE纵览-安装系统卡“Loading Driver”的快速解决方案摘要通过引导参数解决PVE安装卡在“Loading Driver”问题官方解决方法 关键字&#xff1a; PVE、 显卡、 Loading、 Driver、 nomodeset 摘要 在虚拟机…...

编程日记 2024/11/19 22:37:54

Lua资料

Lua脚本语言 cheet sheet Lua & c Lua与C API交互全面解析 Lua语言&#xff1a;和C语言的交互 Lua进阶用法之Lua和C的接口设计 Lua C API 简介 C和Lua之间的相互调用 深入Lua&#xff1a;用户数据userdata 基本数据类型 之 UserData calling-lua-from-c/ Embedding Lua i…...

编程日记 2024/11/19 22:34:49

【C语言】值传递和地址传递

值传递 引用传递&#xff08;传地址&#xff0c;传引用&#xff09;的区别 传值&#xff0c;是把实参的值赋值给行参 &#xff0c;那么对行参的修改&#xff0c;不会影响实参的值。 传地址&#xff0c;是传值的一种特殊方式&#xff0c;只是他传递的是地址&#xff0c;不是普通…...

编程日记 2024/11/19 22:33:48

PyTorch 中使用自动求导计算梯度

使用 PyTorch 进行自动求导和梯度计算 在 PyTorch 中&#xff0c;张量的 requires_grad 属性决定了是否需要计算该张量的梯度。设置为 True 的张量会在计算过程中记录操作&#xff0c;以便在调用 .backward() 方法时自动计算梯度。通过构建计算图&#xff0c;PyTorch 能够有效…...

编程日记 2024/11/19 22:29:45

Oracle Instant Client 23.5安装配置完整教程

Oracle Instant Client 23.5安装配置完整教程 简介环境要求安装步骤1. 准备工作目录2. 下载Oracle Instant Client3. 解压Instant Client4. 安装依赖包5. 配置系统环境5.1 配置库文件路径5.2 配置环境变量 6. 配置Oracle钱包&#xff08;可选&#xff09; 验证安装常见问题解决…...

编程日记 2024/11/19 22:28:44

【jvm】方法区的理解

目录 1. 说明2. 方法区的演进3. 内部结构4. 作用5.内存管理 1. 说明 1.方法区用于存储已被虚拟机加载的类信息、常量、静态变量、即时编译器编译后的代码缓存等数据。它是各个线程共享的内存区域。2.尽管《Java虚拟机规范》中把方法区描述为堆的一个逻辑部分&#xff0c;但它却…...

编程日记 2024/11/19 22:26:41

ES-针对某个字段去重后-获取某个字段值的所有值

针对上面表的数据&#xff0c;现在想根据age分组&#xff0c;并获取每个分组后的name有哪些(去重后)。 select age, GROUP_CONCAT(DISTINCT(name)) from testtable group by age ; 结果&#xff1a; 如果想要增加排序&#xff1a; SELECT age, GROUP_CONCAT(DISTINCT name)…...

编程日记 2024/11/19 22:24:39

百度 2025届秋招提前批 文心一言大模型算法工程师

文章目录 个人情况一面/技术面 1h二面/技术面 1h三面/技术面 40min 个人情况 先说一下个人情况&#xff1a; 学校情况&#xff1a;211本中9硕&#xff0c;本硕学校都一般&#xff0c;本硕都是计算机科班&#xff0c;但研究方向并不是NLP&#xff0c;而是图表示学习论文情况&a…...

编程日记 2024/11/19 22:19:33

sglang 部署Qwen2VL7B，大模型部署，速度测试，深度学习

sglang 项目github仓库&#xff1a; https://github.com/sgl-project/sglang 项目说明书&#xff1a; https://sgl-project.github.io/start/install.html 资讯&#xff1a; https://github.com/sgl-project/sgl-learning-materials?tabreadme-ov-file#the-first-sglang…...

编程日记 2024/11/19 22:14:29

fastadmin操作数据库字段为json、查询遍历each、多级下拉、union、php密码设置、common常用函数的使用小技巧

数据库中遇到的操作 查询字段是json的某个值 //获取数据库中某个字段是json中得某个值&#xff0c;进行查询&#xff0c;goods是表中字段&#xff0c;brand_id是json中要查詢的字段。//数据类型一定要对应要不然查询不出来。$map[json_extract(goods, "$.brand_id")]…...

编程日记 2024/11/19 22:12:28

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

编程新知 2026/1/31 5:10:21

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

编程新知 2025/9/17 7:25:07

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/11/8 16:25:01

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

编程新知 2026/1/23 11:38:02

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

编程新知 2026/1/25 14:40:59

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

编程新知 2026/1/19 4:34:59

在golang中如何将已安装的依赖降级处理，比如：将 go-ansible/v2@v2.2.0 更换为 go-ansible/@v1.1.7

在 Go 项目中降级 go-ansible 从 v2.2.0 到 v1.1.7 具体步骤&#xff1a; 第一步&#xff1a; 修改 go.mod 文件 // 原 v2 版本声明 require github.com/apenella/go-ansible/v2 v2.2.0 替换为&#xff1a; // 改为 v…...

编程新知 2025/10/20 16:05:17

热门Chrome扩展程序存在明文传输风险，用户隐私安全受威胁

赛门铁克威胁猎手团队最新报告披露&#xff0c;数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据&#xff0c;严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能&#xff0c;但SEMR…...

编程新知 2026/1/28 16:00:47

webpack面试题

面试题&#xff1a;webpack介绍和简单使用 一、webpack&#xff08;模块化打包工具&#xff09;1. webpack是把项目当作一个整体&#xff0c;通过给定的一个主文件&#xff0c;webpack将从这个主文件开始找到你项目当中的所有依赖文件&#xff0c;使用loaders来处理它们&#x…...

编程新知 2025/10/19 1:38:36

写一个shell脚本，把局域网内，把能ping通的IP和不能ping通的IP分类，并保存到两个文本文件里

写一个shell脚本&#xff0c;把局域网内&#xff0c;把能ping通的IP和不能ping通的IP分类&#xff0c;并保存到两个文本文件里 脚本1 #!/bin/bash #定义变量 ip10.1.1 #循环去ping主机的IP for ((i1;i<10;i)) doping -c1 $ip.$i &>/dev/null[ $? -eq 0 ] &&am…...

编程新知 2025/11/23 13:02:26