Рисование игрового поля / размера стола в зависимости от размера окна
У меня есть вопрос об изменении размера / рисовании игровой доски в зависимости от размера используемого окна или браузера. Я кодирую реверси игры, используя html/css/js. Будет прикреплено изображение того, чего я хочу достичь. Сама игровая доска имеет ту же высоту, что и информация, отображаемая справа от нее. Я хотел бы, чтобы он составлял, например, 70% высоты окна, чтобы у меня оставались 30% для создания границы и т. Д. В HTML я определил таблицу с идентификатором 'board-table', а затем попытался создать переменную "Размер", чтобы определить высоту этой таблицы. В 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>")
}
}
}
2 ответа
В 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>