我是html5的新手,我正在尝试制作一个简单的游戏,您必须猜测0到99之间的数字。
我已经让它工作但是在某些时候(可能是我开始添加css?)按钮停止工作时单击它。按Enter键仍然可以正常工作。
任何想法为什么click事件处理程序停止工作以及如何解决它?
以下是代码:
<!doctype html>
<meta charset="utf-8">
<title>Guessing Game</title>
<body>
<p id="Message">I am thinking of a number between 0 and 99.</p>
<input id="Guess" type="text" placeholder="Enter your guess here." autofocus>
<button id="GuessClick" type=button>enter</button>
<script type="text/javascript">
var RandomNumber = 0;
var NumberGuessed = 0;
var NumberOfGuesses = 0;
var Message = document.querySelector("#Message");
var Guess = document.querySelector("#Guess");
var GuessClick = document.querySelector("#GuessClick");
RandomNumber = Math.floor(Math.random() * 100);
GuessClick.style.cursor = "pointer";
GuessClick.addEventListener("click", EnterGuess, false);
window.addEventListener("keydown", EnterGuess, false);
function EnterGuess()
{
if(event.keyCode !== 13)
{
return;
}
NumberGuessed = parseInt(Guess.value);
if (isNaN(NumberGuessed) === true || NumberGuessed < 0 || NumberGuessed > 99)
{
Message.innerHTML = "Please enter a number between 0 and 99 inclusive. " + "You have guessed " + NumberOfGuesses + " times.";
return;
}
if (NumberGuessed > RandomNumber)
{
NumberOfGuesses = NumberOfGuesses + 1;
Message.innerHTML = "Lower, you have guessed " + NumberOfGuesses + " times. Previous guess was " + NumberGuessed + ".";
Guess.value = ""
}
if (NumberGuessed < RandomNumber)
{
NumberOfGuesses = NumberOfGuesses + 1;
Message.innerHTML = "Higher, you have guessed " + NumberOfGuesses + " times. Previous guess was " + NumberGuessed + ".";
Guess.value = ""
}
if (NumberGuessed === RandomNumber)
{
Message.innerHTML = "Correct! The mystery number was " + RandomNumber + ". It took you " + NumberOfGuesses + " guesses to get it! Enter another number to play again";
NumberOfGuesses = 0;
RandomNumber = Math.floor(Math.random() * 100);
Guess.value = ""
}
}
</script>
<style>
#GuessClick
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #fff;
padding: 10px 20px;
border: 2px solid #000;
cursor: pointer;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background:-webkit-linear-gradient(top, #a3a3a3, #000);
background:-moz-linear-gradient(top, #a3a3a3, #000);
background: linear-gradient(top, #a3a3a3, #000);
-webkit-box-shadow: 5px 5px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 5px 5px 3px rgba(0,0,0,0.5);
box-shadow: 5px 5px 3px rgba(0,0,0,0.5);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#GuessClick:hover
{
background: -webkit-linear-gradient(top, #acc7a3, #506651);
background: -moz-linear-gradient(top, #acc7a3, #506651);
background: linear-gradient(top, #acc7a3, #506651);
}
#GuessClick:active
{
background: -webkit-linear-gradient(top, #858565, #c5c9a9);
background: -moz-linear-gradient(top, #858565, #c5c9a9);
background: linear-gradient(top, #858565, #c5c9a9);
}
</style>
</body>
提前致谢。
答案 0 :(得分:4)
鼠标单击的event.keyCode将使您的if语句失败并退出该函数,您需要调整if以检查输入密钥或单击
if((event.keyCode !== 13) && (event.keyCode !== 0))
{
return;
}