zomer puzzel

by Mylastwish

HTML

<link rel="stylesheet" href="style.css">



    <div class="main-content">
        
        <div class="game-container">
            <!-- Het speelveld -->
            <div id="woordzoeker-container"></div>
            
            <!-- De woordenlijst -->
            <div class="word-list-container">
                <h3>woorden:</h3>
                <ul id="word-list"></ul>
            </div>
            <div class="word-list-container">
                <h3>De code is te claimen tot 21 juni 23.59 uur</h3>    
                <h3></h3>
                <ul id="word-list"></ul>
        </div>
    </div>

    <script src="script.js"></script><link rel="stylesheet" href="style.css">

CSS

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;       /* Zorgt dat padding binnen de hoogte valt */
    overflow-y: auto;             /* Toont alléén een scrollbalk als de tekst niet past */
    background-image: url('https://i.postimg.cc/prJHWbsd/Puzzel(1).png');
    background-size: cover;       
    background-repeat: no-repeat; 
    background-position: center top; 
    background-attachment: fixed; 
    background-color: transparent; 
    min-height: 100vh;
}


.main-content {
    position: center;
    z-index: 10;
    max-width: 460px; /* Dwingt de content in de breedte van jouw afbeelding */
    margin: 0 auto;   /* Centreert het spel perfect op het scherm */
}

.game-container {
    display: flex;
    flex-direction: column; /* Zet de woordenlijst netjes onder het speelveld */
    align-items: center;
    gap: 20px;
    margin-top: 100px;
}

#woordzoeker-container {
    display: grid;
    background: transparent; 
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    user-select: none;
    touch-action: none;
    width: 100%; /* Vult de 688px van de container */
    box-sizing: border-box;
}

.letter-cell {
    aspect-ratio: 1 / 1; /* Zorgt dat de cellen altijd perfect vierkant blijven */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    border: 1px solid #ccc;
    cursor: pointer;
    box-sizing: border-box;
}

.letter-cell.selecting {
    background-color: #ffeb3b !important;
}

.letter-cell.found {
    background-color: #a5d6a7 !important;
    color: #1b5e20;
}

.word-list-container {
    background: transparent);
    padding: 5px;
    border-radius: 2px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    width: 100%;
    box-sizing: border-box;
    text-align:...

JavaScript

// 1. PAS DIT AAN: Vul hier de letters van jouw afbeelding in
const grid = [
  ["P", "K", "E", "O", "R", "B", "M", "E", "W", "Z", "S"],
  ["I", "T", "U", "A", "P", "S", "T", "R", "A", "N", "D"],
  ["N", "N", "C", "R", "G", "N", "I", "P", "M", "A", "C"],
  ["I", "E", "E", "I", "T", "N", "A", "K", "A", "V", "S"],
  ["K", "T", "B", "K", "C", "T", "K", "Z", "J", "C", "N"],
  ["I", "T", "R", "O", "P", "I", "S", "C", "H", "B", "E"],
  ["B", "W", "A", "N", "D", "E", "L", "E", "N", "T", "M"],
  ["H", "W", "B", "Q", "J", "K", "L", "D", "M", "Y", "M"],
  ["X", "D", "K", "S", "R", "P", "A", "R", "W", "N", "E"],
  ["M", "D", "J", "P", "A", "R", "A", "S", "O", "L", "W"],
  ["E", "I", "F", "L", "A", "W", "M", "Z", "E", "E", "Z"],
];

// 2. PAS DIT AAN: Vul hier de woorden in die gezocht moeten worden
const wordsToFind = [
  "BARBECUE",
  "BIKINI",
  "CAMPING",
  "IJSJE",
  "PARASOL",
  "PRET",
  "SCHELP",
  "STRAND",
  "TENT",
  "TROPISCH",
  "VAKANTIE",
  "WANDELEN",
  "WARM",
  "ZEE",
  "ZON",
  "ZWEMBROEK",
  "ZWEMMEN",
];

const container = document.getElementById("woordzoeker-container");
const wordListUl = document.getElementById("word-list");
const rows = grid.length;
const cols = grid[0].length; // Berekent automatisch het aantal kolommen

let isSelecting = false;
let startCell = null;
let selectedCells = [];

// Woordenlijst genereren
wordsToFind.forEach((word) => {
  const li = document.createElement("li");
  li.textContent = word;
  li.id = `word-${word}`;
  wordListUl.appendChild(li);
});

// Grid opbouwen
container.style.gridTemplateColumns = `repeat(${cols}, 40px)`;

for (let r = 0; r < rows; r++) {
  for (let c = 0; c < cols; c++) {
    const cell = document.createElement("div");
    cell.classList.add("letter-cell");
    cell.textContent = grid[r][c];
    cell.dataset.row = r;
    cell.dataset.col = c;

    // Gebeurtenissen voor Muis
    cell.addEventListener("mousedown", (e) => {
     ...