如何在HTML5游戏中建立数字猜测器 - 傻瓜式的

使用随机数字，您可以制作有趣的HTML5游戏。看一看使用HTML，CSS和JavaScript的简单游戏。这个游戏有一些有趣的功能：

它使用网页作为接口。像许多JavaScript程序一样，它使用网页作为用户界面。一个输入元素用于输入，一个div是主输出元素，一个按钮触发所有的动作。 <！ --1 - >
它使用CSS进行造型。
页面的各个部分用CSS格式化。为了方便和可重用性，CSS存储在外部样式表中。它告诉用户她已经转了多少圈。 在每次通过时，计算机会提醒用户发生了多少转弯。
当用户猜对了，重新开始按钮出现。 此按钮首先被隐藏，并且只在需要时才显示。
通过一个特殊的调试功能，程序员可以使用正确的答案。
在测试程序时，开发人员可以看到正确的答案，但这些信息对用户是隐藏的。
一个 init（）
函数开始游戏。 init（）函数初始化游戏。它在程序第一次开始时被调用，当用户想要重新开始时被调用。
另一个功能附加到 按钮上。
当用户单击“检查您的猜测”按钮时，将当前用户的猜测与正确的答案进行比较，并将提示返回给用户。
如何设计游戏程序当您构建一个复杂的程序时，您需要从一个设计计划开始。游戏开发中的大部分工作都是在开始编程之前进行的。如果你设计好游戏，编程就容易多了。在开始编写代码之前，游戏设计可以帮助你理解关于游戏的许多事情：总体布局：

虽然布局不完全由此图形决定，但很容易看到整体外观。

命名元素：

每个需要命名的元素都已经确定，并且名称被写在文档中。一些元素（如第一个按钮）不需要名称，因为它们不会在代码中引用。

按钮功能： 每个按钮都会调用一个功能。该图表示每个按钮将调用哪个功能。
功能计划： 每个功能都是按照功能的英文描述进行计划的。
全局变量： 描述将需要在函数之间共享的变量。
创建一个好的设计文档实际上是很困难的，但是这样做会使编程变得容易一些。很难弄清楚你想做什么，也很难弄清楚如何去做。有一个设计文档将这两个过程分开，所以您可以先集中精力您正在做什么，然后担心
您将如何执行。 如何为游戏构建HTML

如果您先在纸上设计游戏，那么猜数游戏的HTML代码就相当容易编写。这是代码：号码猜测号码猜测我正在考虑一个0到100之间的数字。猜猜我的号码，我会告诉你是否太高，太低或正确。你的猜测检查你的猜测再试一次分离HTML，CSS和JavaScript是很好的，因为这种做法可以让你将一个大问题“分而治之”变成一些小问题。以下是HTML文档的主要功能：

链接到外部文件中的CSS。

目前，CSS并不重要，因此您可以将其移入单独的文件，以便稍后使用它。

外包JavaScript代码。

您也可以将JavaScript代码移动到外部文件中，以便您不必担心。在HTML代码中，只需链接到外部文件即可。
构建一个表单作为页面的主要组件。

这个页面最重要的部分是表格。像大多数表格一样，它会有一个字段集，标签，输入元素和按钮。

为输出创建一个div。

输出div只是一个普通的div。你把它放在fieldset中，所以它会保持一个到表单其余部分的可视化链接。你可以把默认文本放在div里面（尽管你稍后可能会改变这个文本）。因为div将通过代码引用，所以需要一个id属性。为用户猜测做一个输入区域。
用户需要键入某种数字输入。为此使用一个输入元素。请参阅您的文档以记住此元素的ID。（你

做了
设计文档，对不对？）给输入添加一个标签是很好的，所以用户知道这里有什么需要。

建立一个检查猜测的按钮。
用户在单击“检查您的猜测”按钮之前不会进行猜测。所以，你真的需要有这样一个按钮。这个按钮不需要名称，但会调用checkGuess（）函数。

构建第二个按钮以重新开始。
这个程序的一个有趣的功能是一个按钮，允许用户重新启动。这个第二个按钮只有当用户正确地猜出答案时才可用。你用普通的HTML创建它，并使用CSS和JavaScript技巧使其消失并按需显示。