Construiremos un proyecto de juego de dados utilizando HTML, CSS y JavaScript. El juego de dados se basa en un juego de dos jugadores. Ambos jugadores tiran los dados y el jugador que obtenga el valor de fase más alto ganará el juego.
Imágenes de las fases de dados: La lista de imágenes de las fases de dados se proporciona a continuación. Guarde todas las imágenes en una carpeta donde guarda sus archivos HTML, CSS y JavaScript. Puede guardar todos los archivos HTML, CSS y JavaScript por separado y vincular los archivos CSS y JavaScript al archivo HTML o combinar todos los códigos (HTML, CSS y JavaScript) en un solo archivo y ejecutarlo.
Código HTML: El código HTML se utiliza para diseñar la estructura básica del proyecto. El código HTML contiene la clase contenedora que contiene el nombre del jugador y la fase inicial de dados. Otro div inferior contiene los dos botones (un botón para tirar los dados y otro botón para cambiar el nombre del jugador).
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Dice Game</title> </head> <body> <div class="container"> <h1>Let's Play</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 Names </button> </div> </body> </html>
Código CSS: en esta sección, usaremos algunas propiedades CSS para diseñar el juego de dados.
<style>
.container {
width: 70%;
margin: auto;
text-align: center;
}
.dice {
text-align: center;
display: inline-block;
margin: 10px;
}
body {
background-color: #042f4b;
margin: 0;
}
h1 {
margin: 30px;
font-family: "Lobster", cursive;
text-shadow: 5px 0 #232931;
font-size: 4.5rem;
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>
Código JavaScript: El código JavaScript contiene la funcionalidad de Dice Game. La primera funcionalidad es cambiar el nombre del jugador después de hacer clic en el botón. Otra funcionalidad es tirar los dados después de hacer clic en el botón. Después de tirar los dados por ambos jugadores, ganará cualquier jugador que obtenga el valor de fase más alto. Si ambos jugadores obtienen el mismo valor de fase, el juego empatará.
<script>
// Player name
var player1 = "Player 1";
var player2 = "Player 2";
// Function to change the player name
function editNames() {
player1 = prompt("Change Player1 name");
player2 = prompt("Change player2 name");
document.querySelector("p.Player1").innerHTML = player1;
document.querySelector("p.Player2").innerHTML = player2;
}
// Function to roll the dice
function rollTheDice() {
setTimeout(function () {
var randomNumber1 = Math.floor(Math.random() * 6) + 1;
var randomNumber2 = Math.floor(Math.random() * 6) + 1;
document.querySelector(".img1").setAttribute("src",
"dice" + randomNumber1 + ".png");
document.querySelector(".img2").setAttribute("src",
"dice" + randomNumber2 + ".png");
if (randomNumber1 === randomNumber2) {
document.querySelector("h1").innerHTML = "Draw!";
}
else if (randomNumber1 < randomNumber2) {
document.querySelector("h1").innerHTML
= (player2 + " WINS!");
}
else {
document.querySelector("h1").innerHTML
= (player1 + " WINS!");
}
}, 2500);
}
</script>
Código completo: después de combinar el código de las tres secciones anteriores (HTML, CSS y JavaScript), obtendremos el juego de dados completo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content
="width=device-width, initial-scale=1.0">
<title>Dice Game</title>
<style>
.container {
width: 70%;
margin: auto;
text-align: center;
}
.dice {
text-align: center;
display: inline-block;
margin: 10px;
}
body {
background-color: #042f4b;
margin: 0;
}
h1 {
margin: 30px;
font-family: "Lobster", cursive;
text-shadow: 5px 0 #232931;
font-size: 4.5rem;
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>
</head>
<body>
<div class="container">
<h1>Let's Play</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 Names
</button>
</div>
<script>
// Player name
var player1 = "Player 1";
var player2 = "Player 2";
// Function to change the player name
function editNames() {
player1 = prompt("Change Player1 name");
player2 = prompt("Change player2 name");
document.querySelector("p.Player1")
.innerHTML = player1;
document.querySelector("p.Player2")
.innerHTML = player2;
}
// Function to roll the dice
function rollTheDice() {
setTimeout(function () {
var randomNumber1 = Math.floor(Math.random() * 6) + 1;
var randomNumber2 = Math.floor(Math.random() * 6) + 1;
document.querySelector(".img1").setAttribute("src",
"dice" + randomNumber1 + ".png");
document.querySelector(".img2").setAttribute("src",
"dice" + randomNumber2 + ".png");
if (randomNumber1 === randomNumber2) {
document.querySelector("h1").innerHTML = "Draw!";
}
else if (randomNumber1 < randomNumber2) {
document.querySelector("h1").innerHTML
= (player2 + " WINS!");
}
else {
document.querySelector("h1").innerHTML
= (player1 + " WINS!");
}
}, 2500);
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por imarchit19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA