js实现石头剪刀布效果
这个游戏主要设计到两点:
首先是胜负运算
由于石头剪刀布是循环性的
石头 杀 剪子
剪子 杀 布
布 杀 石头
石头 杀 剪子
。。。
根据以上特点找出规律,写出算法即可。
让电脑随机
这点比较容易,前面我有写过文章介绍,不明白的童鞋可以去看看。
随机刷屏
其实这个效果不是游戏的关键性,但为了看起来更加互动,好玩,我就给加上了。这里用到了一个取模算法,根据余数去循环显示即可达到效果。
界面截图
<!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>
js实现石头剪刀布效果相关推荐
- 原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html> <html lang="en"> ...
- php拖拽原理,JS拖拽效果及原理解析
这篇文章主要介绍了如何实现js拖拽效果及原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标. ...
- php vue联动查询,使用vue.js实现联动效果的示例代码
摘要:本篇文章主要介绍了使用vue.js实现联动效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧想用vue.js写一个联动效果,按照自己的思路实验了下,并没有 ...
- 《javaScript100例|04》自动播放——Js幻灯片缓冲效果
目录 效果图 示例 源码地址: 效果图 示例 <html> <head> <title>自动播放--幻灯片缓冲效果</title> <style& ...
- JS特效代码大全(十一)超炫的js图片展示效果(三)
在看过上一篇JS特效代码大全(十)超炫的js图片展示效果(二)文章后,相信很多人都想试试把这种效果用到自己的项目中去了.在用的过程当中个性化的需求就来了,比如,想把小图导航放上边去,或者放左边放右边等 ...
- js 实现筋斗云效果(点击tab栏里面的某个地方,会有图片移动到此地方)
js 实现筋斗云效果 animate.js <!DOCTYPE html> <html lang="en"> <head><meta ch ...
- pixi.js 制作 流星雨效果
pixi.js 制作 流星雨效果 //创建流星们creatShootingStart(){let startNum = 25;//个数this.startSp = [];//星星们的集合//流星消失的 ...
- 原生js实现放大镜效果
记录一次原生js实现放大镜效果. 文章目录 效果图 设计思路 基本架子 蒙版 放大效果图 逻辑设计 蒙版跟放大的图肯定要先隐藏 鼠标移入图片显示蒙版 鼠标移动蒙版跟着移动 处理边界情况 大图移动 小优 ...
- html萤火虫特效代码,原生JS实现萤火虫效果
本文实例为大家分享了JS实现萤火虫效果的具体代码,供大家参考,具体内容如下 上代码之前,先看一下效果: CSS部分(此处用元素模拟萤火虫,背景可自行设置): .box{width: 4px;heigh ...
最新文章
- nginx 设置开机自动启动脚本
- 小程序执行运行过程原理_活性污泥法基本原理、净化反应过程、工艺类型和运行过程中存在的问题...
- java23种模式之单例模式
- 启明云端分享| sigmastar ssd201/ssd202d _Uboot升级指南
- [Python人工智能] 二十六.基于BiLSTM-CRF的医学命名实体识别研究(上)数据预处理
- 2017.12.26
- 多主机推送公钥、修改配置、修改密码脚本
- 如何腾出计算机内存,win7系统(取消)删除虚拟内存让硬盘空间轻松腾出来
- Python在Linux地址已在使用,python在linux下的使用
- 缓冲区分析—ArcGIS API for JavaScript
- 【BAT】中文数字to阿拉伯数字转换
- Android代码中更改TextView颜色
- 学习笔记之《Android应用案例开发大全》(全部调试过代码)
- mysql轻量级的管理工具
- 最大流最小割定理证明
- 一个最全产品开发流程
- 硅谷之行 (21) 加州的天空
- CQHTTP 以HTTP形式制作你的QQ机器人
- mac安装win10后触摸板没有右键功能键的添加技巧
- 关于CSI的一条龙服务
热门文章
- 爱尔眼科四川省区2023“集善扶困(贫)健康行”公益行动圆满收官
- const指针和指向const的指针
- 公司HR面试经常问的问题及回答思路
- 《中华大字库》·大史记
- iphone隐藏底条_教你一招隐藏iPhone X及以上机型底部的小横条
- 运动蓝牙耳机排行榜,好用的运动耳机品牌推荐
- 电容笔有什么用?值得推荐的ipad电容笔
- 吉利车用鸿蒙系统,华为进军汽车产业了?吉利汽车搭载鸿蒙系统!
- ZTE VX10 H618B不增加设备、不拆机、不破解,开启自带路由+iTV的详细设置方法
- 集全球之智:2019世界机器人大会在京开幕