保山哪里有网站建设,良精网站管理系统,大学生网站开发文档,水果网站建设学习如何通过构建一个简单的JavaScript颜色游戏来操作DOM
题目要求
我们将构建一个简单的颜色猜谜游戏。每次游戏启动时#xff0c;都会选择一个随机的RGB颜色代码。根据游戏模式#xff0c;我们将在屏幕上提供三个#xff08;简单#xff09;或六个#xff08;困难都会选择一个随机的RGB颜色代码。根据游戏模式我们将在屏幕上提供三个简单或六个困难选项或色块供您选择。每次选择不正确的颜色块时该色块将消失直到用户选择正确的颜色或它是剩下的最后一个选项。
1、 步骤1—创建基本的Web
我们将从创建一个简单的 Web 样板开始该样板将受到索引.html、app.css 和 app.js 文件的影响。
1.1 创建索引.html
我们可以简单地将整个网页分为三个主要块。 首先我们有标题部分其中包含文本如果您想在其中添加它可能包含一些其他信息。 接下来是控制面板其中包含用于重置游戏和在游戏模式之间切换的按钮。 主游戏区域它有六个div。这些 div 用作每个随机 RGB 颜色代码的选项这些代码可以通过一些花哨的逻辑进行选择。
!DOCTYPE htmlheadtitleColor Game/titlelink relstylesheet typetext/css hrefapp.css/headbody
h1The Greatbrspan idcolorDisplayRGB/spanbrColor Game/h1div idstripebutton idresetNew Colors/buttonspan idmessage/spanbutton classmodeEasy/buttonbutton classmode selectedHard/button
/divdiv idcontainerdiv classsquare/divdiv classsquare/divdiv classsquare/divdiv classsquare/divdiv classsquare/divdiv classsquare/div
/divscript typetext/javascript srcapp.js/script/body
/html1.2 创建应用.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;}
1.3 创建应用.js
我们已经将所有 HTML 元素以变量的形式存储。这将帮助我们通过向每个变量添加事件并在我们将在本文中创建的各种逻辑函数中调用它们来执行一些操作
var numSquares 6;
var colors [];
var pickedColor;
var squares document.querySelectorAll(.square);
var resetButton document.querySelector(#reset);
var modeButtons document.querySelectorAll(.mode);分解这些变量中的每一个看看它们的意义是什么
numSquares 变量存储根据模式在游戏中可用的方块数量。为了简单起见我将值硬编码为始终为 6 — 我们可以回到这一点并添加一些逻辑来保持其变化。colors 是一个空数组其中包含每次重置游戏或更改模式时生成的随机六或三个 RGB 颜色代码。pickedColor 是用户在每次点击时选择的颜色/选项块。(squares)正方形是页面上可用作选项的所有方块的数组。此数组可能具有三个或六个元素具体取决于游戏模式。(resetButton)重置变量是控制面板中的“新游戏”按钮。modeButtons又是一个数组其中包含简单和困难的模式按钮。
2、 步骤2—使用 JavaScript 文件并多次使用 CSS 文件
2.1 生成随机颜色 思路 我们的第一个目标是在每次游戏启动或重新启动或模式更改时生成随机颜色。要理解随机生成任何内容的基本原则我们应该从六个 RGB 颜色代码的硬编码数组开始。尝试将这些颜色设置为网页上可用的六个方块/选项的背景颜色。 解析 在颜色数组中添加了六个静态 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 (i0; isquares.length; i) {squares.style.backgroundColor colors[i]
}效果图 2.2 启用点击功能
我们所需要的只是在每个选项/色块上启用事件侦听器侦听点击事件。最简单的方法是 通过循环浏览正方形数组。此循环看起来类似于用于设置色块背景样式的循环
for(i0; i squares.length; i) { squares[i].addeventListeners(click, function() { alert(option was clicked); });
}每次单击任何块时您都会从浏览器收到此警报消息。这很容易现在我们的选项是可接受的并且它们正在响应用户输入。我们现在需要做的就是定义一个逻辑告诉如果游戏选择的颜色和用户选择的颜色相同会发生什么
2.3 检查颜色是否正确 思路 让我们探索一下我们的选项/彩盒接受并响应的可能性。我们可以进行一个小测试看看两种颜色是否匹配。每次刷新页面或重置游戏或更改游戏模式时我们都会随机生成颜色。我们将练习在文件中分配的六个RGB颜色代码集。
for(i0; i squares.length; i) { squares[i].addeventListeners(click, function() { //if correct block is clicked do something.... //if wrong block is clicked do something.... });}您可能已经知道我们将使用一个简单的 if-else 块。
pickedColor colors[3];for (i0; i squares.length; i) { //将背景颜色应用到所有的正方形squares[i].style.backgroundColor colors[i] //在每个方块上启用点击事件 squares[i].addEventListener(click, function() {//如果用户选择了正确的颜色 var clickedColor this.style.backgroundColor;//检查所选颜色是否与默认颜色匹配if(pickedColor clickedColor) { changeColors(pickedColor); } //如果用户用户选择错误的颜色 else { this.style.backgroundColor #232323; messageDisplay.text Wrong Choice!; } })
};解析 我们首先定义游戏选择的默认颜色变量 pickedColor。 然后我们运行我们的 for 循环让我们浏览色块/选项数组。 然后我们在每个颜色/选项上启用点击事件。我们使用回调函数来做到这一点。此函数只选择所选色块/选项的背景颜色只需将其分配给名为 clickedColor 的变量即可。 现在我们有两种颜色一种是由游戏选择的另一种是由用户选择的。剩下的就是匹配看看选择是否正确。 我们可以使用 if else 块轻松做到这一点。如果选择正确那就这样做或者做其他事情 如果选择了正确的颜色我们会在页面上添加一些文字来确认正确的选择并添加一些视觉效果来重新确认。否则我们会匹配该特定颜色选项/块的颜色以匹配页面的背景颜色。这会产生一种效果就好像色块/选项刚刚消失一样。 如果选择了相同的颜色则会执行一个函数 //此函数遍历色块/选项数组并将背景颜色重置为所选颜色或默认颜色。
function changeColors(color) { for (i0; 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!;
}3、步骤3— 创建新的随机生成的RGB颜色代码
现在我们需要在游戏中创建新的随机生成的RGB颜色代码这些颜色代码与颜色块/选项中分配的颜色集不同 思路 我们将创建一个新函数以及完全随机新的颜色代码并将它们分配给颜色数组。然后我们将在色块/选项数组中获取它们。 JavaScript 中的内置方法帮助我们生成一个介于 0 和 1 之间的随机数。然后我们进行一些操作以确保该随机数的范围保持在数字 0 和 255 之间。 首先我们实现 Math.random选择 0 到 1 之间的任何随机数****然后将该数字乘以 256因为我们不希望该数字大于 255。一旦我们有一个随机数我们就使用 Math.floor 并确保我们只有十进制值整数之前的数字。 我们将生成的这些随机数分配给名为 r、g 和 b 的变量。每个都表示其各自的颜色代码 RGB 编号。 最后我们将所有这些数字或变量相加以形成一个字符串。我们返回字符串所以它看起来像这样rgb23 45 112。 剩下要做的就是根据游戏模式运行此功能并生成三个或六个随机 RGB 颜色代码并在颜色数组中分配它们。 注意问题 但这只会返回一个看起来像 RGB 代码的字符串。如何将它添加到我们拥有的颜色数组中每次启动或重置游戏时如何选择随机颜色
3.1 从阵列中选择一种随机颜色 创建一个名为 pickColor 的新函数。 function pickColor() {
var random Math.floor(Math.random() * colors.length);
return colors[random];
}解析 正如我们已经看到的 Math.random 和 Math.floor 的魔力我们使用相同的函数来获取一个在 0 和数组长度之间生成的随机数。
3.2 在颜色数组中添加六个或三个随机 RGB 代码 操作方法 我们使用上述两个函数即 randomColors 和 pickColors。randomColors 函数特别的作用是它运行 randomColors 函数六到三次取决于游戏模式并将相应数量的 RGB 颜色代码添加到颜色数组中。我们将这个函数命名为 generateRandomColornum*。 代码实现 function pickColor(){var random Math.floor(Math.random() * colors.length);return colors[random];
}
function randomColor(){//返回从0 - 255中选择一个“红色”的数组var r Math.floor(Math.random() * 256);//返回从0 - 255中选择一个“绿色”的数组var g Math.floor(Math.random() * 256);//返回从0 - 255中选择一个“蓝色”的数组var b Math.floor(Math.random() * 256);return rgb( r , g , b );
}解析数字将根据游戏模式决定。 首先我们将创建一个简单的空数组接下来我们根据游戏模式运行一个循环每次执行此循环时都会将新的 RGB 代码推送到创建的数组中最后我们返回这个数组
3.3 重置游戏 思路 设置了主要逻辑之后这一切都是关于创建一个函数并让该函数针对任何给定的用户输入完成其工作在本例中单击重置按钮。 组成一组六种随机颜色
从新创建的颜色数组中随机选择一种颜色。 代码实现 function reset() {
//function reset(){colors generateRandomColors(numSquares);//从数组中随机选择一个新的颜色pickedColor pickColor();colorDisplay.textContent pickedColor;resetButton.textContent New ColorsmessageDisplay.textContent ;//改变方块的颜色for(var i 0; i squares.length; i){if(colors[i]){squares[i].style.display blocksquares[i].style.background colors[i];} else {squares[i].style.display none;}}h1.style.background steelblue;
}
//pick new random color
//fill the squares with new set of generated colors
}解析 我们首先为重置按钮添加事件侦听器。然后我们触发一个回调函数当点击事件被触发时它会做很多事情。当它被触发时我们首先生成一个由六种随机颜色组成的新数组。然后我们随机选择一种颜色。最后我们重置所有色块的背景颜色。
代码具体实现
index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0link typetext/css relstylesheet href./style.csstitleDocument/title
/head
body
h1The Great span idgoalDisplayRGB/span Color Game/h1div idtoolbardiv classcontainerbutton idnewGameNew Colors/buttonspan idstatus/spanbutton ideasymodeEasy/buttonbutton idhardmode classselectedHard/button/div
/divdiv classcontainerdiv classsquare/divdiv classsquare/divdiv classsquare/divdiv classsquare/divdiv classsquare/divdiv classsquare/div
/divscript typetext/javascript src./colorgame.js/script
/body
/htmlstyle.css
body {margin: 0;background-color: #232323;font-size: 14px;
}h1 {color: white;background-color: rgb(51, 122, 183);margin: 0;padding: 1%;font-size: 2rem;font-weight: 300;text-align: center;text-transform: uppercase;
}#goalDisplay {text-transform: uppercase;display: block;font-size: 3rem;
}.container {max-width: 600px;margin: 0 auto;
}
.container:before, .container:after {display: table;content: ;
}
.container:after {clear: both;
}#toolbar {background-color: white;margin-bottom: 1.5%;text-align: center;
}#status {display: inline-block;width: 40%;margin: 0;text-align: center;
}#toolbar button {border: 0;padding: 0.3em 1em;font-weight: 700;font-family: inherit;text-transform: uppercase;background-color: white;outline: 0;transition: background-color 0.2s;-webkit-transition: background-color 0.2s;-moz-transition: background-color 0.2s;
}#toolbar button:hover {background-color: rgb(51, 122, 183);color: white;
}#toolbar .selected {background-color: rgb(51, 122, 183);color: white;
}#newGame {width: 120px;
}.square {display: block;float: left;width: 30%;margin: 1.66%;padding-bottom: 30%;border-radius: 1rem;transition: background-color 0.5s;-webkit-transition: background-color 0.5s;-moz-transition: background-color 0.5s;
}.hidden {display: none;
}colorGuessGame.js
var numSquares 6;
var colors [];
var pickedColor;
var squares document.querySelectorAll(.square);
var colorDisplay document.getElementById(goalDisplay);
var messageDisplay document.querySelector(#status);
var h1 document.querySelector(h1);
var resetButton document.querySelector(#toolbar);
var modeButtons document.querySelectorAll(.mode);init();function init(){setupModeButtons();setupSquares();reset();
}function setupModeButtons(){for(var i 0; i modeButtons.length; i){modeButtons[i].addEventListener(click, function(){modeButtons[0].classList.remove(selected);modeButtons[1].classList.remove(selected);this.classList.add(selected);this.textContent Easy ? numSquares 3: numSquares 6;reset();});}
}function setupSquares(){for(var i 0; i squares.length; i){squares[i].addEventListener(click, function(){var clickedColor this.style.background;if(clickedColor pickedColor){messageDisplay.textContent Correct!;resetButton.textContent Play Again?changeColors(clickedColor);h1.style.background clickedColor;} else {this.style.background #232323;messageDisplay.textContent Try Again}});}
}function reset(){colors generateRandomColors(numSquares);//从数组中随机选择一个新的颜色pickedColor pickColor();colorDisplay.textContent pickedColor;resetButton.textContent New ColorsmessageDisplay.textContent ;//改变方块的颜色for(var i 0; i squares.length; i){if(colors[i]){squares[i].style.display blocksquares[i].style.background colors[i];} else {squares[i].style.display none;}}h1.style.background steelblue;
}resetButton.addEventListener(click, function(){reset();
})function changeColors(color){//遍历所有方格for(var i 0; i squares.length; i){//改变每个颜色以匹配给定的颜色squares[i].style.background color;}
}function pickColor(){var random Math.floor(Math.random() * colors.length);return colors[random];
}function generateRandomColors(num){//创建一个数组var arr []//重复num次for(var i 0; i num; i){//得到随机的颜色并推入数组arr.push(randomColor())}//返回那个数组return arr;
}function randomColor(){//返回从0 - 255中选择一个“红色”的数组var r Math.floor(Math.random() * 256);//返回从0 - 255中选择一个“绿色”的数组var g Math.floor(Math.random() * 256);//返回从0 - 255中选择一个“蓝色”的数组var b Math.floor(Math.random() * 256);return rgb( r , g , b );
}
