VwKzqwd

script.js

const spots = [
  ['.', '.', '.', '.', '.', '.'],
  ['.', '.', '.', '.', '.', '.'],
  ['.', '.', '.', '.', '.', '.'],
  ['.', '.', '.', '.', '.', '.'],
  ['.', '.', '.', '.', '.', '.'],
  ['.', '.', '.', '.', '.', '.'],
];

const board = document.createElement('div');
const messages = document.createElement('div');
messages.id = 'messages';

document.body.append(board, messages);

const enemy = ['21', '22', '23'];
let hits = 0;

function fire(e) {
  const { target } = e;
  
  const hit = target.id.slice(-2);
  const spot = document.querySelector(`#spot-${hit}`);
  const msgs = document.querySelector('#messages');
  
  let msg = '';
  let viz = '';
  
  if (enemy.includes(hit)) {
    hits++;
    msg = hits === 3 ? 'You Win!' : 'Hit!';
    viz = 'x';
  } else {
    msg = 'Miss!';
    viz = 'o';
  }
  
  spot.innerHTML = viz;
  msgs.innerHTML = msg;
}



spots.forEach((arrs, i) => {
  const row = document.createElement('div');
  board.append(row);
  
  arrs.forEach((l, j) => {
    const spot = document.createElement('div');
    spot.id = `spot-${i}${j}`;
    spot.addEventListener('click', fire);
    spot.append(l);
    row.append(spot);
  });
});

style.css

div[id^='spot-'] {
  display: inline-block;
  width: 20px;
  height: 20px;
}

vwkzqwd.markdown

VwKzqwd

A Pen by brad on CodePen.

License.