Note:您在JavaScript中看到的许多代码特性和其他编程语言类似— 函数、循环,等等。 代码语法看起来不同,但是在概念上是基本类似的。
像程序员一样思考
在编程中学习的最困难的事情之一不是我们需要学习的语法,而是如何应用它来解决现实世界的问题。
完成一个——猜数游戏
我想让你创建一个可以猜数字的游戏,它会在1~100以内随机选择一个数, 然后让玩家挑战在10轮以内猜出这个数字,每一轮都要告诉玩家正确或者错误, 如果出错了,则告诉他数字是低了还是高了,并且还要告诉玩家之前猜的数字是什么。 一旦玩家猜测正确,或者他们用完了回合,游戏将结束。 游戏结束后,可以让玩家选择再次开始。 看到这个要求,我们可以做的第一件事是开始把它分解成简单的可操作的任务,尽可能从程序员的思维去思考:
- 生成1到100之间的随机数。
- 记录玩家在第几轮。从1开始。
- 为玩家提供一种猜测数字的方法。
- 一旦提交了猜测,首先将它记录在某处,以便用户可以看到他们先前的猜测。
- 接下来检查它是否是正确的数字。
- 如果是正确的:
- 显示祝贺消息。
- 阻止玩家输入更多的猜测(这会使游戏混乱)。
- 显示控制允许玩家重新开始游戏。
- 如果它错了,并且玩家有剩余轮次:
- 告诉玩家他们错了。
- 允许他们输入另一个猜测。
- 将轮数增加1。
- 如果它是错误的,并且玩家没有剩余轮次:
- 告诉玩家游戏结束。
- 阻止玩家输入更多的猜测(这会使游戏混乱)。
- 显示控制允许玩家重新开始游戏。
- 一旦游戏重新启动,请确保游戏逻辑和用户界面完全重置,然后返回步骤1。
var randomNumber = Math.floor(Math.random() * 100) + 1;// 生成随机数
var guesses = document.querySelector('.guesses'); // 获取Dom节点
var lastResult = document.querySelector('.lastResult');
var lowOrHi = document.querySelector('.lowOrHi');
var guessSubmit = document.querySelector('.guessSubmit');
var guessField = document.querySelector('.guessField');
var guessCount = 1;// 当前轮次
var resetButton;