I am participating in the nuggets Community game creative submission Contest. For details, please see: Game Creative Submission Contest

The game can be accessed at 👉 via this linkHaiyong. Site/moyu/shitou…

About the (JS) build process:

First, I create an object with a text format (rock, paper, scissors) for each possibility, and then add the image source to that object as well.

In the HTML I made:

  • playerChoiceImg
  • playerChoiceTxt
  • computerChoiceImg
  • computerChoiceTxt

You can modify everything in it.

A points variable is then created, which stores the scores of each player (player and computer).

After that, I need a randomly generated number between 1 and 3 to indicate the computer’s choice.

/ / variable
const choices = [{
        id: 1.name: "Stone".image: "./img/rock.png"}, {id: 2.name: "Cloth".image: "./img/paper.png"}, {id: 3.name: "Scissors".image: "./img/scissors.png"
    }]

let playerPoints = document.querySelector(".playerPoints")
let computerPoints = document.querySelector(".computerPoints")
let playerChoiceImg = document.querySelector("#playerChoiceImg")
let playerChoiceTxt = document.querySelector("#playerChoiceTxt")
let computerChoiceImg = document.querySelector("#computerChoiceImg")
let computerChoiceTxt = document.querySelector("#computerChoiceTxt")
let buttons = document.querySelectorAll(".btn")
let points = [0.0]
let randomNumber;
Copy the code

To be honest I gave these objects an ID, but didn’t use them in the project. I just used each index in my selection.

Add event listeners:

Here I attach an event listener to the button using the forEach() method.

This event listener will do most of the work.

// Event listener
buttons.forEach((button) = > {
    button.addEventListener("click".() = > {
        if (button.textContent === "Stone") {
            playerChoiceImg.src = choices[0].image;
            playerChoiceTxt.textContent = choices[0].name;
        } else if (button.textContent === "Cloth") {
            playerChoiceImg.src = choices[1].image;
            playerChoiceTxt.textContent = choices[1].name;
        } else if (button.textContent === "Scissors") {
            playerChoiceImg.src = choices[2].image;
            playerChoiceTxt.textContent = choices[2].name;
        }
        getComputerChoice();
        console.log(points); })})Copy the code

As you can see in the code above, I use if-else statements and define which button does what based on the button’s textContent.

If – else statements:

If the button itself has “stone” text, “stone” is displayed in playerChoiceTxt, and the image source of playerChoiceImg is changed to the image source stored in the object, as are the other two.

After that, I created the computer’s selection function, as follows:

// Select the function
function getComputerChoice() {
    computerChoiceImg.src = "./img/gif.gif"
    setTimeout(() = > {
        randomNumber = Math.floor(Math.random() * 3);
        computerChoiceImg.src = choices[randomNumber].image;
        computerChoiceTxt.textContent = choices[randomNumber].name;
        gameRules();
        playerPoints.textContent = points[0];
        computerPoints.textContent = points[1];
        whoWon();
    }, 1000);
}
Copy the code

1. I created a looping GIF with 3 images of rock, paper cut and scissors.

2. Then add a setTimeout, which is responsible for the duration of the animation.

3. Inside I asked the function to create a random number between 0 and 2, which is the element number in the selection object, which will indicate the computer’s selection.

4. Change the text and image content to the name and image source of the selected object element.

5. Then run the gameRules() function (which we’ll cover later).

6. Updated the text of each player points indicator.

7. Check the score of each function call to see if anyone wins. (whoWon() function)

Function gameRules ()

function gameRules() {
    if (playerChoiceTxt.textContent === choices[0].name && computerChoiceTxt.textContent === choices[1].name) {
        points[1] + +; }else if (playerChoiceTxt.textContent === choices[1].name && computerChoiceTxt.textContent === choices[2].name) {
        points[1] + +; }else if (playerChoiceTxt.textContent === choices[2].name && computerChoiceTxt.textContent === choices[0].name) {
        points[1] + +; }else if (playerChoiceTxt.textContent === computerChoiceTxt.textContent) {
        console.log("draw");
    } else {
        points[0] + +; }}Copy the code

This function checks the player’s choice and checks whether the computer choice can defeat it. I’ve set up these if-else statements according to the rules of the game. If the computer wins, the computer’s score is increased by 1, otherwise the player’s score is increased by 1.

Function whoWon ()

If-else statement again

function whoWon() {
    if (points[0= = =10) {
        alert("You beat the AI to victory!")
        points = [0.0];
    } else if (points[1= = =10) {
        alert("You've been defeated by artificial intelligence!")
        points = [0.0]; }}Copy the code

Finally, just check the array to see if anyone has reached 10 points, if so, reset those points to their initial value.

I have put the code on GitHub, welcome to pick it up, along with a star 👇

Github.com/wanghao221/…

HMM… That’s about it. If you have any questions/suggestions/comments, please feel free to contact me.