html - 根据窗口大小绘制游戏板/桌子大小
问题描述
我有一个关于根据正在使用的窗口或浏览器的大小调整/绘制游戏板的问题。我正在使用 html/css/js 编写黑白棋游戏。将附上我想要实现的图像。游戏板本身与显示在其右侧的信息具有相同的高度。例如,我希望它是窗口高度的 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>")
}
}
}
解决方案
这是我的代码,它与您的代码非常不同,但它可以缩放和处理放置的碎片和放置的碎片的颜色。
<!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>
推荐阅读
- optimization - Mapbox GL JS .setData() 循环性能优化
- java - Java在读取文件后打印文件的行
- java - 如何将填充 JSON 数据的 ArrayList 传递给 RecyclerView Adapter 的构造函数?
- c++ - 复制初始化、直接初始化和值初始化有什么区别?
- c# - 在代码隐藏中使用 AJAX Post 方法的问题
- swift - 如何在按钮时添加表格视图单元格标签的更改值并将其当前值加1
- javascript - 如何在 VueJS 中修剪空白?
- security - 绕过 2FA | 谷歌身份验证器
- oracle - 什么是“Oracle 的 SQL:2011 方言”?
- websocket - 在 websocket 中丢失会话