[JavaScript] Canvas - игра "Виселица" - Помощь студентам

krikqwerty · 12.10.2017, 13:42

Здравствуйте, не могу понять как отрисовывать с помощью canvas в реальном времени. Пишу простенькую программу(Виселица): пользователю загадывают слово, далее просят ввести букву, пользователь вводит буквы до тех пор пока не ошибется, как только ошибка сделана, вызывается функция которая рисует голову, если еще ошибка то тело и т.д. Но функция не выводит голову сразу, а ждет окончание основного тела программы, и после выводит все части тела которые должны были отобразиться ранее.

Код:

function hangman(count){
    
var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
 
//рисуем эшафот
 
    ctx.beginPath();
    ctx.moveTo(50,100);
    ctx.lineTo(50,50);
    ctx.lineTo(200,50);
    ctx.lineTo(200,450);
    ctx.lineTo(50,450);
    ctx.lineTo(50,400);
    ctx.lineTo(200,400);
    ctx.stroke();
    
//человек   
    if (count === 5){
    //голова
    ctx.strokeRect(30,100,40,40);
    };
    
    //тело
    if (count === 4){
    ctx.beginPath();
    ctx.moveTo(50,140);
    ctx.lineTo(50,250);
    ctx.stroke();
    };
    
    //руки
    if(count === 3){
        //левая
    ctx.beginPath();
    ctx.moveTo(50,180);
    ctx.lineTo(5,160);
    ctx.stroke();
    };
        //правая
    if(count === 2){
    ctx.beginPath();
    ctx.moveTo(50,180);
    ctx.lineTo(95,160);
    ctx.stroke();
    };
    //ноги
        //левая
    if(count === 1){
    ctx.beginPath();
    ctx.moveTo(50,250);
    ctx.lineTo(25,310);
    ctx.stroke();
    };
        //правая
    if(count === 0){
    ctx.beginPath();
    ctx.moveTo(50,250);
    ctx.lineTo(75,310);
    ctx.stroke();
    }; 
     };
 
//игровой цикл
    while (guessLetterCount > 0 && countTry > 0) { //проверяем не закончились ли попытки и буквы
    alert(resultAnswer.join(""));                              //выводим пользователю отгаданные буквы
    var letter = prompt("Ведите одну букву!"," "); //сохраняем введенную букву
    if (letter === null){
    break;
    }if (letter.length != 1){                                  //если вводит более одной буквы уменьшаем 
                                                                              //количество попыток
    alert("Одну букву");
    countTry--;
    hangman(countTry); //рисуем конечность, но они не выводятся в момент игрового цикла
    } else {
    addLetter(letter);                                          //функция добавления буквы
    minusTry(check);                                          //функция для уменьшения количества                                               
            //попыток и сохранения неверно введенных букв
    };
     };

Буду благодарен за помощь.

Serge_Bliznykov · 12.10.2017, 14:32

выложите HTML файл целиком.

krikqwerty · 12.10.2017, 15:29

Код:

<!Doctype html>
<html>
<head>
<meta charset="uts-8">
<title>Hangman</title>
</head>
<body>
	<h1>Давай поиграем</h1>
	<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
	<canvas id="canvas" width=500 height=500></canvas>
	
	<script>	
//эшафот	
	function hangman(count){
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");
	ctx.beginPath();
	ctx.moveTo(50,100);
	ctx.lineTo(50,50);
	ctx.lineTo(200,50);
	ctx.lineTo(200,450);
	ctx.lineTo(50,450);
	ctx.lineTo(50,400);
	ctx.lineTo(200,400);
	ctx.stroke();
	
//человек	
	if (count === 5){
	//голова
	ctx.strokeRect(30,100,40,40);
	};
	
	//тело
	if (count === 4){
	ctx.beginPath();
	ctx.moveTo(50,140);
	ctx.lineTo(50,250);
	ctx.stroke();
	};
	
	//руки
	if(count === 3){
		//левая
	ctx.beginPath();
	ctx.moveTo(50,180);
	ctx.lineTo(5,160);
	ctx.stroke();
	};
		//правая
	if(count === 2){
	ctx.beginPath();
	ctx.moveTo(50,180);
	ctx.lineTo(95,160);
	ctx.stroke();
	};
	//ноги
		//левая
	if(count === 1){
	ctx.beginPath();
	ctx.moveTo(50,250);
	ctx.lineTo(25,310);
	ctx.stroke();
	};
		//правая
	if(count === 0){
	ctx.beginPath();
	ctx.moveTo(50,250);
	ctx.lineTo(75,310);
	ctx.stroke();
	}; 
	 };
	 
	var words=["мышь","яблоко","автомобиль","ручка","ноутбук"];//слова которые буду загадывать
	var answerArr=["Млекопитающее-грызун: ","Фрукт, зеленое, растет на дереве: ","Личный транспорт передвижения: ","Предмет для написания: ","Компактный портативный компьютер: "]//подсказки для пользователя
	var resultAnswer=[];//ответы пользователя
	var noRightLetter=[];//неверные ответы пользователя
	var countForNoRightLetter = 0; //счетчик для массива неверных букв
	var numberRandomOfArray = Math.floor(Math.random() * words.length)//случайная цифра в диапазоне массива
	var randomWord = words[numberRandomOfArray];//случайное слово
	var countTry = 6; //счетчик количества попыток(конечности)
	var guessLetterCount = randomWord.length; //счетчик угаданных букв
	
//генерируес массив для пользователя
	for(var k=0; k < randomWord.length;  k++){
	resultAnswer[k]= " - ";
	};
	
	var check; //для проверки. Добавили букву или нет!
//добавляем букву	
	function addLetter(letter){
		//проверка на повтор
		for (var j=0; j < noRightLetter.length; j++){
		if(letter === noRightLetter[j]){
		countTry--;
		hangman(countTry);
		return alert("Такая буква была");		
		};
		 };
		//добавляем букву
		check = false; //устанавливаем в false т.к. буква еще не добавлена
		for(var i=0; i < randomWord.length; i++) {
		if (letter === randomWord[i]){
		resultAnswer[i]=letter;
		guessLetterCount--;
		noRightLetter[countForNoRightLetter]=letter; //добавление буквы в массив неверно введенных букв
		countForNoRightLetter++;
		check = true; //добавили букву :)
		};
		 };
	};
	function minusTry(check){//проверяем добавили ли букву, если нет то, уменьшаем счетчик попыток и добавляем букву для проверки на повторение
		if(check === true){
		return;
		}else{
		countTry--;
		hangman(countTry);
		noRightLetter[countForNoRightLetter]=letter; //добавляем неверно нвведеную букву
		countForNoRightLetter++;
		  };
	};
		
	  
	function alertMessage(){//выводим результат после окончания игрового цикла
		alert("Ваше слово: " + resultAnswer.join(""));
		alert("Загаданное слово: " + randomWord);
	};
	
	
		
//игровой цикл
	while (guessLetterCount > 0 && countTry > 0) {
	alert("Осталось попыток: " + countTry + "  " + answerArr[numberRandomOfArray] + resultAnswer.join(""));
	var letter = prompt("Ведите одну букву!"," ").toLowerCase();//вводим только маленькие буквы
	if (letter === null){
	break;
	}if (letter.length != 1){
	alert("Одну букву");
	countTry--;
	hangman(countTry);
	} else {
	addLetter(letter);
	minusTry(check);
	};
	 }; 
	
	alertMessage();//выводим статистику
	</script>
</body>
</html>

Serge_Bliznykov · 12.10.2017, 17:51

проблема в использовании Alert
почитайте Порядок обработки событий
нужно менять логику кода.

krikqwerty · 15.10.2017, 20:58

Спасибо.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
C++ TCP «Игра «Виселица» топология «Клиент-Сервер»	iLeg0	Фриланс	6	26.11.2014 18:31
игра виселица	ilnar4ik18	Помощь студентам	0	28.04.2013 14:08
Игра "Виселица" на Delphi 7	Veterok0587	Фриланс	8	15.05.2010 10:54
Игра "Виселица" на Delphi 7	Veterok0587	Помощь студентам	0	12.05.2010 14:53

12.10.2017, 14:32	#2
Serge_Bliznykov Старожил Регистрация: 09.01.2008 Сообщений: 26,229	выложите HTML файл целиком.

12.10.2017, 17:51	#4
Serge_Bliznykov Старожил Регистрация: 09.01.2008 Сообщений: 26,229	проблема в использовании Alert почитайте Порядок обработки событий нужно менять логику кода.

15.10.2017, 20:58	#5
krikqwerty Пользователь Регистрация: 26.08.2012 Сообщений: 35	Спасибо.