Click here for free DL of the app version that can save data.

No:7078

1359

←

Prev Next

→

A Pokedex (ensicopledia pokemon)
Developer User3967｜Date and time 23/7/5 8:56:32
Build time 16.969 sec｜Game capacity 5.367KB｜

Script

Aqui está um exemplo de um jogo da Pokedex implementado em um único arquivo HTML, usando JavaScript e ilustrações de pictogramas. Por favor, note que este é apenas um exemplo básico e incompleto, mas você pode expandi-lo e adicionar mais funcionalidades se desejar:

Pokedex

Lembre-se de substituir as imagens dos Pokemons nos links `src` dos elementos `<img>` com as suas próprias imagens. Você também pode adicionar mais entradas ao array `pokedexData` para incluir mais Pokemons no jogo. Divirta-se!

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

Click here for free DL of the app version that can save data.

```html
<!DOCTYPE html>
<html>

<head>
    <title>Pokedex</title>
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }

.pokedex {
            background-color: #f5f5f5;
            width: 300px;
            border: 1px solid #ccc;
            padding: 20px;
            border-radius: 10px;
        }

.pokedex h1 {
            text-align: center;
            margin-top: 0;
        }

.pokedex-image {
            text-align: center;
            padding: 20px 0;
        }

.pokedex-buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }

.pokedex-buttons button {
            padding: 10px 20px;
            font-weight: bold;
            border-radius: 5px;
            cursor: pointer;
        }

.pokedex-buttons button:disabled {
            opacity: 0.5;
            cursor: default;
        }

.pokedex-display {
            margin-top: 20px;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div class="pokedex">
        <h1>Pokedex</h1>
        <div class="pokedex-image">
            <img id="pokemon-image" src="" alt="Pokemon">
        </div>
        <div class="pokedex-buttons">
            <button id="previous-button" disabled>Anterior</button>
            <button id="next-button" disabled>Próximo</button>
        </div>
        <div class="pokedex-display">
            <p id="pokemon-name"></p>
            <p id="pokemon-type"></p>
            <p id="pokemon-description"></p>
        </div>
    </div>

let currentPokemonIndex = 0;
        const pokemonImageElement = document.getElementById("pokemon-image");
        const pokemonNameElement = document.getElementById("pokemon-name");
        const pokemonTypeElement = document.getElementById("pokemon-type");
        const pokemonDescriptionElement = document.getElementById("pokemon-description");
        const previousButton = document.getElementById("previous-button");
        const nextButton = document.getElementById("next-button");

// Função para exibir os dados de um Pokemon especificado pelo índice
        function displayPokemon(pokemonIndex) {
            const pokemon = pokedexData[pokemonIndex];
            pokemonImageElement.src = `images/${pokemon.name.toLowerCase()}.png`;
            pokemonNameElement.textContent = pokemon.name;
            pokemonTypeElement.textContent = `Type: ${pokemon.type}`;
            pokemonDescriptionElement.textContent = pokemon.description;
        }

// Verificar se existem Pokemons anteriores e habilitar/desabilitar os botões
        function checkPreviousButton() {
            if (currentPokemonIndex > 0) {
                previousButton.disabled = false;
            } else {
                previousButton.disabled = true;
            }
        }

// Verificar se existem Pokemons posteriores e habilitar/desabilitar os botões
        function checkNextButton() {
            if (currentPokemonIndex < pokedexData.length - 1) {
                nextButton.disabled = false;
            } else {
                nextButton.disabled = true;
            }
        }

// Exibir o primeiro Pokemon quando a página é carregada
        displayPokemon(currentPokemonIndex);
        checkPreviousButton();
        checkNextButton();

// Evento de clique no botão anterior
        previousButton.addEventListener("click", function() {
            currentPokemonIndex--;
            displayPokemon(currentPokemonIndex);
            checkPreviousButton();
            checkNextButton();
        });

// Evento de clique no botão próximo
        nextButton.addEventListener("click", function() {
            currentPokemonIndex++;
            displayPokemon(currentPokemonIndex);
            checkPreviousButton();
            checkNextButton();
        });
    </script>
</body>

</html>
```