Spaces:
Running
Running
<html lang="ja"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>ポケモン図鑑 - 第1・2世代</title> | |
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Press+Start+2P&display=swap" rel="stylesheet"> | |
<style> | |
body { | |
margin: 0; | |
padding: 0; | |
font-family: 'Press Start 2P', 'Noto+Sans+JP', sans-serif; | |
background-color: #f0f0f0; | |
} | |
.pokedex { | |
display: flex; | |
width: 800px; | |
height: 600px; | |
margin: 20px auto; | |
background-color: #d32f2f; | |
border: 10px solid #b71c1c; | |
border-radius: 15px; | |
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); | |
} | |
.list-container { | |
width: 40%; | |
background-color: #fff; | |
border-right: 5px solid #000; | |
overflow-y: auto; | |
} | |
#pokemon-list { | |
list-style: none; | |
padding: 10px; | |
margin: 0; | |
} | |
#pokemon-list li { | |
cursor: pointer; | |
padding: 8px; | |
font-size: 12px; | |
} | |
#pokemon-list li:hover { | |
background-color: #eee; | |
} | |
.display-container { | |
width: 60%; | |
display: flex; | |
flex-direction: column; /* 縦に並べる */ | |
justify-content: center; | |
align-items: center; | |
background-color: #ffffff; | |
border: 10px solid #000; | |
border-radius: 10px; | |
margin: 20px; | |
} | |
.sprite-container { | |
padding: 20px; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
} | |
.text-container { | |
margin-top: 20px; /* 画像とテキストの間に間隔 */ | |
text-align: center; | |
} | |
#pokemon-sprite { | |
image-rendering: pixelated; | |
transform: scale(3); | |
transform-origin: center; | |
} | |
#pokemon-name { | |
font-size: 16px; | |
color: #000; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="pokedex"> | |
<div class="list-container"> | |
<ul id="pokemon-list"></ul> | |
</div> | |
<div class="display-container"> | |
<div class="sprite-container"> | |
<img id="pokemon-sprite" src="" alt="ポケモンスプライト"> | |
</div> | |
<div class="text-container"> | |
<h2 id="pokemon-name"></h2> | |
</div> | |
</div> | |
</div> | |
<script> | |
let pokemonList = []; | |
async function loadPokemon() { | |
const promises = []; | |
for (let i = 1; i <= 251; i++) { | |
promises.push( | |
Promise.all([ | |
fetch(`https://pokeapi.co/api/v2/pokemon/${i}`).then(res => res.json()), | |
fetch(`https://pokeapi.co/api/v2/pokemon-species/${i}`).then(res => res.json()) | |
]) | |
); | |
} | |
const results = await Promise.all(promises); | |
pokemonList = results.map(([pokemonData, speciesData]) => { | |
const japaneseName = speciesData.names.find(name => name.language.name === 'ja').name; | |
return { | |
number: String(pokemonData.id).padStart(3, '0'), | |
name: japaneseName, | |
sprite: pokemonData.sprites.versions['generation-ii'].crystal.front_default | |
}; | |
}); | |
const ul = document.getElementById('pokemon-list'); | |
pokemonList.forEach(pokemon => { | |
const li = document.createElement('li'); | |
li.textContent = `No.${pokemon.number} ${pokemon.name}`; | |
li.dataset.number = pokemon.number; | |
ul.appendChild(li); | |
}); | |
} | |
document.getElementById('pokemon-list').addEventListener('click', function(event) { | |
if (event.target.tagName === 'LI') { | |
const number = event.target.dataset.number; | |
const pokemon = pokemonList.find(p => p.number === number); | |
if (pokemon) { | |
document.getElementById('pokemon-sprite').src = pokemon.sprite; | |
document.getElementById('pokemon-name').textContent = `No.${pokemon.number} ${pokemon.name}`; | |
} | |
} | |
}); | |
async function init() { | |
await loadPokemon(); | |
if (pokemonList.length > 0) { | |
const firstPokemon = pokemonList[0]; | |
document.getElementById('pokemon-sprite').src = firstPokemon.sprite; | |
document.getElementById('pokemon-name').textContent = `No.${firstPokemon.number} ${pokemon.name}`; | |
} | |
} | |
init(); | |
</script> | |
</body> | |
</html> |