Tap-the-Geek es un juego simple, en el que el jugador tiene que tocar el logotipo de MovingGeeksForGeeks tantas veces como sea posible para aumentar su puntuación. Tiene tres niveles fácil, medio y difícil. La velocidad del círculo aumentará de nivel fácil a difícil. Apuesto a que es muy difícil para los jugadores obtener una sola puntuación en el nivel Difícil .
¿Por qué el juego es simple?
El juego es simple porque está compuesto de HTML, CSS y Javascript solo con muy pocas líneas de código. Utiliza la propiedad de animación CSS simple para hacer que el logotipo se mueva y HTML DOM para realizar algunas acciones, como contar la cantidad de toques realizados por el jugador para calcular el puntaje y mostrarlo.
¿Cómo jugar el juego?
Uno simplemente debe tocar el logotipo en movimiento tanto como pueda. Si está usando una computadora portátil, es mejor usar un mouse en lugar del panel táctil de la computadora portátil para obtener una buena experiencia. Pruebe las diferentes dificultades cambiando los niveles, actualice la página antes de cambiar de nivel.
Implementación:
- Divida la página web en dos secciones, una es para el área de juego y la otra para la selección de nivel y para mostrar la puntuación.
- Cree el logotipo como un elemento div y establezca una altura y un ancho razonables para el div que haga que el jugador se sienta cómodo al tocar.
- Configure la animación para mover el logotipo en direcciones aleatorias usando @keyframes . Especificaremos las propiedades izquierda y superior para que el logotipo se mueva a esa ubicación a medida que avanza la animación.
- La parte de la animación ha terminado, agreguemos funcionalidad para contar la cantidad de veces que se ha hecho clic en el logotipo.
- Finalmente, podemos mostrar el conteo como un puntaje en el lado del puntaje. ¡Eso es todo, nuestro juego está listo!
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
margin: 0px;
background: #000;
}
.crcl {
width: 80px;
height: 80px;
border-radius: 100%;
position: relative;
background-image: url(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"
);
background-size: cover;
animation: movement;
}
/* To set the positions for the logo
for the whole animation */
@keyframes movement {
0% {
left: 0px;
top: 0px
}
5% {
left: 300px;
top: 200px
}
10% {
left: 600px;
top: 100px
}
15% {
left: 600px;
top: 600px
}
20% {
left: 300px;
top: 600px
}
25% {
left: 600px;
top: 400px
}
30% {
left: 100px;
top: 0px
}
35% {
left: 600px;
top: 200px
}
40% {
left: 100px;
top: 500px
}
45% {
left: 0px;
top: 600px
}
50% {
left: 600px;
top: 600px
}
55% {
left: 300px;
top: 200px
}
60% {
left: 600px;
top: 100px
}
65% {
left: 800px;
top: 600px
}
70% {
left: 300px;
top: 600px
}
75% {
left: 600px;
top: 400px
}
80% {
left: 100px;
top: 0px
}
85% {
left: 600px;
top: 200px
}
90% {
left: 100px;
top: 500px
}
95% {
left: 0px;
top: 600px
}
100% {
left: 600px;
top: 200px;
}
}
.details {
float: right;
width: 400px;
height: 100vh;
position: relative;
background-color: rgb(6, 148, 25);
color: white;
display: block;
text-align: center;
}
.ground {
float: left;
}
.level {
display: flex;
margin: 10px;
margin-top: 25px;
}
.display_score {
margin-top: 25px;
}
button {
border-radius: 25px;
width: 8em;
height: 3em;
font-size: 20px;
border: 2px solid white;
background: transparent;
color: white;
margin: 10px;
cursor: pointer;
}
button:hover {
background-color: white;
color: rgb(6, 148, 25);
box-shadow: 0px 10px 20px 10px white;
transition-duration: 1s;
}
</style>
</head>
<body>
<div class="ground">
<div id="circle" onclick="count()"></div>
</div>
<div class="details">
<h1>Tap The Geek</h1>
<h3>Click on a difficulty to start the game</h3>
<div class="level">
<button onclick="easy()">EASY</button>
<button onclick="medium()">MEDIUM</button>
<button onclick="hard()">HARD</button>
</div>
<div class="display_score">
<h2>Score</h2>
<h2 id="score">0</h2>
</div>
<button onclick="restart()">RESTART</button>
</div>
<script>
// Setting the level to Easy by having the
// duration of the whole animation to the maximum
function easy() {
document.getElementById('circle')
.style.animationDuration = '20s';
document.getElementById('circle')
.className = 'crcl';
}
// Setting the level to Medium by having the
// duration of the whole animation to the maximum
function medium() {
document.getElementById('circle')
.style.animationDuration = '15s';
document.getElementById('circle')
.className = 'crcl';
}
// Setting the level to Hard by having the
// duration of the whole animation to the maximum
function hard() {
document.getElementById('circle')
.style.animationDuration = '12s';
document.getElementById('circle')
.className = 'crcl';
}
let cnt = 0;
// Function to count the number of taps
// and display the score
function count() {
cnt = parseInt(1) + parseInt(cnt);
var scr = document.getElementById('score');
scr.innerHTML = cnt;
}
// Restart the game by refreshing the page
function restart() {
window.location.reload();
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por ashwin13602 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA