了解如何通过构建简单的JavaScript颜色游戏来操纵DOM

2020年12月30日10:51:07 发表评论 130 次浏览

通过Ashish Nandan Singh

什么是DOM?

DOM代表文档对象模型。它不过是浏览器加载网页时页面上加载的所有HTML元素的方框图。它以HTML元素的对象树的形式呈现。看下面的图片, 你可能会得到一个更好的主意。

了解如何通过构建简单的JavaScript颜色游戏来操纵DOM1

简单的.html文件的DOM表示

丑陋的.html文件的漂亮干净方框图–并不是很好!但是现在你正在思考, 这对我有什么帮助?用例是什么?为什么我需要知道这一点?

简而言之, DOM使你能够为静态网站带来动力。使用DOM, 你可以在网页上做很多有用的事情, 例如:

  • 添加和删​​除HTML元素和属性
  • 在用户触发的事件上添加和删除CSS规则
  • 为综合用户事件创建新事件

这正是你将在本文中学习的全部内容。

为了让你了解我们在本文结尾处将实现的目标, 请查看这个连结.

入门

我们将构建一个简单的颜色猜测游戏。每次游戏开始时, 都会选择一个随机的RGB颜色代码。根据游戏的模式, 我们将在屏幕上提供三个(简单)或六个(硬性)选项或色块供你选择。每次选择了不正确的颜色块时, 该块都会消失, 直到用户选择了正确的颜色(或其最后一个选项)为止。

这是我们将要构建的粗略图:

这是我在上课时学到的东西柯尔特·斯蒂尔, 是讲授基本概念的杰出教练。大家都应该在Udemy的YouTube频道上观看他的视频。

了解如何通过构建简单的JavaScript颜色游戏来操纵DOM2

样机图

第1部分

我们将从创建一个简单的网络样板开始, 该样板将破坏index.html, app.css和app.js文件。让我们看看刚开始时这些文件的外观。

但是首先, 请注意:只是为了使那些没有任何先验开发经验的读者都可以简化它, 每当我们进行重大更改时, 我都会一直显示源代码。

  • index.html
<!DOCTYPE html><html>
<head><title>Color Game</title><link rel="stylesheet" type="text/css" href="app.css"></head>
<body>
<h1>The Great<br><span id="colorDisplay">RGB</span><br>Color Game</h1>
<div id="stripe">
<button id="reset">New Colors</button><span id="message"></span><button class="mode">Easy</button><button class="mode selected">Hard</button>
</div>
<div id="container">
<div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div>
</div>
<script type="text/javascript" src="app.js"></script></body></html>

这很简单。我们可以简单地将整个网页分为三个主要部分。

首先, 我们有标题部分, 其中包含文本, 并且如果你想在其中添加一些信息。

接下来是控制面板, 其中包含用于重置游戏和在游戏模式之间切换的按钮。

第三, 也是最有趣的部分, 是主游戏区域, 它具有六个div。这些div用作每种随机RGB颜色代码的选项, 可以通过一些特殊的逻辑来选择(我们将在一段时间内看到)。

  • app.css
body {
background-color: #232323;margin: 0;font-family: "Montserrat", "Avenir";}
h1 {
text-align: center;line-height: 1.1;font-weight: normal;color: white;background: steelblue;margin: 0;text-transform: uppercase;padding: 20px 0;}
#container {
margin: 20px auto;max-width: 600px;}
.square {
width: 30%;background: purple;padding-bottom: 30%;float: left;margin: 1.66%;border-radius: 15%;transition: background 0.6s;-webkit-transition: background 0.6s;-moz-transition: background 0.6s;}

已为主体, 文本和正方形添加了一些基本样式, 以用作游戏选项。

  • app.js
var numSquares = 6;var colors = [];var pickedColor;var squares = document.querySelectorAll(".square");var resetButton = document.querySelector("#reset");var modeButtons = document.querySelectorAll(".mode");

我们已经以变量的形式存储了所有HTML元素。这将通过向每个变量添加事件, 并在本文将要创建的各种逻辑函数中调用事件来帮助我们执行某些操作。

实际上, 让我们分解一下这些变量, 看看它们的意义是什么:

  • 的numSquares变量存储根据模式在游戏中可用的方块数。为简单起见, 我将值硬编码为始终为6-我们可以返回到此值并添加一些逻辑以使其保持不变。
  • 颜色是一个空数组, 其中包含每次重置游戏或更改模式时生成的随机的六或三个RGB颜色代码。
  • pickColor是用户每次单击时选择的颜色/选项块。
  • 方格是页面上所有可选项的正方形的数组。该阵列可以具有三个或六个元素, 具体取决于游戏的模式。
  • 的重启变量是控制面板中的"新游戏"按钮。
  • 模式按钮还是一个数组, 其中包含简单模式和困难模式按钮。

如果你已经跟进了这一步, 那么这里应该有这个游戏的基本版本。你可以在任何浏览器中打开index.html文件并将其检出。好吧, 现在我们有了基础, 让我们开始认真研究。

第2部分

在本节中, 我们将主要使用JavaScript文件, 几次使用CSS文件。

生成随机颜色

我们的第一个目标是每次游戏启动或重新启动或更改模式时生成随机颜色。让我们看看如何做到这一点。

要了解随机生成任何东西的基本原理, 我们应该从六个RGB颜色代码的硬编码数组开始。让我们尝试将这些颜色设置为网页上可用的六个正方形/选项的背景颜色。

var colors = [
"rgb(255, 0, 0)", "rgb(255, 0, 255)", "rgb(255, 225, 0)", "rgb(255, 0, 255)", "rgb(0, 255, 255)", "rgb(0, 255, 0)"
];
var squares = document.querySelectorAll(.squares);
for (i=0; i<squares.length; i++) {squares.style.backgroundColor = colors[i]}
  • 我在颜色数组中添加了六个静态RGB颜色代码
  • 我使用已经创建的squares数组对数组中所有存在的squares进行循环。
  • 我将每个正方形的背景色与其在颜色数组中的对应索引相匹配。

如果将其添加到app.js文件中并刷新浏览器, 你将看到每个正方形现在都是唯一的颜色。

了解如何通过构建简单的JavaScript颜色游戏来操纵DOM3

*屏幕截图来自浏览器

你可能会注意到按钮尚未设置样式, 但请立即保留。稍后我们将介绍这一部分。

启用点击功能

所以我们需要的是事件监听器在每个选项/颜色块上启用, 以侦听单击事件。最简单的方法是-再次猜对了-通过遍历正方形数组。该循环看起来类似于用于对色块的背景进行样式设置的循环。让我们看一下代码:

for(i=0; i<= squares.length; i++) {  squares[i].addeventListeners('click', function() {    alert('option was clicked');  });}

现在, 每次单击任何块时, 你都会从浏览器中收到此警报消息。那很简单!现在, 我们的选项可以接受, 它们正在响应用户输入。现在我们需要做的就是定义逻辑, 该逻辑告诉游戏选择的颜色和用户选择的颜色相同时会发生什么。

如果你已经仔细注意了以上部分, 那么现在你可能已经有了解决方案。因此, 让我们看看我们如何做到这一点。

检查颜色是否正确

让我们探讨一下我们的选项/颜色框可以接受并做出回应的可能性。我们可以进行一次小测试, 看看两种颜色是否匹配。很快, 每次刷新页面, 每次重置游戏或更改游戏模式时, 我们都会随机生成颜色。但是现在, 我们将使用在文件中分配的六组RGB颜色代码进行练习。

让我们看一些代码, 然后为你分解。

for(i=0; i<= squares.length; i++) {  squares[i].addeventListeners('click', function() {    //if correct block is clicked do something....    //if wrong block is clicked do something....  });}

你可能已经知道, 我们将使用一个简单的如果别的 块。

pickedColor = colors[3];for (i=0; i <= squares.length; i++) { //apply background colour to all the squares... squares[i].style.backgroundColor = colors[i]   //enable click event on each square.....     squares[i].addEventListener('click', function() {
//if the user selected the right colour....         var clickedColor = this.style.backgroundColor;
//check if the selected colour matches the default colour...
if(pickedColor === clickedColor) {             changeColors(pickedColor);           }         //if the user user selected wrong colour....         else {           this.style.backgroundColor = "#232323";           messageDisplay.text = "Wrong Choice!";         }    })};

我知道-这是很多代码。但是, 让我们看看它的真正含义:

  • 我们首先使用变量定义游戏选择的默认颜色是什么选择颜色。
  • 然后我们运行for循环这使我们可以遍历颜色块/选项的数组。
  • 然后我们启用点击事件在每个颜色块/选项上。我们使用回调函数。此函数仅将所选色块/选项的背景色分配给名为的变量, 就什么也不做clickedColour。
  • 现在我们有两种颜色:一种是游戏选择的颜色, 另一种是用户选择的颜色。剩下的就是匹配, 看看选择是否正确。
  • 我们可以使用如果别的块。如果选择正确, 则执行此操作, 否则执行其他操作
  • 如果选择了正确的颜色, 我们将在页面上添加一些文本以确认正确的选择, 并添加一些视觉效果以重新确认。另外, 我们匹配该特定颜色选项/块的颜色以匹配页面的背景颜色。这会产生一种效果, 就好像颜色块/选项刚刚消失一样。
  • 现在你已经看到, 如果选择了相同的颜色, 则将执行一个功能。让我们看看该功能是由什么组成的:
function changeColors(color) { for (i=0; i <= squares.length; i++) {  squares[i].style.backgroundColor = color;  messageDisplay.text = "You are good at guessing!"; }}

此功能遍历颜色块/选项的阵列, 并将背景色重置为所选颜色或默认颜色。

如果颜色不同, 我们只需将当前选择的背景色设置为网页的背景色即可。

else {  this.style.backgroundColor = "#232323";  messageDisplay.text = "Wrong Choice!";}

现在我们有了主要的游戏设置, 我们只需要担心最小的设计问题并将功能添加到控制面板中即可。

但是, 如果你正确执行了所有步骤, 那么首先让我们看一下代码文件夹的外观:

index.html

app.css

app.js

第三步

一切都很好。但是现在我们需要在游戏中创建随机生成的新RGB颜色代码, 这些颜色代码与在颜色块/选项中分配的颜色集不同。

如果你想到了功能, 那是正确的选择。我们将创建一个带有完全随机(新)颜色代码的新函数, 并将它们分配给colors数组。然后, 我们将它们放入颜色块/选项数组中。

让我们看一下代码的外观, 然后逐行进行介绍。

JavaScript中的内置方法可帮助我们生成介于0和1之间的随机数。然后, 我们进行一些操作以确保该随机数的范围保持在数字0和255之间。

  • 首先我们实施数学随机 选择0到1之间的任意随机数, 然后将其乘以256, 因为我们不希望该数字大于255。一旦有了随机数, 我们将使用数学地板并确保只有十进制值(整数)之前的数字。
  • 我们将这些随机数分配给称为r, g和b的变量。每个颜色代码代表其自己的RGB编号。
  • 最后, 我们将所有这些数字或变量加起来形成一个字符串。我们返回字符串, 所以它看起来像这样:rgb(23, 45, 112)。
  • 剩下要做的就是根据游戏的模式运行此功能, 并生成三个或六个随机的RGB颜色代码, 并将它们分配给colors数组。

但这只会返回看起来像RGB代码的字符串。如何将其添加到我们拥有的颜色阵列中?每次启动或重置游戏时如何选择随机颜色?

为了完成这两项工作, 我们将创建更多其他功能, 并查看它们如何帮助我们解决此问题。

从阵列中选择随机颜色

为此, 我们将创建一个名为pickColor()。让我们看看该函数的外观, 然后将其分解。

function pickColor() {  var random = Math.floor(Math.random() * colors.length);  return colors[random];}

尽可能简单, 让我们看看这两条强有力的路线对我们有什么作用。

  • 正如我们已经看到的数学随机和数学地板, 我们使用相同的函数来获取介于0和数组长度之间的随机数。
  • 接下来, 我们使用索引中的随机数在颜色数组中获得相应的RGB代码

在颜色数组中添加六个(或三个)随机RGB代码

为此, 我们使用以上两个函数, 分别是randomColors()和pickColors()。 randomColors()函数的具体作用是, 它会运行randomColors()函数六到三次(取决于游戏的模式), 并将相应数量的RGB颜色代码添加到colors数组中。我们将其命名为generateRandomColor(num *)函数。让我们看看代码的外观并将其逐行细分。

* num将根据游戏模式决定。

  • 首先, 我们将创建一个简单的空数组
  • 接下来, 根据游戏模式运行循环
  • 每次执行此循环时, 都会将新的RGB代码推入创建的数组中
  • 最后我们返回这个数组

现在, 在所有这些新功能和所有这些代码操作之后, 我们的代码库app.js已经改变了很多。让我们看看现在的样子:

重设游戏

在基本设置了基本逻辑之后, 这看起来像是步履蹒跚。创建功能并让该功能针对任何给定的用户输入(在这种情况下, 只需单击重启按钮)。

我们想要的重置按钮是

  • 生成一组六种随机颜色
  • 从新创建的颜色数组中选择一种随机颜色。

让我们看看伪代码的样子:

function reset() {  //create a new array of 6 random colors  //pick new random color  //fill the squares with new set of generated colors}

我强烈建议在解决复杂问题时编写伪代码。每当我陷入复杂的算法挑战时, 这种编写伪代码的习惯就帮助我节省了大量时间。

好了, 回到我们的重置按钮:让我们看看实际功能如何:

让我们逐行将其分解:

  • 我们首先为重置按钮添加事件监听器。然后, 我们触发一个回调函数, 当触发click事件时, 该函数会执行很多操作。
  • 发射后, 我们首先生成一个新的包含六种随机颜色的数组。
  • 然后, 我们选择一种随机颜色。
  • 最后, 我们重置所有色块的背景色。

这就是更新的app.js经过所有修改后, 看起来像:

现在看起来不错!我不会在本文中添加用于设置模式的功能, 因为它已经变得越来越大了, 我不想让大家烦恼:)。但是, 如果你喜欢所有这些, 那么我将很乐意写另一篇文章, 介绍其余内容。

这是链接可以找到最终优化代码的GitHub存储库。

我希望本文能激发一些人学习更多有关DOM操作和这种漂亮的JavaScript语言的知识。直到下一次!

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: