@Akrei

Как обновить элемент «canvas» до окончания выполнения js?

Выполняя задание из книги JavaScript для детей Ника Моргана столкнулся с проблемой написания варианта игры виселица, в которой необходимо в случае неправильно угаданной буквы нарисовать кусочек повешенного человечка. Я рисую новые части с учетом уменьшения количества попыток, однако не смотря на то, что программа учитывает все изменения в элементе для рисования, происходят они только по окончанию выполнения программы и вывода итога. Вопрос в том, как сделать так, что бы изменения в элементе "canvas" происходили по ходу игры, а не после ее окончания. Все обращения к пользователю происходят по средствам модальных окон.

function randomWord(words) { //рандомный выбор слова из массива
			return words[Math.floor(Math.random() * words.length)];
		}

		function returnAnswerArray(word) { //вставка прочерков относительно длинный слова
			var aArray = [];

			for (i = 0; i < word.length; i++) {
				aArray[i] = "_";
			}
			return aArray;
		}

		function promptUser() { //запрос буквы от пользователя
			var guess = prompt("Введите предполагаемую букву");
			guess = guess.toLowerCase();
			return guess;
		}

		function returnCheck(guessed, guess, check) { //проверка на ввод данной буквы ранее
			for (k = 0; k < guessed.length; k++) {
				if (guessed[k] == guess) {
					alert("Данную букву вы уже вводили");
					check = false;
				}
			}
			return (check);
		}

		function pushGuessed(guessed, check, guess) { //если букву не вводили добавление ее в массив guessed
			if (check === true) {
				guessed.push(guess);
			}
			return (guessed);
		}

		function remainingLettersSubtract(word, check, answerArray, remainingLetters) { //уменьшение количества необходимых для угадывания букв в случае если буква угадана верно
			for (j = 0; j < word.length && check === true; j++) { 
				if (word[j] === guess) {
					answerArray[j] = guess;
					remainingLetters--;
				}
			}
			return (remainingLetters);		
		}

		function checkAttempt(attempt, word, check, guess) { //проверка необходимости вычитания количества попыток (следующая функция отнимает попытки однако она будет выполнена только в случае если букву ранее не вводили(за это отвечает check) и данной буквы в слове нет(за это отвечает attempt))
			for (j = 0; j < word.length && check === true; j++) {
				if (word[j] === guess) {
					attempt++;
				}
			}
			return(attempt);
		}

		function subtractAttempt(attempt, attempts, check) { //вычитание попытки
			if (attempt === 0 && check === true) {
				attempts--;
			}
			return (attempts);
		}

		function checkAndSubtractAttempt() { //уменьшение количества попыток если буква не угадана и не вводилась ранее
			var attempt = 0;
			attempt = checkAttempt(attempt, word, check, guess);
			attempts = subtractAttempt(attempt, attempts, check);
			return (attempts);
		}

		function totalGame(answerArray, remainingLetters, word, attempts) { //итог игры
			alert(answerArray.join(" "));
			if (remainingLetters === 0) {
				alert("Поздравляем, угаданное слово " + word);
			} else if (attempts === 0) {
				alert("Вы проиграли");
			} else {
				alert("Ну нехотите, как хотите");
			}	
		}
		function clear() {

		}
		var human = function (attempts) { //рисование человечка
			var canvas = document.getElementById("canvas");
			var ctx = canvas.getContext("2d");
			ctx.lineWidth = 4;
			ctx.strokeStyle = "Grey";
			ctx.beginPath();

			if (attempts < 6) {
				ctx.moveTo(50, 200);  //основание
				ctx.lineTo(150, 200);
				ctx.lineTo(100, 180);
				ctx.lineTo(50, 200);
				ctx.lineTo(100, 200);
			}

			if (attempts < 5) {
				ctx.lineTo(100, 50);  //столб
				ctx.lineTo(200, 50);
				ctx.lineTo(200, 80);
			}

			if (attempts < 4) {
				ctx.moveTo(210, 90); //голова
				ctx.arc(200, 90, 10, 0, Math.PI*2, false);
			}

			if (attempts < 3) {
				ctx.moveTo(200, 100);  //туловище
				ctx.lineTo(200, 140);
			}

			if (attempts < 2) {
				ctx.lineTo(190, 170); //руки
				ctx.moveTo(200, 140);
				ctx.lineTo(210, 170);
			}

			if (attempts < 1) {		//ноги
				ctx.moveTo(200, 115);
				ctx.lineTo(190, 135);
				ctx.moveTo(200, 115);
				ctx.lineTo(210, 135);
			}


			ctx.stroke();
		}


		var words = [ //массив слов
		"помидор",
		"киви"];

		var word = randomWord(words); //рандомный выбор слова из массива
		var answerArray = returnAnswerArray(word); //вставка прочерков относительно длинный слова
		var remainingLetters = word.length;
		var guessed = [];
		var attempts = 6;

		while (remainingLetters > 0 && attempts > 0) {
			console.log("remainingLetters " + remainingLetters);
			alert(answerArray.join(" ")); //отображение текущего состояния игры
			var guess = promptUser(); //запрос буквы от пользователя
			if (guess === null) { //действие в случае нажатия отмены
				break; 
			} else if (guess.length !== 1) { //действие в случае ввода нескольких букв
				alert("Введите одну букву");
			} else { //если ввели одну букву
					var check = true;
					check = returnCheck(guessed, guess, check); //проверка на ввод данной буквы ранее
					console.log(check);
					guessed = pushGuessed(guessed, check, guess); //если букву не вводили добавление ее в массив guessed
					remainingLetters = remainingLettersSubtract(word, check, answerArray, remainingLetters); //уменьшение количества необходимых для угадывания букв в случае если буква угадана верно
					attempts = checkAndSubtractAttempt(); //уменьшение количества попыток если буква не угадана и не вводилась ранее
					human(attempts); //отображение частей человечка, относительно количества оставшихся попыток
					console.log("guessed " + guessed);
				}
			console.log("attempts " + attempts);
			}
		totalGame(answerArray, remainingLetters, word, attempts); //отображение победы или поражения
  • Вопрос задан
  • 456 просмотров
Решения вопроса 1
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы