纯前端实现—猜数字游戏
【摘要】 实现效果：B站视频效果：https://player.bilibili.com/player.html?aid=631697590 源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>猜数字</title></head><body><h1>猜数字游戏</h1><p>请输入1~100之间的自...
实现效果：
B站视频效果：https://player.bilibili.com/player.html?aid=631697590
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>猜数字</title>
</head>
<body>
<h1>猜数字游戏</h1>
<p>请输入1~100之间的自然数：</p>
<input type="text" class="userNumber">
<button class="checkNumber">确定</button>
<p class="guess"></p>
<p class="lastResult"></p>
<p class="judge"></p>
<script>
var randomNumber = Math.floor(Math.random()*100+1);
console.log(randomNumber);
var userNumber = document.getElementsByClassName("userNumber")[0];
var checkNumber = document.getElementsByClassName("checkNumber")[0];
var guess = document.getElementsByClassName("guess")[0];
var lastResult = document.getElementsByClassName("lastResult")[0];
var judge = document.getElementsByClassName("judge")[0];
var guessCount = 1;
function checkGuess() {
var userGuess = Number(userNumber.value);
if(guessCount ===1){
guess.textContent = "上次猜的数字是：";
}
guess.textContent += userGuess + " ";
if(userGuess === randomNumber){
lastResult.textContent = "恭喜你，答对了！";
lastResult.style.backgroundColor = "green";
judge.textContent = "";
gameover();
}
else if(guessCount === 10){
lastResult.textContent = "游戏结束";
gameover();
}
else{
lastResult.textContent = "你猜错了";
lastResult.style.backgroundColor = "red";
if(userGuess<randomNumber){
judge.textContent = "你猜低了";
}else if(userGuess>randomNumber){
judge.textContent = "你猜高了";
}
}
guessCount++;
userNumber.value = "";
userNumber.focus();
}
checkNumber.addEventListener("click",checkGuess);
function gameover() {
userNumber.disabled = true;
checkNumber.disable = true;
resetButton = document.createElement("button");
resetButton.textContent = "开始新游戏";
document.body.appendChild(resetButton);
resetButton.addEventListener("click",resetGame);
}
function resetGame() {
checkNumber = 1;
var resetText = document.querySelectorAll("p");
for(var i=1;i<resetText.length;i++){
resetText[i].textContent = "";
}
resetButton.parentNode.removeChild(resetButton);
userNumber.disabled = false;
checkNumber.disable = false;
userNumber.value = "";
userNumber.focus();
lastResult.style.backgroundColor = "white";
randomNumber = Math.floor(Math.random()*100+1);
console.log(randomNumber);
}
</script>
</body>
</html>
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）