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重要知识更新
Jul 08 Javascript
防止浏览器记住用户名及密码的简单实用方法
Apr 22 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
通过jQuery学习js类型判断的技巧
May 27 jQuery
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
一个很有趣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编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
php中cookie的使用方法
2014/03/29 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
smarty自定义函数htmlcheckboxes用法实例
2015/01/22 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
javascript实现数独解法
2015/03/14 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
微信小程序methods中定义的方法互相调用的实例代码
2018/08/07 Javascript
记一次webapck4 配置文件无效的解决历程
2018/09/19 Javascript
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
python Flask实现restful api service
2017/12/04 Python
通过shell+python实现企业微信预警
2019/03/07 Python
python对文件的操作方法汇总
2020/02/28 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
美术教师个人总结
2015/02/06 职场文书
培训通知
2015/04/17 职场文书
北京青年观后感
2015/06/15 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书