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

  • πŸ’‚ Personal Website:Hai Yong — a blogger who likes to share technology and happiness
  • 🀟 copyright: this article by [sea] original, in nuggets first, need to reprint please contact the blogger
  • πŸ’¬ If the article is helpful to you, welcome to follow, like, bookmark (click three links) and subscribe
  • πŸ’… To find friends to fish together, please click on [Fish game】

The game can be accessed via πŸ‘‰haiyong. Site /moyu/touzi/ full source code I have put on GitHub, welcome to pick up, along with a ✨ star πŸ‘‡ github.com/wanghao221/…

In this section we will build a dice game using HTML, CSS, and JavaScript. Set up two players (one will do) and roll the dice. The player with the highest number of points wins the game.

knowledge

  • : hover selector
  • QuerySelector () method
  • The setAttribute () method

The images from dice 1 to 6 are all placed here, so you can either save them in your local folder and refer to them with relative addresses, or you can use them directly.

  • 1 p.m.
  • At 2 o ‘clock
  • At 3 o ‘clock
  • 4 p.m.
  • 5 p.m.
  • At 6 o ‘clock

HTML part

The HTML code is used to design the basic structure of the project, with one div containing the player’s name and the initial dice stage, and another div containing two buttons (one for dice roll and one for editing the player’s name).

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content=
    "Width = device - width, initial - scale = 1.0">
  <title>Build dice games using JavaScript</title>
</head>

<body>
  <div class="container">
    <h1>Let's get started</h1>

    <div class="dice">
      <p class="Player1">Player 1</p>
      <img class="img1" src="dice6.png">
    </div>

    <div class="dice">
      <p class="Player2">Player 2</p>
      <img class="img2" src="dice6.png">
    </div>
  </div>

  <div class="container bottom">
    <button type="button" class="butn" onClick="rollTheDice()">Roll the dice</button>
  </div>
  <div class="container bottom">
    <button type="button" class="butn" onClick="editNames()">Edit player name</button>
  </div>
</body>
</html>
Copy the code

The CSS part

Here we use some CSS properties to style the dice game.

<style>
  .container {
    width: 70%;
    margin: auto;
    text-align: center;
  }

  .dice {
    text-align: center;
    display: inline-block;
    margin: 10px;
  }

  body {
    background-image: url(https://labfile.oss.aliyuncs.com/courses/8605/bg-451838.jpeg);
    background-size: 100% 100%;
    height: 95vh;
    margin: 0;
  }

  h1 {
    margin: 30px;
    font-family: "Lobster", cursive;
    text-shadow: 5px 0 # 232931;
    font-size: 4.5 rem;
    color: #4ecca3;
    text-align: center;
  }

  p {
    font-size: 2rem;
    color: #4ecca3;
    font-family: "Indie Flower", cursive;
  }

  img {
    width: 100%;
  }

  .bottom {
    padding-top: 30px;
  }

  .butn {
    background: #4ecca3;
    font-family: "Indie Flower", cursive;
    border-radius: 7px;
    color: #ffff;
    font-size: 30px;
    padding: 16px 25px 16px 25px;
    text-decoration: none;
  }

  .butn:hover {
    background: # 232931;
    text-decoration: none;
  }
</style>
Copy the code

The hover selector adds a special style when the mouse moves over an element.

JavaScript part

The JavaScript code contains two features of a dice game. The first feature is to rename the player after clicking the button. Another feature is to roll dice after clicking a button. After both players roll the dice, the player with the highest number of points wins, and if both players have the same phase value, the game is tied.

<script>
  // Player name
  var player1 = "Player 1";
  var player2 = "Player 2";

  // The ability to change the player name
  function editNames() {
    player1 = prompt("Change player 1's name");
    player2 = prompt("Change player 2 name");

    document.querySelector("p.Player1").innerHTML = player1;
    document.querySelector("p.Player2").innerHTML = player2;
  }

  // Dice roll function
  function rollTheDice() {
    // Set a 1000 ms delay
    setTimeout(function () {
      // Generate random numbers from 1 to 6
      var randomNumber1 = Math.floor(Math.random() * 6) + 1;
      var randomNumber2 = Math.floor(Math.random() * 6) + 1;
      // Change the picture of the dice to the corresponding random number
      document.querySelector(".img1").setAttribute("src"."dice" + randomNumber1 + ".png");
      document.querySelector(".img2").setAttribute("src"."dice" + randomNumber2 + ".png");
      // Two numbers are equal
      if (randomNumber1 === randomNumber2) {
        // Change the text of h1 to "Tie!"
        document.querySelector("h1").innerHTML = "Draw!";
      } else if (randomNumber1 < randomNumber2) {
        document.querySelector("h1").innerHTML = (player2 + "Victory!);
      } else {
        document.querySelector("h1").innerHTML = (player1 + "Victory!); }},1000);
  }
</script>
Copy the code
  • The querySelector() method returns an element in the document that matches the specified CSS selector.
  • The setAttribute() method creates or changes a new attribute.

Here our dice game is done, I give the complete source code below, students can download down to try:

Github.com/wanghao221/…

Give me a star by the way ✨

conclusion

You’ve already learned how to build dice games using JavaScript. We also learned/reviewed some knowledge, such as :hover selector, querySelector() and setAttribute() methods.

The students also started to do a dice game!