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 相关文章推荐
JS处理VBArray的函数使用说明
May 11 Javascript
Javascript实现的鼠标经过时播放声音
May 18 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
Javascript typeof与instanceof的区别
Oct 18 Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 Javascript
JS实现小球的弹性碰撞效果
Nov 11 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
vue实现购物车选择功能
Jan 10 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 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
php生成静态文件的多种方法分享
2012/07/17 PHP
PHP序列化操作方法分析
2016/09/28 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
JavaSript中变量的作用域闭包的深入理解
2014/05/12 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
jquery实现动态画圆
2014/12/04 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
Javascript复制实例详解
2016/01/28 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
python迭代器实例简析
2014/09/25 Python
使用SAE部署Python运行环境的教程
2015/05/05 Python
python flask实现分页效果
2017/06/27 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
基于python log取对数详解
2018/06/08 Python
Django 多语言教程的实现(i18n)
2018/07/07 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
利用Python优雅的登录校园网
2020/10/21 Python
工程采购员岗位职责
2014/03/09 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
小学新教师个人总结
2015/02/05 职场文书
上级领导检查欢迎词
2015/09/30 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA