个人中心
gpt4 book ai didi

javascript - 如何正确定位国际象棋游戏的排名和文件标签？

转载 作者：行者123 更新时间：2023-11-28 03:04:13 25 4
gpt4 key购买 nike

我正在使用 HTML5 Canvas 制作国际象棋游戏，但我无法正确显示排名和文件标签。我所说的标签是指位于棋盘外围的 1,2,..,8 和 A,B,...H 文本，用于唯一标识棋盘位置。目前我在“board”元素之外使用两个 div 来显示标签。我目前这样做的方式没有响应，并且在我设计它的设备以外的设备上显示时通常无法正确显示。文件的文本(字母)和排名(数字)可能大小不同，或者字符可能未与每列或每行的中心对齐。

这是当一切都按预期工作时板的样子 chess board

这是我在电话中遇到的问题。字母不与面板的拼贴对齐，控制小部件也移到页面外:enter image description here 

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/

25 4 0
文章推荐： javascript - PySide 将 HTML 中的按钮连接到 PySide 插槽
文章推荐： javascript - 如何处理同一个csv文件的同时修改？
文章推荐： javascript - react 滚动的事件类无法正常工作
文章推荐： php - Javascript POST 不起作用 - 将 Javascript 数组发送到 PHP
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com