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 相关文章推荐
JavaScript方法和技巧大全
Dec 27 Javascript
一段效率很高的for循环语句使用方法
Aug 13 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
微信小程序实现登录页云层漂浮的动画效果
May 05 Javascript
详解使用路由延迟加载 Angular 模块
Oct 12 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
jQuery实现轮播图效果
Nov 26 jQuery
一个很有趣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
解析strtr函数的效率问题
2013/06/26 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
PHP将MySQL的查询结果转换为数组并用where拼接的示例
2016/05/13 PHP
php中数组最简单的使用方法
2020/12/27 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
使用electron制作满屏心特效的示例代码
2018/11/27 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
JS判断数组里是否有重复元素的方法小结
2019/05/21 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
详解Python多线程
2016/11/14 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
Python日志模块logging基本用法分析
2018/08/23 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
公益活动策划方案
2014/01/09 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
自查自纠整改报告
2014/11/06 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
鸦片战争观后感
2015/06/09 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
Java基础——Map集合
2022/04/01 Java/Android