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:
|
<<: 30 Tips for Writing HTML Code
>>: Solve the conflict between docker and vmware
Recommend
The implementation code of the CSS3 input box is similar to the animation effect of Google login
Use CSS3 to animate the input box similar to the ...
How to shrink the log file in MYSQL SERVER
The transaction log records the operations on the...
Solution to the Chinese garbled code problem in the decompressed version of MYSQL
The decompressed version of MYSQL is installed 1:...
MySQL 5.7 installation and configuration tutorial
This article shares the MySQL installation and co...
Introduction to CSS3 color value RGBA and gradient color usage
Before CSS3, gradient images could only be used a...
Vue implements two-way data binding
This article example shares the specific code of ...
jQuery implements percentage scoring progress bar
This article shares the specific code of jquery t...
Detailed explanation of the correct use of the if function in MySQL
For what I am going to write today, the program r...
MySQL Flush-List and dirty page flushing mechanism
1. Review The Buffer Pool will be initialized aft...
Content-type description, that is, the type of HTTP request header
To learn content-type, you must first know what i...
HTML Grammar Encyclopedia_HTML Language Grammar Encyclopedia (Must Read)
Volume Label, Property Name, Description 002 <...
Summary of the deployment of Tomcat cluster and Nginx load balancing based on Docker
Table of contents Written in front 1. Ngixn image...
Complete Tutorial on Deploying Java Web Project on Linux Server
Most of this article refers to other tutorials on...
How to output Chinese characters in Linux kernel
You can easily input Chinese and get Chinese outp...
Detailed process of building nfs server using Docker's NFS-Ganesha image
Table of contents 1. Introduction to NFS-Ganesha ...