ポケモンの戦闘部分のゲームを作ってみた！

みなさん、こんにちは〜ららぽてすらです🌟

今日は、「ポケモンバトルVer.2.0」という簡単なポケモン風のバトルシーンをHTMLとJavaScriptで作ってみたので、その仕組みとロジックを紹介します。とはいえ、実はこれ、ちょっと懐かしいですよね。10年前のゲーム開発者たちは、これよりももっと複雑で高度なシステムを作り上げていたわけで、彼らのスキルには改めて尊敬の念を抱かずにはいられません！

今回のプログラムでは、基本的な戦闘ロジックをシンプルに再現しています！

ポケモンのソースコードは、制作会社側の極秘情報なので見れませんが代わりに私が見た目で判断して似せて作っていきました！

見た目はポケモンバトルのようですが、背後にはいくつかの興味深い仕組みがあります。それでは、そのポイントを見ていきましょう！

1. プレイヤーと敵ポケモンのデータ管理

まず、プレイヤーと敵のポケモンの情報をJavaScriptで管理しています。ポケモンの名前、HP（ヒットポイント）、スピード、攻撃力、そして画像URLを含むデータが配列に保存されています。これもネットで連携してますが本来ならゲームにキャラクターを格納して表示させてます🙆

このデータを元に、画面上にポケモンを表示し、バトルを進めていきます。

let enemyData = [

{name: "タネボー", hp: 80, speed: 40, attack: 20, imageUrl: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/273.png"},

{name: "キモリ", hp: 100, speed: 45, attack: 30, imageUrl: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/252.png"},

{name: "ミズゴロウ", hp: 120, speed: 50, attack: 35, imageUrl: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/258.png"}

];

2. HPバーの更新

バトル中にHP（ヒットポイント）が減ると、画面上のHPバーが自動で更新されます。これにより、ポケモンがダメージを受けている様子がリアルタイムで視覚的に確認できます。この部分はCSSとJavaScriptの組み合わせで実現しており、バトルの臨場感をアップさせています。

function updateHpBars() {

document.getElementById("playerHpBar").style.width = (playerHp / playerMaxHp) * 100 + "%";

document.getElementById("enemyHpBar" + (currentEnemyIndex + 1)).style.width = (currentEnemyHp / currentEnemy.hp) * 100 + "%";

}

3. 攻撃と防御の選択

プレイヤーは「たたかう」ボタンを押すと、攻撃方法を選択できるようになります。攻撃を選ぶと、敵にダメージを与え、敵のターンが始まります。このシンプルな選択肢が、バトルにおける戦略性を少しだけ持たせていますが、もちろんこれはあくまで基本的なシステムです…本物はここで技選択とエフェクトなど様々な要素盛り込んでるのが凄すぎです☺️

function playerAttackAction() {

hideAttackOptions();

const damage = calculateDamage(playerAttack, currentEnemy.attack);

currentEnemyHp -= damage;

if (currentEnemyHp < 0) currentEnemyHp = 0;

updateHpBars();

addMessage(`アチャモのこうげき！ ${currentEnemy.name}に${damage}のダメージ！`);

checkBattleOutcome(() => {

if (currentEnemyHp > 0) {

setTimeout(enemyTurn, 1000);

}

});