我正在尝试使用p5.js制作一个HTML5游戏,首先我尝试实现的是绘制平铺地图,但我的代码没有起作用。
我使用嵌套循环来绘制瓦片,但我需要更快的方法,我找到了另一种使用一维数组绘制平铺的算法,但我尝试了这个算法它不起作用,我不知道为什么?
let tileset;
let map = [
0, 0, 0,
0, 0, 0,
1, 1, 1
];
function preload() {
tileset = loadImage("./tileset.png");
}
function setup() {
createCanvas(500, 500);
}
function draw() {
background(0);
drawTiles(map, 3, 11);
}
function drawTiles(map, cols, tilesize) {
for (let i = map.length - 1; i > -1; --i) {
let value = map[i];
// source x , y
let sx = (value % cols) * tilesize;
let sy = Math.floor(value / cols) * tilesize;
// distenation x , y
let dx = (i % cols) * tilesize;
let dy = Math.floor(i / cols) * tilesize;
// render image
image(tileset, sx, sy, tilesize, tilesize, dx, dy, tilesize, tilesize);
}
}