构建这些项目，获得你的第一份开发工作！#1：猜十六进制代码游戏

如果你不知道这是什么，可以看看这篇文章。我写代码两个月就找到了第一份开发工作，因为我跟着教程学，并在此基础上构建了自己的东西。所以我也在帮助你们做同样的事情。因为我很棒。

本教程将讲解如何制作一个“猜十六进制”游戏。你将获得一个随机的十六进制代码和两种颜色，你需要猜出哪一个是十六进制。这样你不仅可以制作一个非常有趣的游戏，还能学到一些关于十六进制代码的知识。

（免责声明：这不是承诺。我仍然对十六进制代码一无所知。）

您可以在此处找到代码，并在此处找到 2:20 教程视频。

（另一个免责声明：此代码将为您提供有史以来最丑陋的东西。您的工作是让它看起来漂亮。）

步骤 1：在 HTML 文件中，创建 div 并为其指定 ID

我们需要三个 div - 一个用来保存我们想要猜测的十六进制代码，一个用来保存正确的颜色，一个用来保存错误的颜色。我们需要给它们分配 ID，这样才能用 JavaScript 轻松操作它们！

<html>
    <head>
        <title>HEX Code Guessing Game</title>
    </head>
    <body>
        <h1>What color is this HEX Code?</h1>
        <div id="hexCode"></div>
        <div id="first"></div>
        <div id="second"></div>
    </body>
<html>

步骤 2：用 css 设置 div 的样式

创建一个 CSS 文件，并为第一个和第二个 div 设置相同的样式。我们希望能够同时看到它们，以便于比较。我的意思是，如果你愿意，你可以把它们隔得很远，或者把它们弄得很小。我不会阻止你。

#first, #second {
    height: 200px;
    width: 200px;
    border: thin black solid;
    margin: 10px;
}

别忘了把这个 CSS 附加到你的 HTML 文件中！我一直都这么做！这是我 90% 悲伤的根源！

步骤3：生成随机十六进制代码

十六进制代码很棒。它们只是用十六进制格式编写的数字——用 JavaScript 生成随机十六进制代码非常容易。我们需要两个十六进制代码——一个是正确的十六进制代码，另一个是错误的十六进制代码。创建一个脚本标签，将 JavaScript 代码放入其中，并用它填充。

<script>
    correctRandomHex = '#' + Math.floor(Math.random() * 16777215).toString(16);
    incorrectRandomHex = '#' + Math.floor(Math.random() * 16777215).toString(16);
</script>

这里发生了什么？Math.random() 会在 0 到 1 之间选择一个随机数，因此将其乘以 16777215 将创建一个介于 1 到 16777215 之间的随机数（这是有效的十六进制代码的最大数字）。Math.floor() 会将这些数字向上或向下舍入，因此我们最终不会得到像 243.029 这样的结果。然后 toString(16) 会将这个数字转换为十六进制！因为它确实可以做到！感谢 JavaScript。

我们将使 hexCode div 显示我们刚刚生成的正确十六进制代码。

document.getElementById("hexCode").innerHTML = correctRandomHex;

步骤 4：随机选择一个颜色正确的 div

我们不希望第一个或第二个 div 每次都显示正确的十六进制代码。我们需要稍微混合一下。为此，我们将再次使用 Math.random() 选择一个介于 1 和 2 之间的随机数，然后使用 Math.floor() 确保只得到 1 或 2。

let correctColor = Math.floor(Math.random() * 2);
Then we’ll create an if statement.

if (correctColor === 1 ) {
}

else { 
}

我们将在这个 if 语句中填充两种不同的可能性。如果 CorrectColor 的值是 1，则第一个 div 是正确的。如果 CorrectColor 的值是 2，则第二个 div 是正确的。

步骤 5：在 div 中显示正确和不正确的颜色

在我们的 if 语句中，我们将根据 incorrectColor 数字将每个 div 的背景颜色设置为正确或不正确。

if (correctColor ===1 ) {
                document.getElementById("first").style.backgroundColor = correctRandomHex;
                document.getElementById("second").style.backgroundColor = incorrectRandomHex;
}

else { 
                document.getElementById("second").style.backgroundColor = correctRandomHex;
                document.getElementById("first").style.backgroundColor = incorrectRandomHex;
}

步骤 6：提醒用户输入是否正确

我们将为每种可能性添加一个事件（如果correctColor === 1，或否），它将告诉用户他们选择的 div 是正确还是不正确的十六进制代码。

if (correctColor ===1 ) {
        document.getElementById("first").style.backgroundColor = correctRandomHex;
        document.getElementById("second").style.backgroundColor = incorrectRandomHex;
        document.getElementById("first").addEventListener("click", function() {alert("Correct!")});
        document.getElementById("second").addEventListener("click", function() {alert("Inorrect!")});
}

else { 
        document.getElementById("second").style.backgroundColor = correctRandomHex;
        document.getElementById("first").style.backgroundColor = incorrectRandomHex;
        document.getElementById("second").addEventListener("click", function() {alert("Correct!")});
        document.getElementById("first").addEventListener("click", function() {alert("Inorrect!")});
}

就这样。只需确保关闭所有标签即可！

现在轮到你了！

为了充分利用这些教程，请尝试在此项目的基础上构建一些东西。这才是重点。以下是一些想法：

使用除警报之外的其他错误来制作更好的用户界面
有更多不正确的颜色
反过来——让用户在给定颜色时猜测十六进制代码（警告：除非用户是天才，否则这是不可能的）
当用户输入正确时自动显示另一个十六进制代码
实施时间限制

祝我的书呆子朋友们好运！如果你需要任何帮助，或者想展示你的作品，请在推特上直接给我留言！

链接搜索：https://dev.to/catmcgeecode/get-your-first-dev-job-by-building-these-projects-1-guess-the-hex-code-game-4k40