Vanilla JS - игра не работает - PullRequest
Новая
       32

Vanilla JS - игра не работает

0 голосов
/ 29 мая 2018

Я решил написать простую игру на практике JavaScript, и нашел более сложную задачу, чем предполагалось изначально.Игра должна работать в соответствии с этими инструкциями:

при запуске игры в верхней части страницы появится одно из трех слов («красный», «синий» или «желтый») -Затем у игрока есть три секунды, чтобы нажать на кнопку соответствующего цвета - в противном случае игра заканчивается

. При нажатии кнопки запуска игры игра начинается, но сразу же перенаправляется на страницу завершения игры.Я считаю, что моя главная проблема заключается в установке и очистке тайм-аута.

    //begin the game
    function start() {
	getCommand();
	document.getElementById("start").hidden = true;
    }

    function getCommand() {
	//generate color of button player should push
	var computer = Math.floor(Math.random() * 3) + 1;
	var color;
	switch (computer) {
	case 1:
	color = "blue";
	break;
	case 2:
	color = "red";
	break;
	case 3:
	color = "yellow";
	break;
	}
	
	//generate color of text displayed to screen
	var computerB = Math.floor(Math.random() * 3) + 1;
	var textColor;
	switch (computerB) {
	case 1:
	textColor = "#0000ff";
	break;
	case 2:
	textColor = "#ff0000";
	break;
	case 3:
	textColor = "#ffff00";
	break;
	}
	//print instructions for player to screen
	document.getElementById("display").innerHTML = color;
	document.getElementById("display").style.color = textColor;
	countdown();
    }
	
    //begin the countdown
    function countdown(color, click) {
	var timer = setTimeout(endGame(), 5000);
	
	//stop countdown upon correct event
	if (color == click) {
	clearTimeout(timer);
	start();
	}	 
	}
	
    //end the game
    function endGame() {
	window.location.href = "endGame.html";
    }
    <!DOCTYPE html>

    <html lang="en">
    <head>
	<meta charset="utf-8">
	<title>Buttons</title>
	<link rel="stylesheet" href="styles/normalize.css">
	<link rel="stylesheet" href="styles/buttons.css">
    </head>
    <body>
	<div id="commands">
	<h1 id="display"></h1>
	<script type="text/javascript" src="scripts/buttons.js"></script>
	<script type="text/javascript" src="scripts/animateClick.js"></script>
	</div>
	<div id="buttons">
	<img src="images/redButton.png" alt="" width="120px" id="redButton" onclick="countdown("red")" onmousedown="clickSwapRed()" onmouseup="swapBackRed()">
		<img src="images/blueButton.png" alt="" width="120px" id="blueButton" onclick="countdown("blue")" onmousedown="clickSwapBlue()" onmouseup="swapBackBlue()">
		<img src="images/yellowButton.png" alt="" width="120px" id="yellowButton" onclick="countdown("yellow")" onmousedown="clickSwapYellow()" onmouseup="swapBackYellow()">
	</div>
	<div id="bottom">
		<button id="start" onclick="start()">Start Game</button>
	</div>
    </body>
    </html>

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

...