首页 1 2 3 4 5 6 7

javascript 猜字游戏

JavaScript猜字游戏是一款非常有趣的小游戏，它可以很好地帮助我们以交互的方式学习JavaScript的基础语法和常用API。该游戏的玩法很简单：玩家通过在页面上输入数字，猜测出计算机随机生成的数字。下面我们就来看看如何实现这个小游戏。

首先，我们需要在HTML文件中添加一个输入框和一个按钮，用于获取玩家输入的数字，并触发猜数逻辑。代码如下：

<body>
<h1>猜数字小游戏</h1>
<label for="guess">请输入1-100的数字：</label>
<input type="text" id="guess" name="guess">
<br/>
<br/>
<button onclick="guessNumber()">猜！</button>
<div id="result"></div>
</body>

接着，我们需要在JavaScript文件中编写猜数逻辑。具体来说，我们需要定义一个名为randomNumber的函数，用于生成一个随机数；定义一个名为guessNumber的函数，来判断玩家的猜测是否正确。其中，guessNumber函数需要和HTML文件中的按钮绑定，当玩家点击按钮时，该函数被触发。代码如下：

<script>
function randomNumber() {
return Math.floor(Math.random() * 100) + 1;
}
var correctNumber = randomNumber();
function guessNumber() {
var guess = parseInt(document.getElementById("guess").value);
if (guess === correctNumber) {
document.getElementById("result").innerHTML = "恭喜你，猜对了！";
} else if (guess >correctNumber) {
document.getElementById("result").innerHTML = "猜大了！请再试一次。";
} else {
document.getElementById("result").innerHTML = "猜小了！请再试一次。";
}
}
</script>

在guessNumber函数中，我们首先获取了玩家的猜测，并将其转为整数类型；然后使用if语句判断玩家的猜测是否正确，如果猜测正确，则显示“恭喜你，猜对了！”；如果猜测大了，则显示“猜大了！请再试一次。”；如果猜测小了，则显示“猜小了！请再试一次。”。其中，通过document.getElementById("result").innerHTML来实现在页面上显示相应的文字提示。

需要注意的是，在每次玩家猜过之后，我们需要将输入框清空，以便下一次猜数。代码如下：

document.getElementById("guess").value = "";

最后，我们可以再添加一个“重新开始”按钮，用于重新生成随机数，并清空之前的猜测记录。代码如下：

<button onclick="resetGame()">重新开始</button>
function resetGame() {
correctNumber = randomNumber();
document.getElementById("result").innerHTML = "";
document.getElementById("guess").value = "";
}

通过以上代码，我们就成功地实现了一个简单的JavaScript猜字游戏。当然，为了丰富游戏的玩法和体验，我们还可以加入一些其他的功能，比如：增加游戏难度；记录猜测次数和猜测时间等信息；添加声音和动画效果等。