Решил сделать Виселицу с интерфейсом! Вывожу загаданное слово в канвас в виде кол-во "_". Проблема заключается в том, что при нажатии на кнопку у меня буква становиться в самое начало. Как можно вставлять ее туда где ее место слове?
// *Инициализируем канвас
const canvas = document.querySelector(".canvas");
const ctx = canvas.getContext("2d");
// *Переменные
const words = ["dog", "pizza"];
const lettersArray = [
"q",
"w",
"e",
"r",
"t",
"y",
"u",
"i",
"o",
"p",
"a",
"s",
"d",
"f",
"g",
"h",
"j",
"k",
"l",
"z",
"x",
"c",
"v",
"b",
"n",
"m",
];
const buttonsField = document.querySelector(".buttons");
let attempts = 9;
let remainingLetters;
// *Создаем кнопки
lettersArray.forEach((letter) => {
const button = document.createElement("button");
button.innerText = letter;
button.classList.add("letter-btn");
buttonsField.append(button);
});
// *При нажатии делаем кнопки недоступными
const letterBtnsArray = document.querySelectorAll(".letter-btn");
letterBtnsArray.forEach((letterBtn) => {
letterBtn.addEventListener("click", function (e) {
btn = e.target;
btn.classList.add("pressed");
btn.setAttribute("disabled", true);
});
});
// *Выбираем рандомное слово
function chooseRandomWord(word) {
return word[Math.floor(Math.random() * word.length)];
}
// *Создаем массив, в котором вместо букв будут "_"
function setupArray(word) {
let answerArray = [];
for (let i = 0; i < word.length; i++) {
answerArray[i] = "_";
}
return answerArray;
}
// *Рисуем на канвасе слово
function drawWord(answerArray) {
x = 100;
for (let i = 0; i < answerArray.length; i++) {
ctx.fillRect(x, 200, 50, 3);
x += 75;
}
}
let lastLetter;
letterBtnsArray.forEach((letterBtn) => {
letterBtn.addEventListener("click", function (e) {
lastLetter = e.target.innerText.toLowerCase();
checkAnswer(lastLetter, word, answerArray);
});
});
function checkAnswer(guess, word, answerArray) {
x = 115;
for (let i = 0; i < word.length; i++) {
if (guess === word[i]) {
if (guess !== answerArray[i]) {
answerArray[i] = guess;
ctx.font = "48px serif";
ctx.fillText(answerArray[i], x, 200);
}
}
}
}
const word = chooseRandomWord(words);
const answerArray = setupArray(word);
remainingLetters = word.length;
drawWord(answerArray);