JavaScript实现的石头剪刀布游戏源码分享


Posted in Javascript onAugust 22, 2014

这个游戏主要设计到两点:

首先是胜负运算

由于石头剪刀布是循环性的
石头 杀 剪子
剪子 杀 布
布   杀  石头
石头  杀  剪子
。。。
根据以上特点找出规律,写出算法即可。

让电脑随机

这点比较容易,前面我有写过文章介绍,不明白的童鞋可以去看看。

随机刷屏

其实这个效果不是游戏的关键性,但为了看起来更加互动,好玩,我就给加上了。这里用到了一个取模算法,根据余数去循环显示即可达到效果。

界面截图

JavaScript实现的石头剪刀布游戏源码分享

最后上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>JS写的石头剪子布游戏 - 琼台博客</title>
		<style type="text/css">
			div{margin:20px auto;padding:10px;border:2px solid #999;width:200px;background:#ffe;}
			div#cu{font-weight:bold;font-size:30px;height:40px;color:red;}
			div#la{border:none;background:none;display:none;}
			span{color:red;font-weight:bold;}
		</style>
		<script type="text/javascript">
			var se = null,time=20,you=0,arr=new Array('石头','抹布','剪子');
			function p(n){
				you = n;
				document.getElementById('you').innerHTML=s(n);
				document.getElementById('st').disabled=true;
				document.getElementById('mb').disabled=true;
				document.getElementById('jz').disabled=true;
				document.getElementById('cu').innerHTML = '...';
				se = setInterval('t()',50);
			}
			function agin(){
				document.getElementById('st').disabled=false;
				document.getElementById('mb').disabled=false;
				document.getElementById('jz').disabled=false;		
				document.getElementById('la').style.display = 'none';
				document.getElementById('you').innerHTML = '';		
				document.getElementById('pc').innerHTML = '';
				document.getElementById('cu').innerHTML = '';
				document.getElementById('you').innerHTML= '请选择';		
			}
			function bt(){
				var pc = Math.floor(Math.random() * 3 + 1);
				document.getElementById('pc').innerHTML = s(pc);
				var str='';
				if(pc==you){
					str += '平局';	
				}else{
					var b = pc-you;
					if(b>0){
						if(b==1){
							str += '电脑赢';	
						}else{
							str += '你赢啦';	
						}				
					}else{
						b = b*-1;	
						if(b==1){
							str += '你赢啦';	
						}else{
							str += '电脑赢';	
						}	
					}		
				}
				document.getElementById('la').style.display = 'block';
				document.getElementById('cu').innerHTML = str;
			}
			function t(){
				if(time>0){
					document.getElementById('pc').innerHTML = arr[time%3];
					time--;
				}else{
					clearInterval(se);
					se = null;
					time = 20;
					bt();
				}
			}
			function s(n){
				if(n==1){
					return '石头';	
				}else if(n==2){
					return '抹布';	
				}else{
					return '剪子';	
				}
			}
		</script>
	</head>
	<body>
		<div>
			<p>你出什么?<span id="you">请选择</span></p>
			<p><button id="st" onclick="p(1);">石头</button></p>
			<p><button id="mb" onclick="p(2);">抹布</button></p>
			<p><button id="jz" onclick="p(3);">剪子</button></p>
		</div>
		<div>
			<p>电脑出?</p>
			<span style="" id="pc"></span>
		</div>
		<div id="cu"></div>
		<div id="la"><button id="agin" onclick="agin()">再来一次</button></div>
	</body>
</html>
Javascript 相关文章推荐
JQuery之拖拽插件实现代码
Apr 14 Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
vue2.0实战之基础入门(1)
Mar 27 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 Javascript
RxJS在TypeScript中的简单使用详解
Apr 13 Javascript
JavaScript嵌入百度地图API的最详细方法
Apr 16 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 #Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 #Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
Aug 22 #Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
Aug 22 #Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 #Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 #Javascript
js中实现多态采用和继承类似的方法
Aug 22 #Javascript
You might like
一个MYSQL操作类
2006/11/16 PHP
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
php的sso单点登录实现方法
2015/01/08 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
jquery动画1.加载指示器
2012/08/24 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
2014/06/23 Javascript
js对象的复制继承实例
2015/01/10 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
校长岗位职责
2013/11/26 职场文书
实习求职信
2013/12/01 职场文书
社区工作者先进事迹
2014/01/18 职场文书
年会活动策划方案
2014/01/23 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
公务员年终个人总结
2015/02/12 职场文书
小学新课改心得体会
2016/01/22 职场文书
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android
详解CSS3浏览器兼容
2022/12/24 HTML / CSS