Ze

by Dutton

HTML

<div id="vpGame">
  <img id="layout" src="https://i.imgur.com/m7UjzFy.png">

  <div id="battleArea">
    <div id="letters"></div>
    <div id="numbers"></div>
    <div id="board"></div>
  </div>

  <div id="stats">
    <div>Schoten: <span id="shots">0</span></div>
    <div>Gevonden: <span id="foundShips">0</span>/5</div>
    <div>Tijd: <span id="timer">0:00</span></div>
  </div>

  <div id="comboText"></div>

  <div id="startPopup" class="show">
    <div class="infoBox">
      <div class="infoTitle">Zeeslag</div>

      <div class="infoText">
        Hallo allemaal, de ZomerActie is begonnen! Je kunt vanaf vandaag 13 juli t/m 9 aug zeeslag doen. Ken je het spel nog niet? Geen probleem.. Zie hieronder de uitleg:<br><br>

        Op het speelbord liggen 5 schepen verstopt:<br>
        Patrouilleschip (2 vakjes)<br>
        Vliegdekschip (5 vakjes)<br>
        Onderzeeër (3 vakjes)<br>
        Slagschip (4 vakjes)<br>
        Torpedobootjager (3 vakjes)<br><br>

        De schepen liggen horizontaal of verticaal. Klik op de vakjes en probeer alle schepen te vinden.<br>
        ⚪ Een wit bolletje betekent dat je mis hebt geschoten.<br>
        🔵 Een blauw bolletje betekent dat je een deel van een schip hebt geraakt.<br><br>

        Zodra je alle vakjes van een schip hebt geraakt, krijg je een melding dat het schip is gezonken. Probeer alle schepen te vinden met zo min mogelijk schoten. Heb je alle schepen gevonden? Maak dan een screenshot waarop je aantal schoten en tijd zichtbaar zijn en stuur deze naar het CompetitieTeam.<br><br>

        <span style="color:#ff4b6e;"><b>Let op: Je kunt dit spel maar één keer spelen. Dit is technisch ingesteld.</b></span><br><br>

        Heel veel succes!
      </div>

      <button id="startBtn">Start spel</button>
    </div>
  </div>

  <div id="shipPopup">
    <div id="shipPopupBox"></div>
  </div>

  <div id="winPopup">
    <div class="infoBox endBox">
      <div...

CSS

html,
body {
  margin: 0;
  padding: 0;
  width: 688px;
  height: 500px;
  overflow: hidden;
  background: transparent;
}

#vpGame {
  position: relative;
  width: 688px;
  height: 500px;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

#layout {
  position: absolute;
  left: 0;
  top: 0;
  width: 688px;
  height: 500px;
  display: block;
  pointer-events: none;
}

#battleArea {
  position: absolute;
  left: 108px;
  top: 100px;
  width: 470px;
  height: 300px;
  z-index: 3;
  pointer-events: none;
}

#letters {
  position: absolute;
  left: 31px;
  top: 0;
  width: 450px;
  height: 24px;
  display: grid;
  grid-template-columns: repeat(10, 45px);
  text-align: center;
  pointer-events: none;
  z-index: 4;
}

#letters div {
  font-size: 16px;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0,65,110,.85);
  line-height: 24px;
}

#numbers {
  position: absolute;
  left: 0;
  top: 30px;
  width: 25px;
  height: 250px;
  display: grid;
  grid-template-rows: repeat(10, 25px);
  text-align: center;
  pointer-events: none;
  z-index: 4;
}

#numbers div {
  font-size: 15px;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0,65,110,.85);
  line-height: 25px;
}

#board {
  position: absolute;
  left: 31px;
  top: 30px;
  width: 450px;
  height: 250px;
  display: grid;
  grid-template-columns: repeat(10, 45px);
  grid-template-rows: repeat(10, 25px);
  z-index: 5;
  pointer-events: auto;
}

.cell {
  position: relative;
  width: 40px;
  height: 20px;
  margin: 2px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(179,239,255,.96), rgba(83,177,223,.96));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.7), 0 3px 7px rgba(0,75,125,.2);
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
  pointer-events: auto;
}

.cell:hover {
  transform: translateY(-3px)...

JavaScript

const board = document.getElementById("board");
const letters = document.getElementById("letters");
const numbers = document.getElementById("numbers");
const shotsEl = document.getElementById("shots");
const foundShipsEl = document.getElementById("foundShips");
const timerEl = document.getElementById("timer");
const winPopup = document.getElementById("winPopup");
const startPopup = document.getElementById("startPopup");
const startBtn = document.getElementById("startBtn");
const shipPopup = document.getElementById("shipPopupBox");
const battleArea = document.getElementById("battleArea");
const endText = document.getElementById("endText");
const comboText = document.getElementById("comboText");
const vpGame = document.getElementById("vpGame");

const testMode = window.location.href.includes("show=concept") || window.location.href.includes("jsfiddle");
const playKey = "vpZeeslagZomerActie2026";

const size = 10;
const alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"];

const shipTypes = [
  { name: "patrouilleschip", positions: ["H1", "H2"] },
  { name: "vliegdekschip", positions: ["A4", "B4", "C4", "D4", "E4"] },
  { name: "onderzeeër", positions: ["H7", "H8", "H9"] },
  { name: "slagschip", positions: ["A9", "B9", "C9", "D9"] },
  { name: "torpedobootjager", positions: ["J4", "J5", "J6"] }
];

let shots = 0;
let hits = 0;
let foundShips = 0;
let totalHits = 0;
let ships = [];
let popupTimer = null;
let started = false;
let finished = false;
let timerSeconds = 0;
let timerInterval = null;
let combo = 0;

if (localStorage.getItem(playKey) && !testMode) {
  document.body.innerHTML = `
    <div style="width:688px;height:500px;display:flex;align-items:center;justify-content:center;background:#7dc3e4;font-family:Arial;text-align:center;color:white;font-weight:900;font-size:28px;text-shadow:0 2px 4px rgba(0,0,0,.3);">
      Je hebt Zeeslag al gespeeld!
    </div>
  `;
} else {
  startGame();
}

function...