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

HTML5+CSS+JavaScript剪子石头布游戏

news 2026/4/3 11:25:31

HTML5+CSS+JavaScript剪子石头布游戏

用HTML5+CSS+JavaScript剪子石头布游戏实现剪子石头布游戏，游戏有成绩计数，人、机输赢情况，及平局情况。

✂代表剪刀，▉代表石头，▓ 代表布，给出人机双方的出拳情况

游戏规则                                          

剪刀胜布：剪刀可以剪断布。

石头胜剪刀：石头可以砸坏剪刀。

布胜石头：布可以包住石头。

先看运行效果图：

源码如下：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>剪子石头布游戏</title><style>body {font-family: Arial, sans-serif;text-align: center;background-color: #f0f0f0;}.container {margin-top: 50px;}.choices button {width: 80px; /* 设置按钮宽度 */  height: 50px; /* 设置按钮高度 */     font-size: 20px;padding: 10px 20px;margin: 10px;cursor: pointer;}.result {font-size: 24px;margin-top: 20px;}.scoreboard {margin-top: 30px;font-size: 20px;}</style>
</head>
<body><div class="container"><h1>剪子石头布游戏</h1><div class="choices"><button onclick="playGame('✂️')">✂️</button><button onclick="playGame('▉')">▉</button><button onclick="playGame('▓')">▓</button></div><div class="result"><p id="resultText">请选择您的出拳</p><p id="Choice">出拳情况: </p></div><div class="scoreboard"><p>玩家胜利: <span id="playerWins">0</span>  ； 电脑胜利: <span id="computerWins">0</span>  ； 平局: <span id="ties">0</span> </p></div></div><script>let playerWins = 0;let computerWins = 0;let ties = 0;function playGame(playerChoice) {const choices = ['✂️', '▉', '▓'];const computerChoice = choices[Math.floor(Math.random() * choices.length)];document.getElementById('Choice').textContent = `玩家出拳: ${playerChoice}  ；电脑出拳: ${computerChoice}`;let result = '';if (playerChoice === computerChoice) {result = '平局!';ties++;} else if ((playerChoice === '✂️' && computerChoice === '▓') ||(playerChoice === '▉' && computerChoice === '✂️') ||(playerChoice === '▓' && computerChoice === '▉')) {result = '你赢了!';playerWins++;} else {result = '电脑赢了!';computerWins++;}document.getElementById('resultText').textContent = result;document.getElementById('playerWins').textContent = playerWins;document.getElementById('computerWins').textContent = computerWins;document.getElementById('ties').textContent = ties;}</script>
</body>
</html>

相关文章：

HTML5+CSS+JavaScript剪子石头布游戏

HTML5CSSJavaScript剪子石头布游戏 用HTML5CSSJavaScript剪子石头布游戏实现剪子石头布游戏&#xff0c;游戏有成绩计数&#xff0c;人、机输赢情况&#xff0c;及平局情况。 ✂代表剪刀&#xff0c;▉代表石头&#xff0c;▓ 代表布&#xff0c;给出人机双方的出拳情况 游戏…...

编程日记 2024/10/4 11:09:31

Flask-3

文章目录 ORMFlask-SQLAlchemySQLAlchemy中的session对象数据库连接设置常用的SQLAlchemy字段类型常用的SQLAlchemy列约束选项 数据库基本操作模型类定义 数据表操作创建和删除表 数据操作基本查询SQLAlchemy常用的查询过滤器SQLAlchemy常用的查询结果方法多条件查询分页器聚合…...

编程日记 2024/10/4 11:08:30

Redis的基本使用

简介 传统的数据库是 关系数据库&#xff0c;但是Redis是键值对数据库传统的数据库是基于 磁盘存储的&#xff0c;但是Redis是基于 内存存储的 基于内存&#xff0c;读写性能更高内存是不大的&#xff0c;只能存储热点信息 安装 绿色软件&#xff0c;安装即可使用 安装服务 手…...

编程日记 2024/10/4 11:06:28

[241004] Linux 系统中配置文件的区别 | VirtualBox 7.1.2 发布，修复多项问题并提升性能

目录 Linux 系统中 /etc/profile, ~/.bash_profile, ~/.profile, ~/.bashrc 等配置文件的区别一、配置文件类型二、配置文件作用三、交互式登录 Shell 和非登录 Shell交互式登录 shell交互式非登录 shell 四、配置文件加载顺序五、~/.bash_profile 和 ~/.bashrc 的区别 Virtual…...

编程日记 2024/10/4 10:59:22

hbuilderx+uniapp+Android宠物用品商城领养服务系统的设计与实现 微信小程序沙箱支付

目录 项目介绍支持以下技术栈&#xff1a;具体实现截图HBuilderXuniappmysql数据库与主流编程语言java类核心代码部分展示登录的业务流程的顺序是&#xff1a;数据库设计性能分析操作可行性技术可行性系统安全性数据完整性软件测试详细视频演示源码获取方式 项目介绍 顾客 领养…...

编程日记 2024/10/4 10:55:17

SVN 迁移到 GIT，并保留提交记录

1&#xff09;svn账号与git账号映射 创建 user.txt &#xff0c;格式如下&#xff0c;user.txt 放置在git base here 所选目录下即可 schacon Scott Chacon <schacongeemail.com> selse Someo Nelse <selsegeemail.com> 为了获得 SVN 使用的作者名字列表&#xf…...

编程日记 2024/10/4 10:53:15

【数据结构与算法】LeetCode：堆和快排

文章目录 LeetCode&#xff1a;堆和快排排序数组数组中的第K个最大元素 &#xff08;Hot 100&#xff09;前 K 个高频元素&#xff08;Hot 100&#xff09;数据流的中位数&#xff08;Hot 100&#xff09; LeetCode&#xff1a;堆和快排 排序数组 排序数组 双向切分实现快排…...

编程日记 2024/10/4 10:51:12

文档大师：打造一站式 Word 报告解决方案

前言 在政府、医院、银行、财务以及销售等领域&#xff0c;常常需要创建各种报告文件来展开工作汇报&#xff0c;譬如季度销售报告、年度总结报告、体检报告和保险合同等。在没有报表工具支持之前&#xff0c;这类报告主要通过 Word 制作&#xff0c;费时费力且难以维护&#…...

编程日记 2024/10/4 10:50:11

Python 数字专题：全方位解析整数

目录 1. 引言 2. 整数的基本概念 2.1 定义 2.2 整数的表示 2.3 创建整数 3. 整数的基本操作 3.1 算术运算 3.2 比较运算 3.3 位运算 4. 内置函数与方法 4.1 int() 函数 4.2 abs() 函数 4.3 pow() 函数 5. 整数的性能优化 5.1 大整数的处理 5.2 使用 numpy 6. 应…...

编程日记 2024/10/4 10:49:09

IP协议报文

一.IP协议报头结构 二.IP协议报头拆解 1.4位版本 实际上只有两个取值&#xff0c;分别是4和6&#xff0c;4代表的是IPv4&#xff0c;6代表的是IPv6。 2.4位首部长度 IP协议报头的长度也是边长的&#xff0c;单位是*4&#xff0c;这里表示的大小为0~15&#xff0c;当数值为1…...

编程日记 2024/10/4 10:48:08

【分布式微服务云原生】掌握分布式缓存：Redis与Memcached的深入解析与实战指南

掌握分布式缓存&#xff1a;Redis与Memcached的深入解析与实战指南 摘要&#xff1a; 本文深入探讨了分布式缓存在现代分布式系统中的重要性&#xff0c;详细分析了Redis和Memcached两种主流的分布式缓存解决方案的原理和使用场景。文章不仅提供了核心技术的深入解析&#xff…...

编程日记 2024/10/4 10:47:07

计算机毕业设计 基于Python的智能文献管理系统的设计与实现 Python+Django+Vue 前后端分离 附源码 讲解 文档

&#x1f34a;作者&#xff1a;计算机编程-吉哥 &#x1f34a;简介&#xff1a;专业从事JavaWeb程序开发&#xff0c;微信小程序开发&#xff0c;定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事&#xff0c;生活就是快乐的。 &#x1f34a;心愿&#xff1a;点…...

编程日记 2024/10/4 10:45:06

如何查看NVIDIA Container Toolkit是否配置成功

要确认 NVIDIA Container Toolkit 是否已成功配置&#xff0c;可以按照以下步骤进行检查&#xff1a; 1.检查 NVIDIA 驱动程序 首先&#xff0c;确保你的系统已经正确安装了 NVIDIA 驱动程序&#xff0c;并且可以识别你的 GPU。你可以使用 nvidia-smi 命令来进行检查&#xf…...

编程日记 2024/10/4 10:42:02

python全栈学习记录（二十一）类的继承、派生、组合

类的继承、派生、组合 文章目录 类的继承、派生、组合一、类的继承二、派生三、组合 一、类的继承 继承是一种新建类的方式&#xff0c;新建的类称为子类&#xff0c;被继承的类称为父类。 继承的特性是&#xff1a;子类会遗传父类的属性&#xff08;继承是类与类之间的关系&a…...

编程日记 2024/10/4 10:39:00

Go语言实现长连接并发框架 - 任务执行流

文章目录 前言接口结构体接口实现项目地址最后 前言 你好&#xff0c;我是醉墨居士&#xff0c;上篇博客中我们实现了客户端的请求的实现&#xff0c;接下来我们要去实现对请求任务的处理&#xff0c;我们需要定义任务执行的流程 接口 trait/task.go type TaskFunc interfa…...

编程日记 2024/10/4 10:36:58

Flutter与原生代码通信

文章目录 1. 知识回顾2. 示例代码3. 经验总结我们在上一章回中介绍了通道相关的内容，本章回中将介绍其中的一种通道：MethodChannnel.闲话休提，让我们一起Talk Flutter吧。 1. 知识回顾 我们在上一章回中介绍了通道的概念和作用，并且提到了通道有不同的类型，本章回将其中一…...

编程日记 2024/10/4 10:35:57

每日读则推(三)

n.(事件的)发生地点,(活动的)场所 n.雄性大园丁鸟 n.多细枝的,苗条的 v.放大,扩大(声音);增强,加强 Male great bowerbirds build twiggy concert venues that amplify their raucous songs and n.园丁鸟 …...

编程日记 2024/10/4 10:33:55

Android Studio | 无法识别Icons.Default.Spa中的Spa

编写底部导航栏&#xff0c;涉及到Spa部分出现报红&#xff1a; 解决办法&#xff1a;在build.gradle.kts中引入图标依赖 dependencies {implementation "androidx.compose.material:material-icons-extended:<version>" }...

编程日记 2024/10/4 10:30:52

SKD4(note上)

微软提供了图形的界面API&#xff0c;叫GDI 如果你想画某个窗口&#xff0c;你必须拿到此窗口的HDC #include <windows.h> #include<tchar.h> #include <stdio.h> #include <strsafe.h> #include <string>/*鼠标消息 * 键盘消息 * Onkeydown * …...

编程日记 2024/10/4 10:26:47

rabbitmq----数据管理模块

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 交换机数据管理管理的字段持久化管理类内存管理类申明交换机删除交换机获取指定交换机 队列数据管理管理的字段持久化管理类内存管理类申明/删除/获取指定队列获取所…...

编程日记 2024/10/4 10:25:46

业绩大增37%，订单超210亿！博泰车联财报释放强信号，龙头未来可期

日前&#xff0c;博泰车联交出了上市后的首份亮眼「成绩单」。财报显示&#xff0c;博泰车联2025年全年实现营收35.1亿元&#xff0c;较上年大幅增长37.26%&#xff1b;过去的几年间&#xff0c;博泰车联的营收规模实现爆发式增长&#xff0c;年复合增长率达44.9%。这种高增长态…...

编程新知 2026/4/3 10:53:34

Phi-4-mini-reasoning效果对比：与Qwen-Math、DeepSeek-Math在逻辑题上的表现差异

Phi-4-mini-reasoning效果对比&#xff1a;与Qwen-Math、DeepSeek-Math在逻辑题上的表现差异 1. 模型介绍与测试背景 1.1 参测模型概览 本次对比测试聚焦三个专门针对数学和逻辑推理优化的模型&#xff1a; Phi-4-mini-reasoning&#xff1a;微软推出的轻量级推理专用模型&…...

编程新知 2026/4/3 10:47:32

Figo人机交互中“疯态”边界的引导与驯化————“可控赛博疯态”动态机制与实现路径研究

人机交互中“疯态”边界的引导与驯化 ——“可控赛博疯态”动态机制与实现路径研究 作者&#xff1a;Figo Cheung &#xff06; Figo AI team 摘要&#xff1a;随着生成式人工智能技术的迭代升级&#xff0c;人机交互中涌现出一种突破常规逻辑、具有高度创造性与情感张力的“赛…...

编程新知 2026/4/3 10:03:01

如何快速掌握GBFR Logs：终极《碧蓝幻想：Relink》战斗数据监控指南

如何快速掌握GBFR Logs&#xff1a;终极《碧蓝幻想&#xff1a;Relink》战斗数据监控指南 【免费下载链接】gbfr-logs GBFR Logs lets you track damage statistics with a nice overlay DPS meter for Granblue Fantasy: Relink. 项目地址: https://gitcode.com/gh_mirrors/…...

编程新知 2026/4/3 10:03:01

OpenClaw技能扩展实战：用Phi-3-vision自动生成图文周报

OpenClaw技能扩展实战&#xff1a;用Phi-3-vision自动生成图文周报 1. 为什么需要自动化周报 每周五下午&#xff0c;我的电脑桌面上总会堆满散乱的Excel表格、截图和零散的Markdown笔记。作为技术负责人&#xff0c;我需要将这些碎片信息整合成结构化的图文周报&#xff0c;…...

编程新知 2026/4/3 9:02:01

AIGlasses_for_navigation 的Java后端集成：SpringBoot微服务调用实战

AIGlasses_for_navigation 的Java后端集成&#xff1a;SpringBoot微服务调用实战 最近在做一个物流仓储的智能调度项目&#xff0c;里面用到了不少视觉导航的AGV小车。为了让这些小车更“聪明”&#xff0c;我们尝试引入了一套叫AIGlasses_for_navigation的视觉导航模型。这东…...

编程新知 2026/4/3 8:21:03

终极指南：Windows游戏控制器虚拟驱动ViGEmBus完全掌握

终极指南&#xff1a;Windows游戏控制器虚拟驱动ViGEmBus完全掌握 【免费下载链接】ViGEmBus Windows kernel-mode driver emulating well-known USB game controllers. 项目地址: https://gitcode.com/gh_mirrors/vi/ViGEmBus ViGEmBus是一款强大的Windows内核模式驱动…...

编程新知 2026/4/3 7:40:37

《常见三维CAD模型表示法》

表示法核心思想 / 定义数据结构 / 关键特点优点缺点CAD中的应用场景常见软件 / 文件格式B-rep (边界表示)通过精确记录物体的边界&#xff08;顶点、边、面&#xff09;及其拓扑关系&#xff08;邻接、归属&#xff09;来定义实体包含几何信息&#xff08;点坐标、曲线方程、曲…...

编程新知 2026/4/3 6:03:03

面试题杂记

1.问&#xff1a;react的Fabric实现原理答&#xff1a;实际上就是虚拟dom那一套东西&#xff0c;只不过换了个名词2.问&#xff1a;react的fiber架构实现原理答&#xff1a;在react15及以前的协调过程是基于栈&#xff08;stack-based&#xff09;的&#xff0c;缺点是一个组件…...

编程新知 2026/4/3 5:26:22

SecGPT-14B镜像免配置实战：开箱即用的网络安全大模型推理方案

SecGPT-14B镜像免配置实战&#xff1a;开箱即用的网络安全大模型推理方案 1. 为什么选择SecGPT-14B 在网络安全领域&#xff0c;专业知识的获取往往需要多年经验积累。SecGPT-14B作为一款专注于网络安全的大语言模型&#xff0c;能够为安全工程师、开发人员和IT运维人员提供即…...

编程新知 2026/4/3 5:24:19