Javascript 簡易ゲーム if文の書き方とalertに配列の値を表示させたい

Question

初心者でJavaScript学習のために作成してます。
分かるところから、自分で書いており、途中のものになります。。
if文が苦手で、アドバイスいただけますと幸いです。

前提:
自分の船(ourHero)
ヒットポイント - 20
攻撃するパワー - 5
攻撃が当たる確率 - 0.7

敵の船
ヒットポイント - 3 〜 6の乱数
攻撃するパワー - 2 〜 4の乱数
攻撃が当たる確率 - 0.6 〜 0.8の乱数

上記の数値のもと、攻撃し、され、
ヒットポイントが残っていれば、戦い続け、
ゼロになったら、再度攻撃するか、敗退するか選択するstartprompt()に戻るように書きたい。

下記２点につまづきました。

１）　alert内で配列の値を表示させたい。
-> 以前、別のコードを書いた時は下記で表示されたのですが、今回はうまく表示できていないので、
ご指摘いただけますと幸いです。

alert('敵から攻撃をうけた!' + ${tekiArray[0]accuracy}' + ' ${ourHero.hitPoints}');

1. 敵の船の手持ちのヒットポイントが０になったら、ゲームを開始するか否かのstartPrompt()関数へ飛ばしたいと思っています。

なんとなく下記の書き方は間違っていると思うので、アドバイスいただけますと幸いです。

}　else if ( tekiArray[0].hitPoints = 0 ){
    alert('敵の船の破壊に成功!');
    startPrompt();

自分で書き進めたところ↓

class Ship{
  constructor(hitPoints, firepower, accuracy){
    this.hitPoints = hitPoints;
    this.firepower = firepower;
    this.accuracy = accuracy;
  }
}

//hitPoints, firepower, accuracy
const ourHero = new Ship(20, 5, 0.7);

class tekiShip extends Ship{
  constructor(hitPoints, firepower, accuracy){
  super(hitPoints, firepower, accuracy);
  }
}
let tekiArray = []
for(let i =0; i < 6; i++){
  tekiArray[i] = new tekiShip (randomizer(3,6), randomizer(2,4),(randomizer(60,80) / 100));
}
console.log(tekiArray)

function randomizer(min, max){
  return (Math.floor(Math.random() * (max - min + 1) + min));
}

function game(){
  playGame = prompt('Y を入力してゲームを開始する');
  playGame = playGame.toUpperCase();
  if (playGame === 'Y'){
    startPrompt()
  } else {
    alert('またね')
  } 

 function startPrompt(){
  let ans;
  while(true) {
    ans = getCommand();
    if (ans == '') continue;
    if (ans == 'attack') {
      doBattle();
    } else {
      alert('Game Over・ﾟ｡(´；д；`) ｡ﾟ・Game Over');
    }
    break;
  }
}

function getCommand() {
  const cmd = prompt('"attack" or "retreat"を入力してください');
  let ret = cmd.toLowerCase();
  if (ret != 'attack' && ret != 'retreat') ret = '';
  return ret;
}

function doBattle(){
while (true){
  if (Math.random() < tekiArray[0].accuracy) {
    ourHero.hitPoints -= tekiArray[0].firepower;
    console.log(ourHero.hitPoints)
    alert('敵から攻撃を受けた' + ' ${tekiArray[0]accuracy}' + '${ourHero.hitPoints}');
} else if (Math.random() < ourHero.accuracy){
    tekiArray[0].hitPoints -= ourHero.firepower; 
    alert("敵に攻撃を仕掛けた");
}　else if ( tekiArray[0].hitPoints = 0 ){
    alert('敵の船の破壊に成功!');
    startPrompt();
  break;
}
}
}}
game();
startPrompt();

Comments

[m.ts10806]

タイトルと質問内容が大きく離れているように思います。
タイトルには要件を、起きている問題詳細・課題などを記載してください。
https://teratail.com/help/question-tips#questionTips3-1

このままだと要件変わったにも関わらず同じタイトルで投稿続けることになります。

[hiro_ike]

ご指摘ありがとうございます。
タイトルを更新してみました。

[coolwind0202]

１）
・配列の内容を表示させたいとありますが、ourHero.hitPoints は配列ではないと思います
・うまく表示できていない というのが不明瞭なので、「どういう表示を期待して」「実際にはどういう表示」だったのか知りたいです

[hiro_ike]

ご確認ありがとうございます。一部漏れていたので追記しました。
${tekiArray[0]accuracy}' + '${ourHero.hitPoints}'
上記のように書くと、現状、この文字列のままalertに表示されます。

やりたいこと:
テストするためにも、処理/計算時の実際の値を目視したい。というのが目的でした。

初心者のため、多分該当箇所の書き方に問題があると思い、質問させていただきました。

[coolwind0202]

「else」を使って書かれているようですが、以下の3つの状況は同時に起こり得ますか？
「敵から攻撃を受けた」「敵に攻撃を仕掛けた」「敵の船の破壊に成功した」

敵に攻撃を仕掛けた直後に敵の船の破壊に成功することは、あり得るのではないですか？

[hiro_ike]

ご確認ありがとうございます。
仰る通り、有り得ますね。。
こういった場合、全てifで書き始めたら良いのでしょうか？

Answer 1

１）テンプレートリテラルの使い方について

• 文字列を ' ではなく ` で囲います
• 変数名を ${} で囲います

alert('敵から攻撃をうけた!' + ${tekiArray[0]accuracy}' + ' ${ourHero.hitPoints}');

↓

alert(`敵から攻撃をうけた! ${tekiArray[0].accuracy} ${ourHero.hitPoints}`);

２）

敵の船の手持ちのヒットポイントが０になったら 必ず敵の船のヒットポイントが０になるとは限らないと思います。
また、if 文の条件式が true と判断されると、以降の else はまったく実行されません。
なので、

if (Math.random() < tekiArray[0].accuracy) {
  alert('敵から攻撃を受けた' + ' ${tekiArray[0]accuracy}' + '${ourHero.hitPoints}');
} else if (Math.random() < ourHero.accuracy){
  alert("敵に攻撃を仕掛けた");
} else if ( tekiArray[0].hitPoints = 0 ){
  alert('敵の船の破壊に成功!');
}

このとき、敵の accuracy と　自身の accuracy　の両方が Math.random() 以下にならないと、敵の船の破壊は永遠に通知されません。
これらを踏まえて、以下のように変更しました。

if (Math.random() < tekiArray[0].accuracy) {
  ourHero.hitPoints -= tekiArray[0].firepower;
  console.log(ourHero.hitPoints)
  alert(`敵から攻撃をうけた! ${tekiArray[0].accuracy} ${ourHero.hitPoints}`);
}
if (Math.random() < ourHero.accuracy){
  tekiArray[0].hitPoints -= ourHero.firepower; 
  alert("敵に攻撃を仕掛けた");
}
if ( tekiArray[0].hitPoints <= 0 ){
  alert('敵の船の破壊に成功!');
  startPrompt();
  break;
}

Comments

[coolwind0202]

仕様を把握しきれていないので、もし不足している点があればお知らせください。

[hiro_ike]

ありがとうございます！
最後に一つだけ、もしお分かりになりましたら、教えて頂きたいです。
敵のShip一船を倒したら、
startPrompt()へ戻り、
attackを入力したら、
残りの船を倒していくようなフローにしたいのですが、
この時は、どのように指定したら良いでしょうか？
m（_ _）m

[coolwind0202]

いまのコードでは、常に tekiArray の最初の要素を敵の現在の船として使用しています。
フローの実現方法として考えられるのは、現在の船の配列内でのインデックスを示す変数を用意することです。

たとえば、変数「currentTekiIndex = 0」を定義すると、現在の敵船オブジェクトは tekiArray[currentTekiIndex] と取得できますし、現在の敵船のヒットポイントが0以下になったら currentTekiIndex++; を実行することで、攻撃対象を次の船に変更できます。

[hiro_ike]

>現在の船の配列内でのインデックスを示す変数を用意すること
こちらは、下記に追加するということでしょうか？
let tekiArray = []
for(let i =0; i < 6; i++){
tekiArray[i] = new tekiShip (randomizer(3,6), randomizer(2,4),(randomizer(60,80) / 100));
}

[coolwind0202]

関数の外ならどこでも良いと思いますよ

[hiro_ike]

やりたいことが出来ました！
後ほどコード載せます。

Answer 2

class Ship {
  constructor(hitPoints, firepower, accuracy) {
    this.hitPoints = hitPoints;
    this.firepower = firepower;
    this.accuracy = accuracy;
  }
}

//hitPoints, firepower, accuracy
const ourHero = new Ship(20, 5, 0.7);

class tekiShip extends Ship {
  constructor(hitPoints, firepower, accuracy) {
    super(hitPoints, firepower, accuracy);
  }
}
let tekiArray = []
for (let i = 0; i < 6; i++) {
  tekiArray[i] = new tekiShip(randomizer(3, 6), randomizer(2, 4), (randomizer(60, 80) / 100));
}
console.log(tekiArray)

function randomizer(min, max) {
  return (Math.floor(Math.random() * (max - min + 1) + min));
}

function game() {
  playGame = prompt('ゲームを開始するには、Yを入力してください');
  playGame = playGame.toUpperCase();
  if (playGame === 'Y') {
    startPrompt()
  } else {
    alert('GoodBye')
  }

  function startPrompt() {
    let ans;
    while (true) {
      ans = getCommand();
      if (ans == '') continue;
      if (ans == 'attack') {
        doBattle();
      } else {
        alert('Game Over・ﾟ｡(´；д；`) ｡ﾟ・Game Over');
      }
      break;
    }
  }

  function getCommand() {
    const cmd = prompt('Enter "attack" or "retreat"');
    if (cmd === null) return
    let ret = cmd.toLowerCase();
    if (ret != 'attack' && ret != 'retreat') ret = '';
    return ret;
  }

  function doBattle() {
    while (tekiArray.length) {
      if (Math.random() < tekiArray[0].accuracy) {
        ourHero.hitPoints -= tekiArray[0].firepower;
        console.log(ourHero.hitPoints)
        alert(`攻撃を受けた ${tekiArray[0].accuracy} ${ourHero.hitPoints}`);
      }
      if (Math.random() < ourHero.accuracy) {
        tekiArray[0].hitPoints -= ourHero.firepower;
        alert(`攻撃を仕掛けた ${tekiArray[0].accuracy} ${ourHero.hitPoints}`);
      }
      if (tekiArray[0].hitPoints <= 0) {
        alert(`You destroyed the ship successfully!`);
        tekiArray.shift();
        if (!tekiArray.length){
          console.log("(๑˃̵ᴗ˂̵)و 勝利!! (๑˃̵ᴗ˂̵)و ")
        }else {
          startPrompt()
        }
      }
      if (this.hitPoints <= 0) {
        alert("Game Over・ﾟ｡(´；д；`) ｡ﾟ・Game Over!");
        startPrompt();
      }
    }
  }
}
game();