文章目录
- 1.设计来源
-
- [1.1 主界面](#1.1 主界面)
- [1.2 皮肤风格](#1.2 皮肤风格)
- [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>
源码下载
万套模板，程序开发，在线开发，在线沟通
--------------- 业精于勤，荒于嬉 ---------------
--------------- 行成于思，毁于随 ---------------
💢 关注博主 带你实现畅游前后端
🏰 加入社区 带你体验马航不孤单
💯 神秘个人简介 带你体验不一样得介绍
💘 为爱表白 为你那个TA，体验别致的浪漫惊喜
🎀 酷炫邀请函 带你体验高大上得邀请
① 🉑提供云服务部署 （有自己的阿里云）；
② 🉑提供前端、后端、应用程序、H5、小程序、公众号、大作业等相关业务；
如🈶合作请联系我，期待您的联系。
注 ：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。
亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏 ，如 🈶 问题请 留言（私信或评论），博主看见后一定及时给您答复，💌💌💌
原文地址：https://blog.csdn.net/weixin_43151418/article/details/143798520（防止抄袭，原文地址不可删除）