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实现table单双行不同显示并能单行选中
Jul 25 Javascript
基于JQuery实现的类似购物商城的购物车
Dec 06 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
Nov 28 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
webpack-dev-server远程访问配置方法
Feb 22 Javascript
Angular路由ui-router配置详解
Aug 01 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 Javascript
vue切换菜单取消未完成接口请求的案例
Nov 13 Javascript
javascript实现计算器功能详解流程
Nov 01 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
简单采集了yahoo的一些数据
2007/02/14 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
php for 循环使用的简单实例
2016/06/02 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
js 深拷贝函数
2008/12/04 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
[01:17:12]职来职往完美电竞专场
2014/09/18 DOTA
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
深入解答关于Python的11道基本面试题
2017/04/01 Python
有趣的python小程序分享
2017/12/05 Python
Python多线程编程之多线程加锁操作示例
2018/09/06 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
意大利奢侈品网站:Italist
2016/08/23 全球购物
Waterford美国官网:爱尔兰水晶制品品牌
2017/04/26 全球购物
商场总经理岗位职责
2014/02/03 职场文书
企业安全生产月活动总结
2014/07/05 职场文书
施工安全协议书范本
2014/09/26 职场文书
高三英语复习计划
2015/01/19 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
爱国主义影片观后感
2015/06/18 职场文书
Redis的字符串是如何实现的
2021/10/24 Redis
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL