JavaScript的戰艦遊戲命中檢測不工作

我試圖編寫代碼來檢測船是否已經命中或沒有。我在船上有3艘船，每艘佔3個單元。使用js，我將3艘船放在了船上。當我運行火法時，只有最後兩艘顯示它們已經被擊中，但第一艘位置爲00,01,02的船並不表明它已經被擊中，即使一次。我哪裏做錯了？JavaScript的戰艦遊戲命中檢測不工作

這裏的HTML：

<div id='board'> 
    <div id='message'></div> 

    <table> 
     <tr> 
      <td id='00'></td> 
      <td id='01'></td> 
      <td id='02'></td> 
      <td id='03'></td> 
      <td id='04'></td> 
      <td id='05'></td> 
      <td id='06'></td> 
     </tr> 
     <tr> 
      <td id='10'></td> 
      <td id='11'></td> 
      <td id='12'></td> 
      <td id='13'></td> 
      <td id='14'></td> 
      <td id='15'></td> 
      <td id='16'></td> 
     </tr> 
     <tr> 
      <td id='20'></td> 
      <td id='21'></td> 
      <td id='22'></td> 
      <td id='23'></td> 
      <td id='24'></td> 
      <td id='25'></td> 
      <td id='26'></td> 
     </tr> 
     <tr> 
      <td id='30'></td> 
      <td id='31'></td> 
      <td id='32'></td> 
      <td id='33'></td> 
      <td id='34'></td> 
      <td id='35'></td> 
      <td id='36'></td> 
     </tr> 
     <tr> 
      <td id='40'></td> 
      <td id='41'></td> 
      <td id='42'></td> 
      <td id='43'></td> 
      <td id='44'></td> 
      <td id='45'></td> 
      <td id='46'></td> 
     </tr> 
     <tr> 
      <td id='50'></td> 
      <td id='51'></td> 
      <td id='52'></td> 
      <td id='53'></td> 
      <td id='54'></td> 
      <td id='55'></td> 
      <td id='56'></td> 
     </tr> 
     <tr> 
      <td id='60'></td> 
      <td id='61'></td> 
      <td id='62'></td> 
      <td id='63'></td> 
      <td id='64'></td> 
      <td id='65'></td> 
      <td id='66'></td> 
     </tr> 
    </table> 
    <form action='#' method='get'> 
     <input type='text' id='guessInput' placeholder='enter location: A0'/> 
     <input type='button' name='submit' value='Fire!' name='fire'/> 
    </form> 
</div>

CSS：

*{ 
margin:0px; 
padding:0px; 
} 

body{ 
background-color:black; 
} 
#message{ 
color:green; 
font-size:2em; 
text-transform:uppercase; 
font-family:sans-serif; 
} 
#board{ 
background:url('board.jpg') no-repeat; 
width:863px; 
height:1024px; 
margin:auto; 
position:relative; 
} 
table{ 
position:absolute; 
left:173px; 
top:98px; 
} 
td{ 
height:94px; 
width:94px; 
} 
form input{ 
position:absolute; 
right:0px; 
bottom:0px; 
background-color:green; 
} 
.hit{ 
background:url('ship.png') no-repeat center center; 
} 
.miss{ 
background:url('miss.png') no-repeat center center; 
}

JS：

var view={ 
showMessage:function(msg){ 
    var message=document.getElementById('message'); 
    message.innerHTML = msg; 
}, 

showHit:function(location){ 
    var cell=document.getElementById(location); 
    cell.setAttribute('class','hit'); 
}, 

showMiss:function(location){ 
    var cell=document.getElementById(location); 
    cell.setAttribute('class','miss'); 
} 
} 

var model = { 
boardSize:7, 
numShips:3, 
shipsSunk:3, 
ships:[{location:[00,01,02], hits:['','','']}, 
{location:[10,11,12], hits:['','','']}, 
{location:[20,21,22], hits:['','','']}], 

fire:function(guess){ 
    for(var i=0; i<this.numShips; i++){ 
     var ship = this.ships[i]; 
     var index=ship.location.indexOf(guess); 
     if(index>=0){ 
      ship.hits[index]='hit'; 
      view.showHit(guess); 
     } 
    } 
} 
}; 

model.fire(10); 
model.fire(11); 
model.fire(12); 
model.fire(20); 
model.fire(21);  
model.fire(22); 
model.fire(00); 
model.fire(01); 
model.fire(02);

來源

2016-02-23 pdlw

你的'火'按鈕有兩個名字 – RamRaider

你的座標00,01，和02被解釋爲int S和因此得到解決到0,1和2，因爲它假定不需要前導零值。你可以通過使用字符串來表示和比較座標來解決這個問題。而不是model.fire(00)，您將需要model.fire("00")。然後爲了比較輸入座標，您需要比較guess.charAt(0)和guess.charAt(1)以確定該座標是否爲命中。

來源

2016-02-23 22:41:04 Andrew

有點遲，但謝謝:) – pdlw

JavaScript的戰艦遊戲命中檢測不工作

回答

相關問題