JS-код, var row = (Alpha || Alpha2) .IndexOf (firstChar) не работает - PullRequest
0 голосов
/ 03 января 2019

Я новичок в JavaScripter.

Мой вопрос: (alphabet||alphabet2).indexOf(firstChar) не работает, передний код изменен мной, но не работает.Как я могу исправить этот код?

Вот код функции всего источника.этот код полезен для вас, чтобы дать мне ответ.Для суммирования добавляется строка 3 и изменяется 10 в этом коде.

function parseGuess(guess){ 
  var alphabet = ["A", "B", "C", "D", "E", "F", "G"]; 
  var alphabet2 = ["a", "b", "c", "d", "e", "f", "g"]; 
  var guessInput = document.getElementById("guessInput"); 
  if(guess === null || guess.length !== 2){ 
    alert("not correctly you must enter correct number"); 
    guessInput.focus(); 
    } else { 
    firstChar = guess.charAt(0); 
    var row = (alphabet||alphabet2).indexOf(firstChar); 
    var column = guess.charAt(1); 
    if(isNaN(row) || isNaN(column)) { 
      alert("the position value is not correct"); 
      guessInput.focus(); 
      } else if (row < 0 || row >= model.boardSize || column < 0 || column >= model.boardSize) { 
      alert("Ouch, this code escaped outside board!"); 
      guessInput.focus(); 
      } else { 
      return row + column; 
   } 
} 
return null; 
} 

Это код js

var view = {
  displayMessage: function(msg) {
    var messageArea = document.getElementById("messageArea");
    messageArea.innerHTML = msg;
  },
  displayHit: function(location) {
    var cell = document.getElementById(location);
    cell.setAttribute("class", "hit");
  },
  displayMiss: function(location) {
    var cell = document.getElementById(location);
   cell.setAttribute("class", "miss");
  }
};
// view.displayMiss("00");
// view.displayHit("34");
// view.displayMiss("55");
// view.displayHit("12");
// view.displayMiss("25");
// view.displayHit("26");
// view.displayMessage("똑똑, 이 메시지가 보이나요?");
var model = {
  boardSize: 7,
  numShips:3,
  shipLength: 3,
  shipsSunk: 0,

  ships: [{ locations: ["06", "16", "26"], hits: ["", "", ""]},
          { locations: ["24", "34", "44"], hits: ["", "", ""]},
          { locations: ["10", "11", "12"], hits: ["", "", ""]}],
  fire: function(guess){
    for (var i=0; i < this.numShips; i++){

      var ship = this.ships[i];
      locations = ship.locations;
      var index = locations.indexOf(guess);
      console.log(locations.indexOf(guess));
      if(index >= 0) {
        if(ship.hits[index] ="hit"){
view.displayMessage("이미 공격된 전함입니다.");
        return false;
      }
        ship.hits[index] = "hit";

        view.displayHit(guess);
        view.displayMessage("명중!");
        if (this.isSunk(ship)){
          view.displayMessage("전함이 격침되었습니다!");
          this.shipsSunk++;
        }
        return true;
      }
    }
    view.displayMiss(guess);
    view.displayMessage("실패했습니다.");
    return false;
  },
  isSunk : function(ship) { //매서드에도 인자 전달 가능.
    for (var i = 0; i < this.shipLength; i++){ //for문이 다 돌고 true 반환하여 전함이 격침되었습니다 출력
      if (ship.hits[i] !== "hit"){
//i 가 0 일 땐 ("hit" !== "hit") 가 되어 조건에는 해당하지 않으니까 그냥 지나감.
// i 가 1 일 땐 ("" !== "hit") 가 되어 조건에 해당하게 되니까 false 반환
        return false;
      }
    }
    return true;
  },
  generateShipLocations: function() {

    for (var i = 0; i < this.numShips; i++){
      do{
        locations = this.generateShip(); //배열에 3개의 원소 값이 리턴되어 옴
      } while (this.collision(locations));
      this.ships[i].locations = locations;
      }
    },

  generateShip: function() {
    var direction = Math.floor(Math.random() * 2);
    var row, col;

    if (direction === 1) {
      row = Math.floor(Math.random() * this.boardSize);
      col = Math.floor(Math.random() * (this.boardSize - this.shipLength + 1));
            console.log((this.boardSize - (this.shipLength + 1)))
    } else {
      row = Math.floor(Math.random() * (this.boardSize - this.shipLength + 1));
      col = Math.floor(Math.random() * this.boardSize);
    }

    var newShipLocations = [];
    for (var i = 0; i < this.shipLength; i++) {
      if (direction === 1) {
          newShipLocations.push(row + "" + (col + i));
      } else {
          newShipLocations.push((row + i) + "" + col)

      }
    }
    return newShipLocations;
  },
  collision: function(locations) {
    for (var i = 0; i < this.numShips; i++) {
      var ship = model.ships[i];
      for(var j = 0; j < locations.length; j++) {
        console.log(ship.locations.indexOf(locations[j]));
        if (ship.locations.indexOf(locations[j]) >= 0) {
          return true;
        }
      }
    }
    return false;
  }
}


var controller = {
  guesses: 0,
  processGuess: function(guess) {
    var location = parseGuess(guess); //헬퍼 함수
    this.guesses++;
    var hit = model.fire(location);
    if (hit && model.shipsSunk === model.numShips){
      view.displayMessage("여러분은 " + this.guesses +"번 추측해 전함을 모두 격침시켰습니다.");
    }
  }
};

function parseGuess(guess){
var alphabet = ["A", "B", "C", "D", "E", "F", "G"];
var alphabet2 = ["a", "B", "C", "D", "E", "F", "G"];
var guessInput = document.getElementById("guessInput");
  if(guess === null || guess.length !== 2){
    alert("입력이 올바르지 않습니다. 게임판의 문자와 숫자를 이용해 입력하세요!");
    guessInput.focus();
  } else {
    firstChar = guess.charAt(0);
    var row = (alphabet || alphabet2).indexOf(firstChar);
    var column = guess.charAt(1);

    if(isNaN(row) || isNaN(column)) {
      alert("위칫값이 올바르지 않습니다.");
      guessInput.focus();
    } else if (row < 0 || row >= model.boardSize || column < 0 || column >= model.boardSize) {
      alert("앗, 보드 바깥으로 벗어났어요!");
      guessInput.focus();
    } else {
      return row + column;
    }
  }
  return null;
}

function handleFireButton() {
  var guessInput = document.getElementById("guessInput");
  var guess = guessInput.value;
  controller.processGuess(guess);
  guessInput.value ="";
}

function init(){
  var fireButton = document.getElementById("fireButton");
  fireButton.onclick = handleFireButton;
  var guessInput = document.getElementById("guessInput");
  guessInput.onkeypress = handleKeyPress;

  model.generateShipLocations();
}

function handleKeyPress(e){
  var fireButton = document.getElementById("fireButton");
  if (e.keyCode === 13){
    fireButton.click();
    return false;
  }
}
init();

Это код HTML

<!doctype html>
<html lang="kor">
<head>
  <meta charset="utf-8" />
  <title>전함 게임</title>
  <style>
body { font-size:10px;
  background-color: black;
}
#guessInput:focus {border:3px solid red;}
div#board {
  position: relative;
  width: 1024px;
  height: 863px;
  margin: auto;
  background: url("board.jpg") no-repeat;
}

div#messageArea{
  position: absolute;
  top: 0px;
  left: 0px;
  color: rgb(83,175,19);
}
table {
  position: absolute;
  left: 173px;
  top: 98px;
  border-spacing: 0px;
}
td{ width: 94px;
height:94px;}
form {
  position:absolute;
  bottom: 0px;
  right: 0px;
  padding:15px;
  background-color: rgb(83, 175, 19);
}
form input {
  background-color: rgb(152,207,113);
  border-color:rgb(83,175,19);
  font-size: 1em;
}

.hit {
  background: url("ship.png") no-repeat center center;
}
.miss {
  background: url("miss.png") no-repeat center center;
}
  </style>
</head>
<body>
 <div id="board">
   <div id="messageArea"></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>
     <input type="text" id="guessInput" placeholder="A0" />
     <input type="button" id="fireButton" value="발사!" />
   </form>
 </div>
 <script src="battleship2.js"></script>
</body>
</html>
...