Как переключаться между 3 различными уровнями игры, используя DOM и JavaScript? Например. Легкий, средний и жесткий

Question

Я пытаюсь сделать простую игру с использованием DOM и JavaScript, и в этой игре у меня есть 3 различных уровня: легкий, средний и сложный. По умолчанию при загрузке страницы используется простой уровень! Но я хочу иметь возможность переключаться между 3 различными уровнями, используя JavaScript!

Это можно сделать, используя сеанс cookie javascript, поэтому при нажатии кнопки используется / активируется определенная функция, затем эта функция используется до тех пор, пока пользователь не нажмет другую кнопку, например, средний уровень.

Например:

function easylevel() {
}

function mediumlevel() {
}

function hardlevel() {
}

Таким образом, любая из вышеперечисленных функций активируется и сохраняется в сеансе cookie, нажав кнопку, например:

<input type="button" onclick="easylevel()" value="Easy Level" />
<input type="button" onclick="mediumlevel()" value="Medium Level" />
<input type="button" onclick="hardlevel()" value="Hard Level" />

Я уже пробовал это, но это не работает, может кто-нибудь объяснить мне, где я иду не так! Я на 200% уверен, что я не прав, потому что я не очень разбираюсь в JS, поэтому обязательно нуждаюсь в помощи и совете!

Answer 1

Если вы хотите, чтобы функция вызывалась повторно, вы можете использовать setInterval

<script>
var intervalInMilliseconds = 1000; // change this to watever value you like
var activeInterval = undefined;
function startEasyLevel() {
    if (activeInterval) {
         clearInterval(activeInterval);
    }
    activeInterval = setInterval(easylevel, intervalInMilliseconds);
}
function startMediumLevel() {
    if (activeInterval) {
         clearInterval(activeInterval);
    }
    activeInterval = setInterval(mediumlevel, intervalInMilliseconds);
}
function startHardLevel() {
    if (activeInterval) {
         clearInterval(activeInterval);
    }
    activeInterval = setInterval(hardlevel, intervalInMilliseconds);
}
</script>

<input type="button" onclick="startEasyLevel()" value="Easy Level" />
<input type="button" onclick="startMediumLevel()" value="Medium Level" />
<input type="button" onclick="startHardLevel()" value="Hard Level" />

Добавьте к этому свои функции текущего уровня, и они будут вызывать функцию каждую секунду.Как только вы нажмете одну из кнопок, она прекратит вызывать функцию текущего уровня и продолжит вызывать функцию, связанную с нажатой кнопкой.

Если вы хотите, чтобы какой-то уровень был загружен по умолчанию, вы можете использовать событие onloadэлемента окна:

window.onload = startEasyLevel;