使用方法
// 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. 付费素材资源,需充值后方能下载,如有任何疑问可直接联系苦力吧客服