Introducción :
El juego de piedra, papel y tijera es un juego simple y divertido en el que ambos jugadores tienen que hacer una piedra, papel o tijera. Solo tiene dos resultados posibles, un empate o una victoria para un jugador y una derrota para el otro jugador. Diseñaremos el juego usando JavaScript donde un jugador jugará contra la computadora. En total habrá 10 movimientos. El jugador tiene que elegir una opción entre piedra, papel y tijera. Se generará una opción aleatoria desde el lado de la computadora y el que gane obtendrá un punto cada vez. Después de 10 movimientos, el resultado final se mostrará en la pantalla con un botón para reiniciar el juego. El juego será completamente receptivo para que pueda jugarse en todos los dispositivos.
El diseño HTML:
HTML proporciona la estructura básica del juego. El archivo styles.css está vinculado en la etiqueta principal que se utilizará para diseñar el HTML.
La descripción del uso de elementos en el código se encuentra a continuación:
- Se usa un div con el título de la clase para mostrar el título en la pantalla.
- Un div con una puntuación de clase contiene dos div más que mostrarán la puntuación del jugador y la computadora.
- Div con el movimiento de clase solo muestra un texto y div con movimientos de clase a la izquierda mostrará la cantidad de movimientos que quedan antes de que finalice el juego.
- Un div con una opción de clase contiene tres botones de piedra, papel y tijera que el usuario puede usar para dar la entrada.
- Un div con el resultado de la clase mostrará el resultado de cada movimiento y el resultado final después de 10 movimientos y el botón con la recarga de clase permitirá recargar el juego.
Nombre de archivo: index.html
HTML
<!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Rock Paper Scissor</title> </head> <body> <section class="game"> <!--Title --> <div class="title">Rock Paper Scissor</div> <!--Display Score of player and computer --> <div class="score"> <div class="playerScore"> <h2>Player</h2> <p class="p-count count">0</p> </div> <div class="computerScore"> <h2>Computer</h2> <p class="c-count count">0</p> </div> </div> <div class="move">Choose your move</div> <!--Number of moves left before game ends --> <div class="movesleft">Moves Left: 10 </div> <!--Options available to player to play game --> <div class="options"> <button class="rock">Rock</button> <button class="paper">Paper</button> <button class="scissor">Scissors</button> </div> <!--Final result of game --> <div class="result"></div> <!--Reload the game --> <button class="reload"></button> </section> <script src="app.js"></script> </body> </html>
El estilo CSS:
Este estilo se utiliza para el juego. Puede cambiar los estilos según sus necesidades.
Nombre de archivo: estilos.css
CSS
/* styles.css */
/* universal selector - Applies to whole document */
*{
padding: 0;
margin: 0;
box-sizing: border-box;
background: #082c6c;
color: #fff;
}
/* To center everything in game */
.game{
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
}
/* Title of the game */
.title{
position: absolute;
top: 0;
font-size: 4rem;
z-index: 2;
}
/* Score Board */
.score{
display: flex;
width: 30vw;
justify-content: space-evenly;
position: absolute;
top: 70px;
z-index: 1;
}
/* Score */
.p-count,.c-count{
text-align: center;
font-size: 1.5rem;
margin-top: 1rem;
}
/* displaying three buttons in one line */
.options{
display: flex;
width: 50vw;
justify-content: space-evenly;
margin-top: 2rem;
}
/* Styling on all three buttons */
.rock, .paper, .scissor{
padding: 0.8rem;
width: 100px;
border-radius: 10px;
background: green;
outline: none;
border-color: green;
border: none;
cursor: pointer;
}
.move{
font-size: 2rem;
font-weight: bold;
}
/* Reload button style */
.reload {
display: none;
margin-top: 2rem;
padding: 1rem;
background: green;
outline: none;
border: none;
border-radius: 10px;
cursor: pointer;
}
.result{
margin-top: 20px;
font-size: 1.2rem;
}
/* Responsive Design */
@media screen and (max-width: 612px)
{
.title{
text-align: center;
}
.score{
position: absolute;
top: 200px;
width: 100vw;
}
.options{
width: 100vw;
}
La lógica usando JavaScript:
La lógica principal del juego se crea utilizando JavaScript. Realizaremos la manipulación de DOM, por lo que el conocimiento básico de JavaScript es suficiente para construir el juego.
Sigue los pasos
- Crea una función game() que contendrá toda la lógica del juego.
- Dentro de la función, declare tres variables puntuación del jugador , puntuación de la computadora , jugadas que mantendrán el registro de la puntuación del jugador, la puntuación de la computadora y las jugadas completadas respectivamente .
- Cree una función playGame() y dentro de la función use la manipulación DOM para obtener los tres botones que creamos en HTML para la entrada del jugador. Cree una array PlayerOptions que contenga los tres botones como sus elementos. Del mismo modo, cree una array para las opciones de la computadora.
- Use el bucle forEach() en playerOptions para que podamos agregar un detector de eventos en todos los botones con una sola pieza de código. Dentro del bucle, incremente el contador de movimientos en 1, muestre los movimientos que quedan en la pantalla restando los movimientos de 10. Genere un valor aleatorio para la opción de la computadora y compárelo con la entrada del jugador.
- Cree una función winner() que recibirá dos argumentos, uno la entrada del jugador y el otro la opción de la computadora. La función decidirá quién gana el punto entre el jugador y la computadora.
- Cree una función gameOver() que mostrará el resultado final con el botón de recarga. La función se llamará cuando los movimientos sean iguales a 10.
- Llame a la función playGame() dentro de la función game().
- Ahora llama a la función game() al final del archivo.
A continuación se muestra la implementación:
Nombre de archivo: app.js
Javascript
// app.js
// Complete logic of game inside this function
const game = () => {
let playerScore = 0;
let computerScore = 0;
let moves = 0;
// Function to
const playGame = () => {
const rockBtn = document.querySelector('.rock');
const paperBtn = document.querySelector('.paper');
const scissorBtn = document.querySelector('.scissor');
const playerOptions = [rockBtn,paperBtn,scissorBtn];
const computerOptions = ['rock','paper','scissors']
// Function to start playing game
playerOptions.forEach(option => {
option.addEventListener('click',function(){
const movesLeft = document.querySelector('.movesleft');
moves++;
movesLeft.innerText = `Moves Left: ${10-moves}`;
const choiceNumber = Math.floor(Math.random()*3);
const computerChoice = computerOptions[choiceNumber];
// Function to check who wins
winner(this.innerText,computerChoice)
// Calling gameOver function after 10 moves
if(moves == 10){
gameOver(playerOptions,movesLeft);
}
})
})
}
// Function to decide winner
const winner = (player,computer) => {
const result = document.querySelector('.result');
const playerScoreBoard = document.querySelector('.p-count');
const computerScoreBoard = document.querySelector('.c-count');
player = player.toLowerCase();
computer = computer.toLowerCase();
if(player === computer){
result.textContent = 'Tie'
}
else if(player == 'rock'){
if(computer == 'paper'){
result.textContent = 'Computer Won';
computerScore++;
computerScoreBoard.textContent = computerScore;
}else{
result.textContent = 'Player Won'
playerScore++;
playerScoreBoard.textContent = playerScore;
}
}
else if(player == 'scissors'){
if(computer == 'rock'){
result.textContent = 'Computer Won';
computerScore++;
computerScoreBoard.textContent = computerScore;
}else{
result.textContent = 'Player Won';
playerScore++;
playerScoreBoard.textContent = playerScore;
}
}
else if(player == 'paper'){
if(computer == 'scissors'){
result.textContent = 'Computer Won';
computerScore++;
computerScoreBoard.textContent = computerScore;
}else{
result.textContent = 'Player Won';
playerScore++;
playerScoreBoard.textContent = playerScore;
}
}
}
// Function to run when game is over
const gameOver = (playerOptions,movesLeft) => {
const chooseMove = document.querySelector('.move');
const result = document.querySelector('.result');
const reloadBtn = document.querySelector('.reload');
playerOptions.forEach(option => {
option.style.display = 'none';
})
chooseMove.innerText = 'Game Over!!'
movesLeft.style.display = 'none';
if(playerScore > computerScore){
result.style.fontSize = '2rem';
result.innerText = 'You Won The Game'
result.style.color = '#308D46';
}
else if(playerScore < computerScore){
result.style.fontSize = '2rem';
result.innerText = 'You Lost The Game';
result.style.color = 'red';
}
else{
result.style.fontSize = '2rem';
result.innerText = 'Tie';
result.style.color = 'grey'
}
reloadBtn.innerText = 'Restart';
reloadBtn.style.display = 'flex'
reloadBtn.addEventListener('click',() => {
window.location.reload();
})
}
// Calling playGame function inside game
playGame();
}
// Calling the game function
game();
Producción:
Publicación traducida automáticamente
Artículo escrito por pritishnagpal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA