我正在使用 HTML5 Canvas 制作国际象棋游戏，但我无法正确显示排名和文件标签。我所说的标签是指位于棋盘外围的 1,2,..,8 和 A,B,...H 文本，用于唯一标识棋盘位置。目前我在“board”元素之外使用两个 div 来显示标签。我目前这样做的方式没有响应，并且在我设计它的设备以外的设备上显示时通常无法正确显示。文件的文本(字母)和排名(数字)可能大小不同，或者字符可能未与每列或每行的中心对齐。
这是当一切都按预期工作时板的样子
这是我在电话中遇到的问题。字母不与面板的拼贴对齐，控制小部件也移到页面外:
chessboard = document.getElementById('chessboard');
ctxPiece = document.getElementById('chesspieceCanvas').getContext('2d');
ctxHighlight = document.getElementById('highlight').getContext('2d');
drawBoard(chessboard, chessboard.getContext('2d'));
function drawBoard(canvas, ctx) {
var rows = 8;
TILE_SIZE = canvas.height / rows;
var white = true;
var TILE_COLOR1 = "rgb(160,82,45)";
var TILE_COLOR2 = "rgb(245,222,179)";
for (var row = 0; row < rows; row++) {
for (var col = 0; col < rows; col++) {
if (!white) {
ctx.fillStyle = TILE_COLOR1;
ctx.fillRect(col * TILE_SIZE, row * TILE_SIZE, TILE_SIZE, TILE_SIZE);
white = true;
} else {
ctx.fillStyle = TILE_COLOR2;
ctx.fillRect(col * TILE_SIZE, row * TILE_SIZE, TILE_SIZE, TILE_SIZE);
white = false;
}
}
white = !white;
}
}#gameArea {
width: 650px;
font-size: 16px;
}
#output {
text-align: center;
}
#outputMessage {
display: inline-block;
font-size: 2.5em;
font-weight: bold;
}
#boardAndInfo {
overflow: visible;
position: relative;
width: 1000px;
}
#board {
display: inline-block;
border: 0.12em solid black;
height: inherit;
position: relative;
width: 600px;
line-height: 0;
overflow: hidden;
}
#chessboard {
position: absolute;
z-index: 0;
}
#highlight {
position: absolute;
z-index: 1;
}
#gameInfo {
display: inline-block;
height: 585px;
width: 190px;
vertical-align: top;
position: relative;
}
#fileNotation {
color: gray;
font-size: 2.0em;
margin-left: 50px;
letter-spacing: 54px;
}
#chesspieceCanvas {
font-size: 70px;
font-family: 'Open Sans', sans-serif;
position: relative;
z-index: 2;
}
#rankNotation {
color: gray;
float: left;
font-size: 2.0em;
line-height: 235%;
position: relative;
width: 1.5ch;
word-wrap: break-word;
}<body>
<div id='gameSynopsis'>
</div>
<div id="gameArea" lang='en'>
<div id="output">
<span id="outputMessage">Some text here</span>
<span id="aiThinkingIndicator" class="loading hide"></span>
</div>
<div id="fileNotation" class="boardLabel">
ABCDEFGH
</div>
<div id="rankNotation" class="boardLabel">
87654321
</div>
<div id="boardAndInfo">
<div id="board">
<canvas id="chessboard" width="600" height="600"></canvas>
<canvas id="highlight" width="600" height="600"></canvas>
<canvas id="chesspieceCanvas" width="600" height="600">
<p id='canvasSupportMsg'></p>
</canvas>
</div>
<fieldset id="gameInfo">
<legend id='gameInfoTitle'>Stuff</legend>
</fieldset>
</div>
</div>
</body>可以找到我游戏的 fiddle here .如果我遗漏任何其他内容，请告诉我。
我正在寻找一种方法来改变它的工作方式以使其正常扩展，但我还没有找到解决方案。
最佳答案
这是我最终完成的，我对结果非常满意。我无法找到直接使用 HTML 和 CSS 的解决方案，但希望这对以后的其他人有用。
我为排名和文件的各个组件创建了包装器，并将样式应用于每个元素以设置它们之间的间距。字母和数字的单个元素包装器按照它们的格式进行格式化，以消除默认情况下在内联元素之间创建的空白。
<div id="rank" class="boardLabel">
<div class="rankNumber">8</div>
<div class="rankNumber">7</div>
<div class="rankNumber">6</div>
<div class="rankNumber">5</div>
<div class="rankNumber">4</div>
<div class="rankNumber">3</div>
<div class="rankNumber">2</div>
<div class="rankNumber">1</div>
</div>
<div id="fileNotation" class="boardLabel">
<span class="fileLetter">A
</span><span class="fileLetter">B
</span><span class="fileLetter">C
</span><span class="fileLetter">D
</span><span class="fileLetter">E
</span><span class="fileLetter">F
</span><span class="fileLetter">G
</span><span class="fileLetter">H
</span>
</div>
然后使用以下 Javascript/jQuery 代码设置间距
// to set the rank spacing
var tileSize = $('#board').height() / 8;
$('.rankNumber').css('line-height', tileSize + 'px');
// to set file spacing
$('#file > .fileLetter').width($('#board').width() / 8);
本质上，棋盘宽度除以 8 以计算每个文件元素的宽度(因为国际象棋是在 8x8 的网格上下棋)，计算高度的过程类似。然后使用此计算来设置相关 CSS 属性的值。对于文件，我添加了一个与等级宽度大小相同的左边距，以便它与板的开头正确对齐
如果想了解有关该问题的更多信息，可以从 Stack Overflow 问题中获得，How to remove the space between inline-block elements? .
关于javascript - 如何正确定位国际象棋游戏的排名和文件标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46027177/