JavaScript to write a guessing game

Empire my love 2022-05-14 14:54:54 阅读数:489

javascriptwriteguessinggame

 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 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 stone = stone stone > scissors stone < cloth
scissors scissors scissors < stone scissors = scissors scissors > cloth
cloth cloth cloth > stone cloth < scissors cloth = cloth
***/
/***
View data type :Object.prototype.toString.call( Variable )
Refresh local :window.location.reload('#area');
***/
function Init () {
// Get and bind HTML Of 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 drag cards
let ondragstart_ID = null
// Write the guessing type into an array
const random_Action = ['stone', 'scissors', 'cloth'];
// Randomly get the key of an array in the array
const random_Digital = Math.round(Math.random() * (random_Action.length - 1) + 1);
// Get the key value in the array , Such as arrays random_Action Medium 'stone'(random_Action[0])
const random_Value = random_Action[random_Digital-1];
// Write the method of guessing type
function attribute (parameter) {
// When the mouse moves in ( The guessing card gets bigger )
parameter.onmouseover = function () {
this.style.height = '200px';
this.style.width = '150px';
}
// When the mouse moves out ( The guessing card returns to its original state )
parameter.onmouseleave = function () {
this.style.height = '150px';
this.style.width = '100px';
}
// When the element starts dragging ( The guessing card becomes transparent )
parameter.ondragstart = function () {
this.style.opacity = '0.3';
ondragstart_ID = parameter.id
}
}
// Create an object of guessing type , Assign a value to the attribute of the guessing object
this.show_attribute = function () {
attribute(stone)
attribute(scissors)
attribute(cloth)
}
// Write card drag events
this.overout = function () {
// When a card is dragged to area( Guessing area ) above
area.ondragenter = function () {
// Judge random numbers random_Digital, Can not be equal to null
if (random_Digital !== null) {
// Judge the dragged card
if (ondragstart_ID === 'stone') {
// Determine which random number pair is equal to
switch (random_Value) {
case stone.id:
results.innerHTML = 'stone = stone, It ends in a draw !';
break;
case scissors.id:
results.innerHTML = 'stone > scissors, You win !';
break;
case cloth.id:
results.innerHTML = 'stone < cloth, Did you lose !';
break;
default:
// Refresh
window.location.reload();
}
// Element drag end ( The guessing card returns to its original state )
stone.ondragend = function () {
this.style.opacity = '1';
}
// Delay 1 Refresh after second
setTimeout(function (){
window.location.reload();
}, 1000);
// Judge the dragged card
}else if (ondragstart_ID === 'scissors') {
// Determine which random number pair is equal to
switch (random_Value) {
case stone.id:
results.innerHTML = 'scissors < stone, Did you lose !';
break;
case scissors.id:
results.innerHTML = 'scissors = scissors, It ends in a draw !';
break;
case cloth.id:
results.innerHTML = 'scissors > cloth, You win !';
break;
default:
// Refresh
window.location.reload();
}
// Element drag end ( The guessing card returns to its original state )
scissors.ondragend = function () {
this.style.opacity = '1';
}
// Delay 1 Refresh after second
setTimeout(function (){
window.location.reload();
}, 1000);
// Judge the dragged card
}else if (ondragstart_ID === 'cloth') {
// Determine which random number pair is equal to
switch (random_Value) {
case stone.id:
results.innerHTML = 'cloth > stone, You win !';
break;
case scissors.id:
results.innerHTML = 'cloth < scissors, Did you lose !';
break;
case cloth.id:
results.innerHTML = 'cloth = cloth, It ends in a draw !';
break;
default:
// Refresh
window.location.reload();
}
// Element drag end ( The guessing card returns to its original state )
cloth.ondragend = function () {
this.style.opacity = '1';
}
// Delay 1 Refresh after second
setTimeout(function (){
window.location.reload();
}, 1000);
}
}
}
}
}
// Call function
function show() {
const show_html = new Init();
show_html.show_attribute()
show_html.overout()
}

版权声明:本文为[Empire my love]所创,转载请带上原文链接,感谢。 https://javamana.com/2022/134/202205141446234820.html