Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added Pokemon Game Project [GSSOC'23] #5168

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Added Pokemon Game Project [GSSOC'23] #5168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3a11975
Added Pokemon Generator Game
killerraj369 Aug 10, 2023
6fcbd6f
Delete Pokemon_Generator directory
killerraj369 Aug 10, 2023
5980815
Added Pokemon Generator Game
killerraj369 Aug 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions Js-Games/Pokemon_Generator/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
# **Pokemon Generator**

---

<br>

## **Description 📃**
1.) This is a Pokemon Game which generates random Pokemon using External API.
2.) Click on the button to get new Pokemons that are waiting for you.
-

## **functionalities 🎮**
1.) Uses External API.
2.) Generate New Pokemon with their corresponding names.

-
<br>

## **How to play? 🕹️**
Click button to generate new Pokemons
-

<br>

## **Screenshots 📸**

<br>

<br>

## **Working video 📹**
Binary file added Js-Games/Pokemon_Generator/image.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
65 changes: 65 additions & 0 deletions Js-Games/Pokemon_Generator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PokeGenerator</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<div class="navbar">
<heading>
<p><h1>RANDOM POKEMON GENERATOR</h1></p>
</heading>
</div>

<div class="vitrina" id="vitrina">
<!-- Tarjeta will be inserted here -->
</div>
</div>
</body>
<script src="script.js"></script>
<!-- <script>
let contenedor;
const total_pokemons = 500;

window.onload = inicio;

function aleatorio(min, max) { // min and max included
return Math.floor(Math.random() * (max - min + 1) + min)
}

function inicio() {
contenedor = document.getElementById("vitrina");
pintarVitrina(); // Initially paint the vitrina
window.addEventListener("click", pintarVitrina);
}

function pintarVitrina() {
traerDatos(aleatorio(1, total_pokemons));
}

function traerDatos(id) {
fetch(`https://pokeapi.co/api/v2/pokemon/${id}`)
.then(response => response.json())
.then(function(data) {
let nombre = data.name;
let url = data.sprites.other.dream_world.front_default;
if (nombre && url) {
imprimirTarjeta(nombre, url);
}
});
}

function imprimirTarjeta(nombre, url) {
let template = `<div class="tarjeta">
<img src="${url}" alt="${nombre}">
<br>
<label>${nombre}</label> <br>
<button onclick="pintarVitrina()">Click to Change</button>
</div>`;
contenedor.innerHTML = template;
}
</script> -->
</html>
51 changes: 51 additions & 0 deletions Js-Games/Pokemon_Generator/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
//https://pokeapi.co/api/v2/pokemon/5
let contenedor;
const total_pokemons = 500;

window.onload = inicio;

function aleatorio(min, max) { // min and max included
return Math.floor(Math.random() * (max - min + 1) + min)
}

function inicio()
{
contenedor = document.getElementById("vitrina");
window.addEventListener("click",pintarVitrina);
}

function pintarVitrina(evento){
contenedor.innerHTML = "";
traerDatos(aleatorio(1,total_pokemons));
// traerDatos(aleatorio(1,total_pokemons));
// traerDatos(aleatorio(1,total_pokemons));
// traerDatos(aleatorio(1,total_pokemons));
// traerDatos(aleatorio(1,total_pokemons));
}

function traerDatos(id){
fetch(`https://pokeapi.co/api/v2/pokemon/${id}`)
.then(response => response.json())
.then(function(data){
let nombre = data.name;
let url = data.sprites.other.dream_world.front_default;
if(nombre && url)
{
imprimirTarjeta(nombre,url);
}
});
}

function imprimirTarjeta(nombre,url)
{
let template = `<div class="tarjeta">
<img src="${url}" alt="" >
<br>
<label for="">
${nombre}
</label> <br>
<button >Click to Change</button>
</div>`;
contenedor.innerHTML = template;
console.log(contendor)
}
58 changes: 58 additions & 0 deletions Js-Games/Pokemon_Generator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
/* background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQ9_cWrVaiJ4B_zUKM81BjI0HhTzUPfJdhmKidEC8G4xq0fGXzeZfFRqcbWZXW8Pr_NTg&usqp=CAU); */
background-repeat: no-repeat;
background-size:contain;
margin: 0;
padding: 0;
}

.navbar {
background-color: #f0afaf;
color: white;
text-align: center;
padding: 10px;
}

.vitrina {
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
}

.tarjeta {
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
text-align: center;
padding: 20px;
}

.tarjeta img {
max-width: 80%;
height: auto;
}

.tarjeta label {
display: block;
margin-top: 10px;
}

.tarjeta button {
background-color: #ff6f61;
color: white;
border: none;
padding: 5px 10px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
}

.tarjeta button:hover {
background-color: #ff3d35;
transform: scale(1.05);
}