Writing a rock-paper-scissors game in JavaScript

This article shares the specific code for writing a rock-paper-scissors game in JavaScript for your reference. The specific content is as follows

HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS</title>
 
    <script rel="script" src="js1.js"></script>
 
    <style>
        #Div {
            width: 1000px;
            height: 700px;
            position: relative;
            border-style: groove;
            border-width: 2px;
        }
        /*Guessing game area*/
        #area {
            width: 300px;
            height: 200px;
            background-color: #011bfd;
            position: absolute;
            top: 20%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        /*Display area*/
        #results {
            width: 400px;
            height: 50px;
            background-color: #f7f8fd;
            text-align:center;
            font-size:30px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        /*Card Stone*/
        #stone
            width: 100px;
            height: 150px;
            background-color: #011bfd;
            position: absolute;
            top: 80%;
            left: 30%;
            transform: translate(-50%, -50%);
        }
        /*Card Scissors*/
        #scissors {
            width: 100px;
            height: 150px;
            background-color: #011bfd;
            position: absolute;
            top: 80%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        /*Card cloth*/
        #cloth {
            width: 100px;
            height: 150px;
            background-color: #011bfd;
            position: absolute;
            top: 80%;
            left: 70%;
            transform: translate(-50%, -50%);
        }
    </style>
 
</head>
<body>
 
<div id="Div">
    <div id="area"></div>
 
    <div id="results"></div>
 
    <div id="stone" draggable="true"></div>
    <div id="scissors" draggable="true"></div>
    <div id="cloth" draggable="true"></div>
 
</div>
 
<script rel="script">
    show();
</script>
 
</body>
</html>

JavaScript code:

/***
 area area stone = stone > rock < paper scissors scissors < rock = scissors > cloth > rock < paper scissors = cloth ***/
 
/***
 View data type: Object.prototype.toString.call(variable)
 Refresh part: window.location.reload('#area');
 ***/
 
 
function Init () {
    //Get and bind HTML ID, return HTML format (HTMLDivElement)
    const area = document.querySelector("#area");
    const results = document.querySelector("#results");
    const stone = document.querySelector("#stone");
    const scissors = document.querySelector("#scissors");
    const cloth = document.querySelector("#cloth");
 
    //Define the dragged card let ondragstart_ID = null
    //The rock-paper-scissors type is written as an array const random_Action = ['stone', 'scissors', 'cloth'];
    //Randomly get the key of an array in an array const random_Digital = Math.round(Math.random() * (random_Action.length - 1) + 1);
    //Get the key value in the array, such as 'stone' in the random_Action array (random_Action[0])
    const random_Value = random_Action[random_Digital-1];
 
    //Write a rock-paper-scissors type method function attribute (parameter) {
        //When the mouse moves in (the rock-paper-scissors card becomes larger)
        parameter.onmouseover = function () {
            this.style.height = '200px';
            this.style.width = '150px';
        }
        //When the mouse moves out (the rock-paper-scissors card returns to its initial state)
        parameter.onmouseleave = function () {
            this.style.height = '150px';
            this.style.width = '100px';
        }
        //When the element starts to drag (the rock-paper-scissors card becomes transparent)
        parameter.ondragstart = function () {
            this.style.opacity = '0.3';
            ondragstart_ID = parameter.id
        }
    }
    //Create an object of the rock-paper-scissors type and assign values to the attributes of the rock-paper-scissors object this.show_attribute = function () {
        attribute(stone)
        attribute(scissors)
        attribute(cloth)
    }
    //Write the card drag event this.overout = function () {
        //When the card is dragged to the area (rock-paper-scissors area) area.ondragenter = function () {
            //Judge the random number random_Digital, which cannot be equal to null
           if (random_Digital !== null) {
               // Determine the dragged card if (ondragstart_ID === 'stone') {
                   //Judge which random number is equal to switch (random_Value) {
                       case stone.id:
                           results.innerHTML = 'stone = stone, draw! ';
                           break;
                       case scissors.id:
                           results.innerHTML = 'stone > scissors, you win! ';
                           break;
                       casecloth.id:
                           results.innerHTML = 'stone < cloth, you lose! ';
                           break;
                       default:
                           //Refresh window.location.reload();
                   }
                   //Element dragging ends (the rock-paper-scissors card returns to its initial state)
                   stone.ondragend = function () {
                       this.style.opacity = '1';
                   }
                   //Refresh after 1 second delay setTimeout(function (){
                       window.location.reload();
                   }, 1000);
                   //Determine the dragged card}else if (ondragstart_ID === 'scissors') {
                   //Judge which random number is equal to switch (random_Value) {
                       case stone.id:
                           results.innerHTML = 'scissors < stone, you lose! ';
                           break;
                       case scissors.id:
                           results.innerHTML = 'scissors = scissors, draw! ';
                           break;
                       casecloth.id:
                           results.innerHTML = 'scissors > cloth, you win! ';
                           break;
                       default:
                           //Refresh window.location.reload();
                   }
                   //Element dragging ends (the rock-paper-scissors card returns to its initial state)
                   scissors.ondragend = function () {
                       this.style.opacity = '1';
                   }
                   //Refresh after 1 second delay setTimeout(function (){
                       window.location.reload();
                   }, 1000);
                   //Judge the dragged card}else if (ondragstart_ID === 'cloth') {
                   //Judge which random number is equal to switch (random_Value) {
                       case stone.id:
                           results.innerHTML = 'cloth > stone, you win! ';
                           break;
                       case scissors.id:
                           results.innerHTML = 'cloth < scissors, you lose! ';
                           break;
                       casecloth.id:
                           results.innerHTML = 'cloth = cloth, draw! ';
                           break;
                       default:
                           //Refresh window.location.reload();
                   }
                   //Element dragging ends (the rock-paper-scissors card returns to its initial state)
                   cloth.ondragend = function () {
                       this.style.opacity = '1';
                   }
                   //Refresh after 1 second delay setTimeout(function (){
                       window.location.reload();
                   }, 1000);
               }
           }
        }
    }
}
 
//Call function function show() {
    const show_html = new Init();
    show_html.show_attribute()
    show_html.overout()
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JS implements the rock-paper-scissors game
JavaScript based on object-oriented implementation of the rock-paper-scissors game
js implements the rock-paper-scissors game
JavaScript implementation of the rock-paper-scissors game source code sharing
HTML+JS to implement the sample code of rock-paper-scissors game

<<: 30 Tips for Writing HTML Code

>>: Solve the conflict between docker and vmware