我有一个关于根据正在使用的窗口或浏览器的大小调整/绘制游戏板的大小的问题。我正在使用html/css/js对游戏reverside进行编码。将附上我想要实现的目标的图片。游戏板本身的高度与右侧显示的信息的高度相同。例如，我希望它是窗口高度的70%，这样我仍然有剩余的30%来制作边框等。在HTML中，我定义了一个带有"board table"id的表，然后我试着制作一个可变的"size"来确定这个表的高度。在CSS中，我指定了高度应该是70%，这样之后就可以绘制游戏板了。然而，当我以不同的维度重新加载页面时，它总是有一个前缀大小，因此我想知道如何修复它。下面显示了我的代码部分。
HTML:
<table id="board-table"></table>
CSS：
#board-table {
height: 70%;
}
Javascript：
function draw() {
var size = $('#board-table').height();
var square = (1/8) * size;
var half = (1/2) * square;
for (var y = 0; y < 8; y++) {
for (var x = 0; x < 8; x++) {
var canvas = $("#canv_" + x + "" + y)[0]
var ctx = canvas.getContext("2d")
if (game.board[x][y] == 1) {
ctx.fillStyle = "green"
ctx.fillRect(0, 0, square, square)
ctx.beginPath()
ctx.fillStyle = "white"
ctx.arc(half, half, half, 0, 2 * Math.PI)
ctx.fill()
} else if (game.board[x][y] == 2) {
ctx.fillStyle = "green"
ctx.fillRect(0, 0, square, square)
ctx.beginPath()
ctx.fillStyle = "black"
ctx.arc(half, half, half, 0, 2 * Math.PI)
ctx.fill()
} else {
ctx.fillStyle = "green"
ctx.fillRect(0, 0, square, square)
}
}
}
}
function generateBoard() {
for (var y = 0; y < 8; y++) {
$("#board-table").append("<tr id=row" + y + "" + "><tr")
for (var x = 0; x < 8; x++) {
$("#row" + y).append("<td id=cell_" + x + "" + y + "></td>")
$("#cell_" + x + "" + y).append("<canvas height=100% onclick=handleclick(" + x + "," + y + ") onmouseover=handlehover(" + x + "," + y + ") width =100% id=canv_" + x + "" + y + "></canvas>")
}
}
}
我努力实现目标的例子。
在css中，当您使用height: 70%;时，它指的是包含元素的70%。
这可以通过使用height: 70vh;绕过
在这里详细介绍了这一点
这是我的代码，它与您的代码非常不同，但它可以缩放和处理放置的工件和正在放置的工件的颜色。
<!doctype html>
<html>
<head>
<title>Reversi</title>
<style>
body {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
}
</style>
</head>
<body>
<canvas class="board"></canvas>
<script>
const pi2 = 2 * Math.PI;
const pieceColor = {
1: '#FFF',
2: '#000',
11: '#fff5',
12: '#0005'
};
let board = [];
function resetBoard(canvas) {
board = [];
for(let i = 0; i < 8; i++) {
board.push([0,0,0,0,0,0,0,0]);
}
board[3][3] = 1;
board[4][4] = 1;
board[4][3] = 2;
board[3][4] = 2;
board[3][5] = 11;
board[2][3] = 12;
}
function draw(canvas) {
const body = document.body;
let canvasSize = (body.offsetWidth > body.offsetHeight ? body.offsetHeight : body.offsetWidth)-20;
if (canvasSize < 150) {
canvasSize = 150;
}
if (canvasSize > 550) {
canvasSize = 550;
}
console.log(canvasSize);
canvas.setAttribute('width', canvasSize+'px');
canvas.setAttribute('height', canvasSize+'px');
var ctx = canvas.getContext('2d')
var size = canvas.offsetWidth;
var square = (size-9)/8;
var half = (square/2)-2;
ctx.fillStyle = '#555';
ctx.fillRect(0, 0, size, size);
for (var y = 0; y < 8; y++) {
for (var x = 0; x < 8; x++) {
const piece = board[x][y];
ctx.fillStyle = '#449933';
const left = (x*(square+1))+1;
const top = (y*(square+1))+1;
ctx.fillRect(left, top, square, square);
if (piece !== 0) {
ctx.beginPath();
ctx.fillStyle = pieceColor[piece];
ctx.arc(half+left+2, half+top+2, half, 0, pi2);
ctx.fill();
}
}
}
}
const c = document.querySelector('.board');
resetBoard(c);
draw(c);
window.addEventListener('resize', () => {
draw(c);
})
</script>
</body>
</html>