个人中心
文章发布
退出
作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
26
4
我正在用 Javascript 创建一个棋盘。我已经设法自己创建了板，但我无法为每个字段提供合适的类(黑色或白色)。
我成功地为第一行正确分配了类，但我在处理面板的其余部分时遇到了问题。我知道可能有更简单的解决方案。
<!DOCTYPE html>
<html>
<head>
<title>Chess</title>
<link rel="stylesheet" type="text/css" href="assets/css/chess.css">
<script type="text/javascript" src="assets/js/lib/jquery.js"></script>
</head>
<body onload="initGame()">
<h1>Chess</h1>
<div id="board">
</div>
<script type="text/javascript" src="assets/js/chess.js"></script>
</body>
</html>
body{
text-align: center;
background-color: rgb(30, 30, 30);
}
#board{
margin: 0 auto;
width: 800px;
height: 800px;
background-color: white;
}
#board div{
width: 100px;
height: 100px;
float: left;
}
.white{
background-color: white;
border: 1px solid black;
}
.black{
background-color: black;
border: 1px solid white;
}
const board = [];
const boardElement = document.getElementById("board");
function initGame(){
for(var y = 0; y < 8; y++){
var row = [];
for(var x = 0; x < 8; x++){
var cell = {};
cell.element = document.createElement("div")
boardElement.appendChild(cell.element);
row.push(cell);
}
board.push(row);
}
$("#board div").addClass("field white");
for(var i = 0; i < board.length * 8; i++){
if((i % 7) == 0 && i != 0){
$(".field")[i].className = "field black";
i++;
}
else if((i % 7) == 0){
i++;
}
$(".field")[i].className = "field black";
i++;
}
startGame();
}
function startGame(){
}
当前输出:
最佳答案
您可以减少 initGame 逻辑，仅在 y 和 x 为奇数或偶数时添加白色类。您可以通过 y%2 == x%2 来完成。您将不需要额外的 for 循环。!
function initGame(){
for(var y = 0; y < 8; y++){
var row = [];
for(var x = 0; x < 8; x++){
var cell = {};
cell.element = document.createElement("div")
if(y%2 == x%2)
{
cell.element.className = "field white";
}
else
{
cell.element.className = "field black";
}
boardElement.appendChild(cell.element);
row.push(cell);
}
board.push(row);
}
startGame();
}
关于javascript - 使用 Javascript 创建棋盘，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57836901/
26
4
0
我有一个棋盘格，并将其连接到 JPanel: import javax.swing.*; import java.awt.Graphics; import java.awt.Color; public
我看不出有什么问题，我正在尝试将 gameBoard 数组(这不是数组吗？- 请参阅构造函数)传递到 findPiece 方法中，但它说了不是一个数组，我应该在这里传递什么来获得未更新的板？抱歉，我是
所以我想检查输入的位置在棋盘中是否有效， //returns true if the position is in the range of A1-H8 private boolean isValid
将单一职责原则应用于棋盘应用程序，Piece 接口(interface)/类应该负责什么？ 我确信它需要知道它的颜色、类型和有效 Action 。但是它是否也应该知道它在棋盘中的位置(x/y)？或者，
我需要使用 J 打印棋盘，给定奇数的函数需要创建一个 NxN 矩阵并在每个其他框中放置一个“X”。我已经制作了矩阵，但我无法弄清楚其他盒子部分。 到目前为止我所拥有的 N =: 3 checker =
我目前有一个一维棋盘坐标数组(例如 ["B1","D1","F1","H1","E8"] 用于棋盘游戏。我已将数组“位置”初始化为是上面的值，但这可以是游戏任何时候的任何值。该数组的长度根据用户给定的
我想使用canvas和通过覆盖方法onDraw在android studio中动态绘制一个8×8的棋盘，我几乎已经成功了，但我遇到了一个非常烦人的问题。 我已经制作了一个自定义 View ，我的目标是
所以我开始了一个 TicTacToe 项目，而且我是一个初学者，所以我不知道如何做很多事情。这是半个小时编码的结果。 我似乎在调试 Player2 不轮流的原因时遇到问题。 所以它要求添加更多细节，然
我正在制作棋盘游戏，但无法 move 它们。棋子会根据骰子的结果 move 。下面是我尝试做的，但它不起作用。(来自 button[].addActionListener(new ActionList
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求我们推荐或查找书籍、工具、软件库、教程或其他场外资源的问题对于 Stack Overflow 来说是
谁能告诉我如何使用 JavaScript、表格标签或 生成棋盘 (8x8)？ 到目前为止，我得到了以下内容: div { border:1px solid black; width:20px;
大家好，我最近开始做一个国际象棋应用程序，除了 GUI 之外，我已经设置好了所有的东西。出于某种原因，我无法让电路板显示瓷砖，我也不知道为什么。 (推测)我认为我的问题与我对 DOM 的使用有关。对我
我试图创建一个带有表格的棋盘 (HTML/CSS)。我在表格边框方面遇到了麻烦。我只希望电路板有边框，排除行号和列字母。 我该怎么做？ table { border-bottom: solid 2
我是 java 和 android 的新手，但我正在寻找一个可以走上正轨的好教程。我想编写一个函数，用于在我的应用程序当前 View 的背景中绘制/重绘白底黑棋盘图案。我不想使用实际图像，因为我希望能
我正在尝试使用 GUI 的 NetBeans IDE 在 Java 中制作国际象棋游戏，但我无法使棋子停留在棋盘上方，当我尝试时，棋盘就会被推开。我对这两个图像都使用了标签。如何让棋子停留在棋盘上方而
我试图为 Tic Tac Toe 游戏编写代码。我编写了以下代码来显示游戏板，但出现了问题，并且没有显示所需的输出。你能帮我找出错误在哪里吗？ 这里: 0代表空白， 1代表X和 2代表O。 publi
我的任务是通过 paintComponent 方法创建一个 10x10 可调整大小的棋盘。 我的问题是第一行正确，但下一行不显示，我根本不知道我的错误在哪里 GrafikPanel 类: import
我在这里尝试使用 javascript 棋盘:http://chessboardjs.com/ .不幸的是，我不知道 javascript 或 CSS，并且对 HTML 很生疏，所以我不理解文档，即使
我正在尝试在棋盘(见附图)和基于 cordova 的 Android 国际象棋游戏(lichess)之间传输数据。两个设备都将通过 USB 数据线连接。 android 的 cordova 应用程序是
我使用以下 CSS 代码创建了一个棋盘图案: .testcheckerboard{ width: 200px; height: 100px; background-color: white
我是一名优秀的程序员,十分优秀！