gpt4 book ai didi

javascript - 从数组中在 Canvas 上绘制正方形

转载 作者:行者123 更新时间:2023-12-01 01:12:47 30 4
gpt4 key购买 nike

我有一个关于如何使用嵌套数组中的坐标在 Canvas 上绘制正方形的问题。这个想法是突出显示一些方 block ,以便玩家知道他可以在这些方 block 上移动。

绘制这些方 block 的函数会在之后调用,因此整个 Canvas 不会再次绘制。

我知道如何在精确的正方形上显示图像,但不明白如何迭代嵌套数组,以便 Canvas 可以使用它来再次绘制一些红色的正方形。

如何将“数组坐标”转换为 Canvas 绘图方法可用的值。

或者问题是否来自 availableSquare 和 ChartBoard 之间的差异?

由于我没有找到任何与此相关的主题,因此我希望我的示例足够详细。

function Game(width, height) {
this.width = width;
this.height = height;
}
const game = new Game(10, 10)
const chartBoard = [];
const availableSquares = [
[6, 6],
[6, 7],
[6, 8]
]


// The nested arrays with all the possible position
function createBoard(width, height) {
for (let i = 0; i < width; i++) {
const row = [];
chartBoard.push(row);
for (let j = 0; j < height; j++) {
const col = {};
row.push(col);
}
}
return chartBoard;
};
createBoard(game.width, game.height);
console.log(chartBoard)

// Display the array on the canvas
const ctx = $('#board').get(0).getContext('2d');

function drawBoard(width, height) {
for (let i = 0; i < width; i++) {
for (let j = 0; j < height; j++) {
ctx.strokeStyle = 'rgba(0, 0, 0, 0.7)';
ctx.beginPath();
ctx.strokeRect(j * 64, i * 64, 64, 64);
ctx.closePath();
}
}
};
drawBoard(game.width, game.height);

// Function to highlight the squares from the array availableSquares
// function showAvailableMovement(array) {
// for (let i = 0; i < array.length; i++) {
// for (let j = 0; j < array[i].length; j++) {
//
// ctx.strokeStyle = 'red';
// ctx.beginPath();
// ctx.strokeRect(j * 64, i * 64, 64, 64);
// ctx.closePath();
// }
// }
// };
// showAvailableMovement(availableSquares);
body {
background-color: black;
}

#board {
background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="board" width="640" height="640"></canvas>

最佳答案

你实际上非常接近,你只是混淆了 x 和 y 值:

// Function to highlight the squares from the array availableSquares
function showAvailableMovement(array) {
for (let i = 0; i < array.length; i++) {
for (let j = 0; j < array[i].length; j++) {

let x = array[i][0];
let y = array[i][1];

ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.strokeRect(x * 64, y * 64, 64, 64);
ctx.closePath();
}
}
};
showAvailableMovement(availableSquares);

关于javascript - 从数组中在 Canvas 上绘制正方形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55019601/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com