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 相关文章推荐
扩展jQuery 键盘事件的几个基本方法
Oct 30 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
May 24 Javascript
js创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
es6 filter() 数组过滤方法总结
Apr 03 Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 Javascript
vue el-table实现递归嵌套的示例代码
Aug 14 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 获取客户端的真实ip
2009/11/30 PHP
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
jQuery 学习 几种常用方法
2009/06/11 Javascript
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
javascript 函数速查表
2010/02/07 Javascript
jquery插件validate验证的小例子
2013/05/08 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
Javascript的表单验证长度
2016/03/16 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
python复制文件到指定目录的实例
2018/04/27 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
python 自定义装饰器实例详解
2019/07/20 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
美国温暖商店:The Warming Store
2018/12/15 全球购物
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
在职研究生自我鉴定
2013/10/16 职场文书
运动会通讯稿150字
2014/02/15 职场文书
高中课程设置方案
2014/05/28 职场文书
2015安全保卫工作总结
2015/04/25 职场文书
2015年小学体育工作总结
2015/05/22 职场文书
校运会宣传稿大全
2015/07/23 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
详解redis分布式锁的这些坑
2021/05/19 Redis
Python面向对象编程之类的概念
2021/11/01 Python