js创建的石头剪刀布在线游戏源码

所属分类: 网页特效-抽奖&游戏    2024-03-03 10:52:06

js创建的石头剪刀布在线游戏源码 ie兼容6
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载
 我要建站

js创建的石头剪刀布在线游戏源码(共6个文件)

    • script.js
    • index.html
    • style.css

使用方法

// Get  to DOM elements
const gameContainer = document.querySelector(".container"),
  userResult = document.querySelector(".user_result img"),
  cpuResult = document.querySelector(".cpu_result img"),
  result = document.querySelector(".result"),
  optionImages = document.querySelectorAll(".option_image");

// Loop through each option image element
optionImages.forEach((image, index) => {
  image.addEventListener("click", (e) => {
    image.classList.add("active");

    userResult.src = cpuResult.src = "images/rock.png";
    result.textContent = "稍候...";

    // Loop through each option image again
    optionImages.forEach((image2, index2) => {
      // If the current index doesn't match the clicked index
      // Remove the "active" class from the other option images
      index !== index2 && image2.classList.remove("active");
    });

    gameContainer.classList.add("start");

    // Set a timeout to delay the result calculation
    let time = setTimeout(() => {
      gameContainer.classList.remove("start");

      // Get the source of the clicked option image
      let imageSrc = e.target.querySelector("img").src;
      // Set the user image to the clicked option image
      userResult.src = imageSrc;

      // Generate a random number between 0 and 2
      let randomNumber = Math.floor(Math.random() * 3);
      // Create an array of CPU image options
      let cpuImages = ["images/rock.png", "images/paper.png", "images/scissors.png"];
      // Set the CPU image to a random option from the array
      cpuResult.src = cpuImages[randomNumber];

      // Assign a letter value to the CPU option (R for rock, P for paper, S for scissors)
      let cpuValue = ["R", "P", "S"][randomNumber];
      // Assign a letter value to the clicked option (based on index)
      let userValue = ["R", "P", "S"][index];

      // Create an object with all possible outcomes
      let outcomes = {
        RR: "Draw",
        RP: "电脑",
        RS: "你",
        PP: "Draw",
        PR: "你",
        PS: "电脑",
        SS: "Draw",
        SR: "电脑",
        SP: "你",
      };

      // Look up the outcome value based on user and CPU options
      let outComeValue = outcomes[userValue + cpuValue];

      // Display the result
      result.textContent = userValue === cpuValue ? "不分胜负" : `${outComeValue} 赢了!!`;
    }, 2500);
  });
});

站长提示:
1. 苦力吧素材官方QQ群:950875342
2. 平台上所有素材资源,需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题,每次奖励2K币
4. PHP源码类素材,如需协助安装调试,或你有二次开发需求,可联系苦力吧客服。
5. 付费素材资源,需充值后方能下载,如有任何疑问可直接联系苦力吧客服
相关资源 / 抽奖&游戏

jquery设置数字范围随机取号抽奖代码

可设置两个数字:最小值和最大值,点击开始滚动数字!暂停就随机抽取数字。
  抽奖&游戏
 8300  0

HTML5俄罗斯方块网页小游戏源码

一款响应式的俄罗斯方块游戏代码,可自定义设置自动播放、控制游戏速度、区域宽度等。
  抽奖&游戏
 2187  0

PHP支持双人操作的抖音小游戏源码

一款抖音很火的双人游戏代码,第一步先设置两个玩家各自的名字,然后开始游戏,根据文字提示哪位玩家先操作,很有意思。
  抽奖&游戏
 4168  0

html5来啊盖楼啊小游戏源码

一款网页在线盖楼小游戏代码,点击开始后,机械臂吊着砖块左右晃动,鼠标单击即可落下堆叠起来就成功,反之失败。
  抽奖&游戏
 1393  0

评论数(0) 回复有机会获得K币 用户协议

^_^ 还没有人评论,快来抢个沙发!
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论