Geheugenspel javascript

Geplaatst op door

De onderstaande code draagt zorg voor een interactieve website om het geheugen te trainen. Via een array in javascript worden reeksen samengesteld in een specifieke volgorde. De items kunnen worden verplaatst met de muis. Wanneer een item op de juiste plek staat wordt deze groen. 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Geheugenspel javascript</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <select id="sequenceSelect" onchange="scrambleRows()">
        <!-- Keuzemenu -->
    </select>

    <ul id="sortable-list" ondragover="allowDrop(event)" ondrop="drop(event)">
        <!-- Lijst  -->
    </ul>

    <div class="button-container">
        <button onclick="previousSequence()">Vorige</button>
        <button onclick="nextSequence()">Volgende</button>
    </div>

    <div class="button-container">
        <button onclick="scrambleRows()">Scramble</button>
        <button onclick="placeInCorrectOrder()">Oplossen</button>
    </div>

    <script src="script.js"></script>

</body>

</html>

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

li {
    border: 1px solid #ddd;
    padding: 10px;
    margin: 5px;
    transition: background-color 0.3s;
    cursor: grab;
}

li.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

li.correct-position {
    background-color: lightgreen;
}

select {
    margin-top: 10px;
}

select, button {
    display: block;
    width: 100%;
    margin: 10px 0;
}

.button-container {
    display: flex;
    justify-content: space-between;
}

.button-container button {
    width: 48%;
}


// array met keuzes
const arrReeksen = [
    'Reeks 1, A, B, C',
    'Reeks 2, D, E, F'
];

// vorige reeks
function previousSequence() {
    var select = document.getElementById('sequenceSelect');
    if (select.selectedIndex > 0) {
        select.selectedIndex--;
        scrambleRows();
    }
}

// volgende reeks
function nextSequence() {
    var select = document.getElementById('sequenceSelect');
    if (select.selectedIndex < select.options.length - 1) {
        select.selectedIndex++;
        scrambleRows();
    }
}

// array inlezen
function readArr(arrReeksen) {
    
    const sequences = {};
    
    for (let i = 0; i < arrReeksen.length; i++) {
        const values = arrReeksen[i].split(',');
        const sequenceName = values[0].trim();
        sequences[sequenceName] = {};

        for (let j = 1; j < values.length; j++) {
            sequences[sequenceName][j] = values[j].trim();
        }
    }

    return sequences;
}

// keuzemenu voorzien van waarden
function populateDropdown(sequences) {
    var sequenceSelect = document.getElementById("sequenceSelect");

    // Clear existing options
    sequenceSelect.innerHTML = "";

    // Add options based on loaded sequences
    Object.keys(sequences).forEach(function(sequenceName) {
        var option = document.createElement("option");
        option.value = sequenceName;
        option.text = sequenceName;
        sequenceSelect.add(option);
    });
}

// items door elkaar zetten
function scrambleRows() {

    var sequenceSelect = document.getElementById("sequenceSelect");
    var sortableList = document.getElementById("sortable-list");

    sortableList.innerHTML = "";

    var selectedSequence = sequenceSelect.value;
    var items = Object.values(sequences[selectedSequence]);

    shuffleArray(items);

    items.forEach(function(item) {
        var listItem = createListItem(item);
        sortableList.appendChild(listItem);
    });

    checkOrder();
}

function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
}

function createListItem(text) {
    var listItem = document.createElement("li");
    listItem.textContent = text;
    listItem.draggable = true;
    listItem.addEventListener('dragstart', dragStart);
    listItem.addEventListener('dragend', dragEnd);
    return listItem;
}

function allowDrop(event) {
    event.preventDefault();
}

function dragStart(event) {
    event.dataTransfer.setData('text/plain', event.target.textContent);
    event.target.classList.add('dragging');
}

function dragEnd(event) {
    event.target.classList.remove('dragging');
}

// item plaatsen
function drop(event) {
    event.preventDefault();
    const draggedText = event.dataTransfer.getData('text/plain');
    const draggedItem = document.querySelector('.dragging');

    if (draggedItem) {
        const targetItem = event.target.closest('li');

        if (targetItem && targetItem !== draggedItem) {
            const tempText = targetItem.textContent;
            targetItem.textContent = draggedText;
            draggedItem.textContent = tempText;
            checkOrder();
        }
    }
}

// oorspronkelijke volgorde
function placeInCorrectOrder() {
    var sequenceSelect = document.getElementById("sequenceSelect");
    var sortableList = document.getElementById("sortable-list");

    sortableList.innerHTML = "";

    var selectedSequence = sequenceSelect.value;
    var items = Object.values(sequences[selectedSequence]);

    items.forEach(function(item) {
        var listItem = createListItem(item);
        sortableList.appendChild(listItem);
    });

    checkOrder();
}

function isItemInCorrectPosition(item) {
    const selectedSequence = document.getElementById("sequenceSelect").value;
    const correctPosition = sequences[selectedSequence][Array.from(item.parentNode.children).indexOf(item) + 1];
    return item.textContent.trim() === correctPosition;
}

function checkOrder() {
    const listItems = document.querySelectorAll('#sortable-list li');

    listItems.forEach(item => {
        if (isItemInCorrectPosition(item)) {
            item.classList.add('correct-position');
        } else {
            item.classList.remove('correct-position');
        }
    });
}

var sequences = readArr(arrReeksen);
populateDropdown(sequences);
scrambleRows();