如何用 JavaScript 制作猜谜游戏
2021-08-25 11:46:43
浏览数 (2815)
在本教程中,我们将制作一个简单的猜数字游戏,它将生成一个 0 - 10 之间的随机数(你可以将最大数字设置为你想要的任何数字),然后如果用户猜到正确的数字,它将显示或其他将显示错误答案。
实例代码
<input type="text" placeholder="Your Guess" id="inputfield">
<button id="inputsubmit">Submit</button>
<!-- The results will be shown here -->
<div id="result"></div>
const inputfield = document.getElementById('inputfield')
const inputsubmit = document.getElementById('inputsubmit')
const result = document.getElementById('result')
const random = Math.floor(Math.random() * 10)
inputsubmit.addEventListener('click', () => {
const inputvalue = inputfield.value
const input = parseInt(inputvalue)
if ( random === input ) {
result.innerText = "Correct answer"
} else {
result.innerText = "Wrong answer"
}
})
实现内容
在HTML中,只制作了一个用于猜测数字的输入字段(input),一个用于提交猜测的按钮(button)以及一个用来显示结果的div。
在JavaScript中,我们使用 getElementById 获取在 HTML 中所需要的这些内容。然后再通过 Math.random() 生成一个随机数,并将其乘以10(这是最大数字,你也可以将它改为任何你想要的数值。)
接着,我们再添加一个事件监听器,创建一个名为 inputvalue 的常量并在其中传递 inputfield.value,然后我们使用 parseInt 来获取 inputvalue 的整数值。在我们只使用 if 语句,所以如果随机 === 输入,那么我们将在结果 div 中写入“正确答案”,否则我们将在结果 div 中写入“错误答案”。
总结
本篇文章介绍到此就结束了,感谢各位的观看。