js实现石头剪刀布游戏

前言

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

一、实现效果

二、使用步骤

1.HTML和CSS

  
  
  
  
    #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;
    }
  


  
    请选择
    
      
      
      
    
    
      您选择了
      系统选择了
    
    
      
      pk
      
    
 
    
结果显示中。。。
    
  

2.Javascript

总结

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。