javascript - 如何用 Javascript 创建一个简单的提示战舰游戏

Question

我需要用 Prompt 在 JS 中制作一款战舰游戏，但我怎么也搞不明白。 附示例:https://www.youtube.com/watch?v=xSpJLx72PQY 质量不是很好 这是一些代码

// BattleShip Grid
let grid = ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0"];
// Ship Locations
let shipLocations = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"];
// Hit Locations
let hit = ["3", "9", "15"];
let enterNumber = "Enter a Number Between 0-19";
// Prompts First Guess
let guess = prompt(grid + '\n' + (enterNumber));
// Checks if there is a HIT
if(hit.indexOf(guess) !== -1){
        grid[guess] = "1";
        prompt(grid + '\n' + (enterNumber));
//Checks for Miss
    } else{
        grid[guess] = "X";
        prompt(grid + '\n' + (enterNumber));
    }

需要

0 0 0 0 0 
0 0 0 0 0 
0 0 0 0 0 
0 0 0 0 0 

每次发生命中时，命中发生的 0 就会变为 1，如果未命中，则变为 X，需要在提示中更新。希望有人能帮忙。正在使用数组。如果有人能给我答案，以便我可以查看并理解它，那就太好了。我很新

点击

0 0 0 1 0 
0 0 0 0 0 
0 0 0 0 0 
0 0 0 0 0 

小姐

0 0 0 0 0 
0 X 0 0 0 
0 0 0 0 0 
0 0 0 0 0 

更新

0 0 0 1 0 
0 X 0 0 0 
0 0 0 0 0 
0 0 0 0 0 

将信用更新至 julien.giband

新代码，如何让它显示 20 个网格，即 5 x 4？

const GRID_SIZE = 5;


const grid = ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0"];
// Ship Locations
const shipLocations = ["3", "9", "15"];
let guess; //Entered value
let count = 0; //counter for rounds
do { //We'll loop indefintely until the user clicks cancel on prompt

  //Construct prompt using string template (multiline)
  const prpt = `Round #${++count}
${printGrid()}
Enter a Number Between 0-19`;
  guess = prompt(prpt);
  if (!guess && guess !== 0)
    break; //Stop when cancel was clicked
  
  const hit = shipLocations.indexOf(guess) >= 0;
  console.log(`At round ${count}, cell ${guess} is a ${hit ? 'hit': 'miss'}`);
  grid[guess] = hit ? '1' : 'X';
} while (guess || guess === 0); //Must have an exit condition

/** Pretty-print the grid **/
function printGrid() {
  let res = "";
  for (let r = 0; r < GRID_SIZE; r++) {
    let srow = "";
    for (let c = 0; c < GRID_SIZE; c++) {
      srow += " " + grid[r * GRID_SIZE + c];
    }
    res += srow.substr(1) + '\n';
  }
  return res;
}

Answer 1

//Grid size: result will be n*n cells
const GRID_SIZE = 5;

// BattleShip Grid (filled with 0s)
const grid = new Array(GRID_SIZE * GRID_SIZE);
grid.fill('0');
// Ship Locations
const shipLocations = [];
//Set test ship locations to first 3 rows fully filled
for (let i = 0; i < GRID_SIZE * 3; i++) {
  shipLocations.push("" + i);
}

let guess; //Entered value
let count = 0; //counter for rounds
do { //We'll loop indefintely until the user clicks cancel on prompt

  //Construct prompt using string templates
  guess = prompt( `Round #${++count}\n` +
                  `${printGrid()}\n` +
                  `Enter a Number Between 0-${GRID_SIZE * GRID_SIZE - 1}`);
  if (!guess && guess !== 0)
    break; //Stop when cancel was clicked
  
  const hit = shipLocations.indexOf(guess) >= 0;
  console.log(`At round ${count}, cell ${guess} is a ${hit ? 'hit': 'miss'}`);
  grid[guess] = hit ? '1' : 'X';
} while (guess || guess === 0); //Must have an exit condition

/** Pretty-print the grid **/
function printGrid() {
  let res = "";
  for (let r = 0; r < GRID_SIZE; r++) {
    let srow = "";
    for (let c = 0; c < GRID_SIZE; c++) {
      srow += " " + grid[r * GRID_SIZE + c];
    }
    res += srow.substr(1) + '\n';
  }
  return res;
}