js实现石头剪刀布游戏


Posted in Javascript onOctober 11, 2020

前言

用户选择出石头剪刀布,电脑系统随机生成石头剪刀布,然后判断结果并显示给用户 

一、实现效果

js实现石头剪刀布游戏

二、使用步骤

1.HTML和CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>石头剪刀布</title>
  <style>
    #bigbox{
      width: 600px;
      height: 600px;
      background: slateblue;
      margin: 0 auto;
    }
    #bigbox>h1{
      width: 100%;
      text-align: center;
      color: #ffffff;
    }
    .box1{
      height: 200px;
      
    
    }
    .box2{
      height: 220px;
    }
    .box1 img{
      float: left;
      margin: 25px;
    }
    .box2 img{
      float: left;
      margin:20px 63px;
      width: 150px;
      height: 150px;
 
    }
    .box2 h1{
      
 
      display: block;
      color: #000;
      float: left;
      line-height: 150px;
 
    }
    img{
      width: 150px;
      height: 150px;
    }
    p{
      text-align: center;
      color: red;
      font-size: 20px;
      font-weight: bold;
    }
    .text{
      height: 20px;
    }
    .text span{
      font-size: 20px;
      color: #ffffff;
      margin: 0 100px;
      line-height: 20px;
    }
  </style>
</head>
<body>
  <div id='bigbox'>
    <h1>请选择</h1>
    <div class="box1">
      <img src="../img/shitou.png" alt="">
      <img src="../img/jiandao.png" alt="">
      <img src="../img/bu.png" alt="">
    </div>
    <div class="text">
      <span>您选择了</span>
      <span>系统选择了</span>
    </div>
    <div class="box2">
      <img src="../img/undefined.png" alt="">
      <h1>pk</h1>
      <img src="../img/undefined.png" alt="">
    </div>
 
    <p>结果显示中。。。</p>
    
  </div>
</body>

2.JavaScript

<script>
  let imgs=document.getElementsByTagName('img')
  // console.log(imgs.length)
  for(let i=0;i<3;i++){
    imgs[i].onclick=function(){
      game(this,i)
      
    }
  }
 
  function game(src,i){
    // console.log(i)
    //用户
    let str=src.src;
    let user=document.getElementsByTagName('img')[3]
    user.src=str
    
    //系统
    setTimeout(function (){
      let user=document.getElementsByTagName('img')[4]
      let imgSrc=['../img/shitou.png','../img/jiandao.png','../img/bu.png']
      let num = Math.floor(Math.random() * imgSrc.length)
      console.log(num)
      user.src=imgSrc[num]
      i=i*1
       //结果
    let rs=document.getElementsByTagName('p')[0]
    if(i==0&&num==1 || i==1&&num==2
      || i==2&&num==0){
        rs.innerHTML="恭喜你获得胜利!"
      }else if(i==num){
        rs.innerHTML="平局,请再来一次吧"
      }else{
        rs.innerHTML="不好意思,游戏失败"
        
      }
    },200)
   
    
  }
  
</script>

总结

利用数组,将石头剪刀布src地址保存,利用随机数将生成0-2的任意数字,电脑延时0.2秒生成。用户利用for循环将照片绑定onclick(),点击图片,用户选择图片修改为当前图片。创建参数函数,传入数组标,以及this对象。通过this.src改变用户选择的显示图片,将数组下标 与随机数进行条件判断。0代表石头,1代表剪刀,2代表布。生成结果操作dom'进行显示

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 获取用户客户端操作系统版本
Aug 25 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
jquery.qtip提示信息插件用法简单实例
Jun 17 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
angular十大常见问题
Mar 07 Javascript
Vue页面骨架屏的实现方法
May 22 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
js+h5 canvas实现图片验证码
Oct 11 #Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 #Javascript
如何手写简易的 Vue Router
Oct 10 #Javascript
如何手写一个简易的 Vuex
Oct 10 #Javascript
echarts实现晶体球面投影的实例教程
Oct 10 #Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 #Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 #Javascript
You might like
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
Python+django实现文件下载
2016/01/17 Python
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
Windows平台Python连接sqlite3数据库的方法分析
2017/07/12 Python
Pyqt5实现英文学习词典
2019/06/24 Python
Python autoescape标签用法解析
2020/01/17 Python
Python实现检测文件的MD5值来查找重复文件案例
2020/03/12 Python
基于python实现删除指定文件类型
2020/07/21 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
Python导入父文件夹中模块并读取当前文件夹内的资源
2020/11/19 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
劳资员岗位职责
2013/11/11 职场文书
档案检查欢迎词
2014/01/13 职场文书
残疾人小组计划书
2014/04/27 职场文书
应聘教师求职信范文
2015/03/20 职场文书
公司规章制度范本
2015/08/03 职场文书
导游词之蓬莱长岛
2019/12/17 职场文书
Python使用MapReduce进行简单的销售统计
2022/04/22 Python