参考までにコードの方を共有しておきます。
========
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ポケモンバトル</title>
<style>
@font-face {
font-family: 'Pokemon GB';
src: url('
cdn.jsdelivr.net/npm/pokemon…') format('woff2');
}
body {
background-color:
#9bbc0f;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: 'Pokemon GB', monospace;
}
#game-screen {
width: 320px;
height: 288px;
background-color:
#0f380f;
border: 10px solid #306230;
position: relative;
overflow: hidden;
}
.battle-area {
width: 100%;
height: 144px;
position: relative;
}
.pokemon {
position: absolute;
font-size: 24px;
}
#enemy-pokemon {
top: 20px;
right: 40px;
}
#player-pokemon {
bottom: 20px;
left: 40px;
}
.status-box {
position: absolute;
background-color:
#9bbc0f;
border: 2px solid #306230;
padding: 4px;
font-size: 10px;
width: 140px;
}
#enemy-status {
top: 10px;
left: 10px;
}
#player-status {
bottom: 10px;
right: 10px;
}
.hp-bar {
width: 100%;
height: 4px;
background-color: #306230;
}
.hp-fill {
height: 100%;
background-color:
#0f380f;
transition: width 0.5s;
}
.status-condition {
color:
#FF0000;
}
#message-box {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 64px;
background-color:
#9bbc0f;
border-top: 2px solid #306230;
padding: 8px;
font-size: 12px;
overflow-y: auto;
}
#move-selection {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background-color:
#9bbc0f;
border-top: 2px solid #306230;
display: none;
grid-template-columns: 1fr 1fr;
gap: 4px;
padding: 4px;
}
.move-button {
background-color:
#8bac0f;
border: 2px solid #306230;
color:
#0f380f;
cursor: pointer;
font-family: 'Pokemon GB', monospace;
font-size: 10px;
}
.move-button:hover {
background-color: #306230;
color:
#9bbc0f;
}
</style>
</head>
<body>
<div id="game-screen">
<div class="battle-area">
<div id="enemy-pokemon" class="pokemon">🌱</div>
<div id="player-pokemon" class="pokemon">⚡</div>
<div id="enemy-status" class="status-box">
<div class="pokemon-name">フシギダネ L30</div>
<div class="hp-bar"><div class="hp-fill" style="width: 100%;"></div></div>
<div class="status-condition"></div>
</div>
<div id="player-status" class="status-box">
<div class="pokemon-name">ピカチュウ L35</div>
<div class="hp-bar"><div class="hp-fill" style="width: 100%;"></div></div>
<div class="status-condition"></div>
</div>
</div>
<div id="message-box">やせいの フシギダネが あらわれた!</div>
<div id="move-selection"></div>
</div>
<script>
const pokemonData = {
'ピカチュウ': { hp: 100, level: 35, moves: ['でんこうせっか', '10まんボルト', 'アイアンテール', 'ボルテッカー'] },
'フシギダネ': { hp: 120, level: 30, moves: ['はっぱカッター', 'タネばくだん', 'ねむりごな', 'どくのこな'] }
};
const moveData = {
'でんこうせっか': { power: 40, accuracy: 100, type: 'でんき' },
'10まんボルト': { power: 90, accuracy: 100, type: 'でんき', effect: { type: 'まひ', chance: 10 } },
'アイアンテール': { power: 100, accuracy: 75, type: 'はがね' },
'ボルテッカー': { power: 120, accuracy: 50, type: 'でんき', recoil: true },
'はっぱカッター': { power: 55, accuracy: 95, type: 'くさ' },
'タネばくだん': { power: 80, accuracy: 100, type: 'くさ' },
'ねむりごな': { power: 0, accuracy: 75, type: 'くさ', effect: { type: 'ねむり', chance: 100 } },
'どくのこな': { power: 0, accuracy: 75, type: 'どく', effect: { type: 'どく', chance: 100 } }
};
let playerPokemon, enemyPokemon;
const messageBox = document.getElementById('message-box');
const moveSelection = document.getElementById('move-selection');
function startBattle() {
playerPokemon = { ...pokemonData['ピカチュウ'], currentHp: pokemonData['ピカチュウ'].hp, status: null };
enemyPokemon = { ...pokemonData['フシギダネ'], currentHp: pokemonData['フシギダネ'].hp, status: null };
updateBattleScreen();
showMessage('やせいの フシギダネが あらわれた!')
.then(() => showMoveSelection());
}
function updateBattleScreen() {
document.querySelector('
#player-status .hp-fill').style.width = `${(playerPokemon.currentHp / playerPokemon.hp) * 100}%`;
document.querySelector('
#enemy-status .hp-fill').style.width = `${(enemyPokemon.currentHp / enemyPokemon.hp) * 100}%`;
document.querySelector('
#player-status .pokemon-name').textContent = `ピカチュウ L${playerPokemon.level}`;
document.querySelector('
#enemy-status .pokemon-name').textContent = `フシギダネ L${enemyPokemon.level}`;
document.querySelector('
#player-status .status-condition').textContent = playerPokemon.status || '';
document.querySelector('
#enemy-status .status-condition').textContent = enemyPokemon.status || '';
}
function showMoveSelection() {
moveSelection.innerHTML = '';
playerPokemon.moves.forEach(move => {
const button = document.createElement('button');
button.textContent = move;
button.className = 'move-button';
button.addEventListener('click', () => executeMove(move));
moveSelection.appendChild(button);
});
moveSelection.style.display = 'grid';
}
function showMessage(message) {
return new Promise(resolve => {
messageBox.textContent = message;
setTimeout(resolve, 1500);
});
}
async function executeMove(move) {
moveSelection.style.display = 'none';
if (await checkStatusEffects(playerPokemon, 'ピカチュウ')) {
await enemyTurn();
return;
}
await showMessage(`ピカチュウの ${move}!`);
if (Math.random() * 100 < moveData[move].accuracy) {
const damage = calculateDamage(moveData[move].power, playerPokemon.level);
enemyPokemon.currentHp = Math.max(0, enemyPokemon.currentHp - damage);
updateBattleScreen();
await showMessage(`フシギダネに ${damage} のダメージ!`);
if (moveData[move].effect && Math.random() * 100 < moveData[move].effect.chance) {
enemyPokemon.status = moveData[move].effect.type;
await showMessage(`フシギダネは ${enemyPokemon.status}状態になった!`);
updateBattleScreen();
}
if (moveData[move].recoil) {
const recoilDamage = Math.floor(damage / 3);
playerPokemon.currentHp = Math.max(0, playerPokemon.currentHp - recoilDamage);
updateBattleScreen();
await showMessage(`ピカチュウは はんどうで ${recoilDamage} のダメージ!`);
}
if (enemyPokemon.currentHp <= 0) {
await showMessage('フシギダネは たおれた!');
await showMessage('しょうぶに かった!');
startBattle(); // リセットして新しいバトルを開始
return;
}
} else {
await showMessage('しかし、はずれてしまった!');
}
await enemyTurn();
}
async function enemyTurn() {
if (await checkStatusEffects(enemyPokemon, 'フシギダネ')) {
showMoveSelection();
return;
}
const move = enemyPokemon.moves[Math.floor(Math.random() * enemyPokemon.moves.length)];
await showMessage(`フシギダネの ${move}!`);
if (Math.random() * 100 < moveData[move].accuracy) {
const damage = calculateDamage(moveData[move].power, enemyPokemon.level);
playerPokemon.currentHp = Math.max(0, playerPokemon.currentHp - damage);
updateBattleScreen();
await showMessage(`ピカチュウに ${damage} のダメージ!`);
if (moveData[move].effect && Math.random() * 100 < moveData[move].effect.chance) {
playerPokemon.status = moveData[move].effect.type;
await showMessage(`ピカチュウは ${playerPokemon.status}状態になった!`);
updateBattleScreen();
}
if (playerPokemon.currentHp <= 0) {
await showMessage('ピカチュウは たおれた!');
await showMessage('めのまえが まっくらに なった!');
startBattle(); // リセットして新しいバトルを開始
return;
}
} else {
await showMessage('しかし、はずれてしまった!');
}
await applyPoisonDamage(playerPokemon, 'ピカチュウ');
showMoveSelection();
}
async function checkStatusEffects(pokemon, name) {
if (pokemon.status === 'まひ' && Math.random() < 0.25) {
await showMessage(`${name}は まひして うごけない!`);
return true;
}
if (pokemon.status === 'ねむり') {
if (Math.random() < 0.33) {
pokemon.status = null;
await showMessage(`${name}は めをさました!`);
} else {
await showMessage(`${name}は ぐうぐう ねむっている`);
return true;
}
}
return false;
}
async function applyPoisonDamage(pokemon, name) {
if (pokemon.status === 'どく') {
const poisonDamage = Math.floor(pokemon.hp / 8);
pokemon.currentHp = Math.max(0, pokemon.currentHp - poisonDamage);
updateBattleScreen();
await showMessage(`${name}は どくのダメージを うけた!`);
if (pokemon.currentHp <= 0) {
await showMessage(`${name}は たおれた!`);
if (name === 'ピカチュウ') {
await showMessage('めのまえが まっくらに なった!');
startBattle(); // リセットして新しいバトルを開始
}
return true;
}
}
return false;
}
function calculateDamage(power, level) {
return Math.floor((power * level / 100 2) * (Math.random() * 0.15 0.85));
}
// バトル開始
startBattle();
</script>
</body>
</html>