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中获取请求的URL参数
Dec 22 Javascript
小试JQuery的AutoComplete插件
May 04 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 Javascript
javascript实现文本域写入字符时限定字数
Feb 12 Javascript
javascript获取重复次数最多的字符
Jul 08 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
Dec 14 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 Javascript
JS Array.from()将伪数组转换成数组的方法示例
Mar 23 Javascript
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
终于听上了直流胆调频
2021/03/02 无线电
php cookie 登录验证示例代码
2009/03/16 PHP
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
javascript tips提示框组件实现代码
2010/11/19 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
微信浏览器左上角返回按钮监听的实现
2020/03/04 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
浅谈dataframe中更改列属性的方法
2018/07/10 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
Python csv模块使用方法代码实例
2019/08/29 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
建筑公司员工自我鉴定
2014/04/08 职场文书
小学教师评语大全
2014/04/23 职场文书
写给父母的感谢信
2015/01/22 职场文书
收入证明申请书
2015/06/12 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
家访教师心得体会
2016/01/23 职场文书
Golang全局变量加锁的问题解决
2021/05/08 Golang