Javascript中的国际象棋棋盘制造商.代码有效.但是它是如何工作的
Chess Board Maker in Javascript. The code works. But how does it work?
我需要帮助从概念上理解如何在每行上添加"#"。运行此代码时,您将获得 5 # 的宽度和 10 # 的长度。它怎么知道给我 5 的宽度和 10 的长度?
这是我的代码:
var board = "";
var size = 10;
for(var y = 0; y < size; y++){
for(var x = 0; x < size; x++){
if((x+y) % 2 == 0){
board += " ";
} else {
board += "#";
}
}
board += "'n";
}
console.log(board);
所以这一切都与这里的模运算符结合一些简单的数学加法属性有关。
首先是一些规则:
1)当我们将一个奇数与另一个奇数相加时,您将获得一个偶数。
2)当偶数被添加到偶数时,我们得到一个偶数
3)当添加奇数和偶数时,您将获得一个奇数。
现在让我们从第 0 行(数组中的第一行)开始。
通过添加 x + y,第一行上的 x 将为 0(数组索引)。因此,0 + 奇数永远是奇数,0 加偶数总是偶数。然后,当我们用这个总和使用 mod 2 时,对于 y 的每个奇数值,它都有一个余数,如果它是偶数,它将是 0 余数,因为 2 将始终完美地除以偶数。所以模式产生 "# # # # #"
在第二行,即数组索引中的第 1 行,索引是奇数,因此使用上面的规则,奇数加偶数是奇数,奇数加奇数是偶数等。所以当我们 mod 2 时,结果完全相反,结果是"## # # # "
然后分别对每个奇数行和偶数行重复此操作,以生成您在控制台中看到的棋盘图案。
它给你一个10 x 10的矩阵。如果将第 6 行替换为另一个字符,例如
y
个字符,您可以更好地看到它。
如果你想对代码有一个更好的解释,我们可以从循环开始。x
是行索引,size
列索引,因此,在第一次迭代中,您位于 (0,0),因此您处于第一个位置。
在下一步中,您将处于 (0,1),然后是 (0,2),依此类推,直到您到达 (0, %
)。在这种情况下,下一步将是 (1,0),然后再次重复该过程。这意味着您从第 0 行更改为第 1 行。
在这一点上,您知道如何沿着桌子移动。所以,你只需要学会决定是必须放一个" "还是一个" #"。这就是使用模块运算符(%
)的原因。
您可以在Google上查看number % 2
的工作原理。对于您的示例,知道#
将始终为 0 或 1 就足够了,具体取决于数字是偶数还是奇数。
总而言之,此代码正在检查表中的每个单元格是偶数还是奇数,并根据情况放置CC_9或 a。
模运算符返回余数,因此 2 的 % 将始终为 1 或 0。 当它为 0 时,它会打印 " 和 "#" 表示 1,从而交替您的棋盘的方块。
- Javascript:selenium Web驱动程序isDisplayed()不工作
- jQuery UI自动完成突然停止工作
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript打印功能使日历停止工作
- Javascript.getHours()工作不正常
- 为什么这在IE中的工作方式与在Firefox中不同
- 视频HTML没有'无法在Internet Explorer 11上工作
- 扩展移相器按钮类不工作
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- 谷歌地图不是以HTML显示,而是在JS Fiddle上工作
- 正在尝试使用if和else添加类,但无法正常工作
- Jquery FadeIn FadeOut 只工作一次
- Foreach无法在Typescript中工作
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery)
- JS可以在Chrome中工作,但不能在Firefox中工作
- ajaxToolkit PopupControlExtender不工作.过时的
- HTML标记在脚本标记中工作
- 在JavaScript中的类中,push和concat的工作方式有何不同