HTML、CSS、JS if文は1 == 0と考えています

Question

これは私が作っているカードゲームです。 codepenはLINK

です。問題は、コードが健康状態が0のカードのみを削除することになっていますが、代わりにすべての正常性レベルのカードを削除することです。戦闘関数では、私が参照しているif文が表示されます。私は配列からの数字が0であるかどうかチェックしていますが、カードの1つに健康がありますが、それも削除されています。カードを表示するには、セットアップ機能が呼び出されたときにコメントアウトします。

var turn = true; 
 

 
var enemyCards = document.getElementById('enemy-cards'); 
 

 
var friendlyCards = document.getElementById('friendly-cards'); 
 

 
var friendlyHealth = document.getElementById('friendly-health-value'); 
 

 
var enemyHealth = document.getElementById('enemy-health-value'); 
 

 
var enemyCardArray = [[2, 3], [2, 4]]; 
 

 
var friendlyCardArray = [[3, 3], [3,2]]; 
 

 
function initialSetup() { 
 
    for (var i=0; i < enemyCardArray.length; i++) { 
 
    var card = enemyCardArray[i] 
 
    var damage = card[0]; 
 
    var health = card[1]; 
 
    enemyCards.innerHTML += "<div class='card'><h1 class='damage'>"+damage+"</h1><h1 class='health'>"+health+"</h1></div>" 
 
    } 
 

 
    for (var i=0; i < friendlyCardArray.length; i++) { 
 
    var card = friendlyCardArray[i] 
 
    var damage = card[0]; 
 
    var health = card[1]; 
 
    friendlyCards.innerHTML += "<div class='card'><h1 class='damage'>"+damage+"</h1><h1 class='health'>"+health+"</h1></div>" 
 
    } 
 
} 
 

 
function setup() { 
 
     enemyCards.innerHTML = "";//<--Set it to "" here, not in for loop 
 
     friendlyCards.innerHTML = "";//<--Set it to "" here, not in for loop 
 
     for (var i = 0; i < enemyCardArray.length; i++) { 
 
      var card = enemyCardArray[i] 
 
      var damage = card[0]; 
 
      var health = card[1]; 
 
      //enemyCards.innerHTML = ""; 
 
      enemyCards.innerHTML += "<div class='card'><h1 class='damage'>" + damage + "</h1><h1 class='health'>" + health + "</h1></div>"; 
 
       } 
 

 
     for (var i = 0; i < friendlyCardArray.length; i++) { 
 
       var card = friendlyCardArray[i] 
 
       var damage = card[0]; 
 
       var health = card[1]; 
 
       //friendlyCards.innerHTML = ""; 
 
       friendlyCards.innerHTML += "<div class='card'><h1 class='damage'>" + damage + "</h1><h1 class='health'>" + health + "</h1></div>"; 
 
       } 
 
      } 
 

 
function battle() { 
 
    if (turn === true){ 
 
    for (var i = 0; i<friendlyCardArray.length; i++) { 
 
     if (friendlyCardArray.length == enemyCardArray.length){ 
 
     enemyCardArray[i][1] -= friendlyCardArray[i][0]; 
 
     if (enemyCardArray[i][1] < 1){ 
 
      enemyCardArray.splice(i); 
 
     }else{ 
 
      
 
     } 
 
     }else{ 
 
     
 
     } 
 
    } 
 
    }else if (turn === false){ 
 
    
 
    } 
 
} 
 
initialSetup(); 
 
battle(); 
 
setup();

body { 
 
    margin: 0; 
 
    font-family: sans-serif; 
 
    position: relative; 
 
} 
 

 
#enemy-cards{ 
 
    background-color: #873a00; 
 
    width: 100%; 
 
    height: 270px; 
 
} 
 

 
#friendly-cards{ 
 
    background-color: #873a00; 
 
    width: 100%; 
 
    height: 270px; 
 
    position: fixed; 
 
    bottom: 0; 
 
} 
 

 
.card { 
 
    width: 150px; 
 
    height: 250px; 
 
    background-color: #afafaf; 
 
    margin-top: 10px; 
 
    margin-left: 10px; 
 
    margin-bottom: 10px; 
 
    position: relative; 
 
    float:left; 
 
} 
 

 
.damage { 
 
    text-align: left; 
 
    position: absolute; 
 
    bottom:0; 
 
    left: 20px; 
 
} 
 

 
.health { 
 
    text-align: right; 
 
    position: absolute; 
 
    bottom:0; 
 
    right: 20px; 
 
} 
 

 
#friendly-health{ 
 
    float:left; 
 
    width: 50%; 
 
    background-color: lightgreen; 
 
    height: 200px; 
 
} 
 
#friendly-health-value{ 
 
    position: fixed; 
 
    left: 25%; 
 
    vertical-align: middle; 
 
    color: white; 
 
} 
 

 
#enemy-health-value{ 
 
    position: fixed; 
 
    left: 75%; 
 
    vertical-align: middle; 
 
    color: white; 
 
} 
 

 
#enemy-health{ 
 
    float:left; 
 
    width: 50%; 
 
    background-color: #f73f27; 
 
    height: 200px; 
 
}

<div id="game"> 
 
    <div id="enemy-cards"> 
 
    </div> 
 
    <div id="health"> 
 
    <div id="friendly-health"> 
 
     <h1 id="friendly-health-value">20</h1> 
 
    </div> 
 
    <div id="enemy-health"> 
 
     <h1 id="enemy-health-value">20</h1> 
 
    </div> 
 
    </div> 
 
    <div id="friendly-cards"> 
 
    </div> 
 
</div>

Answer 1

enemyCardArray.splice(i);が確認されただけのカードを取り除くためにenemyCardArray.splice(i,1);でなければなりません。

splice documentationとその引数を参照してください。 start引数だけが渡された場合、その要素とそれ以降のすべての要素が削除されます。

Answer 2

文字列を比較していないことを確認し、数字を使用していることを確認してください。文字列を数字にするには、parseFloat(string)とする。