這是我現(xiàn)在正在使用的代碼,試圖生成一個(gè)tilemap:// --- Javascript ---window.onload = function (){ var can = document.getElementById("canvas"); var ctx = can.getContext('2d'); var map = { cols: 8, //# of cols rows: 8, // # of rows tSize: 32, // tile size (32px x 32px) tiles: [ [1, 1, 1, 1 ,1 ,1, 1, 1], [1, 1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1, 1] ], // map};var tileAtlas = new Image();tileAtlas.src = 'Tiles.png';tileAtlas.onload = function () { for (var c = 0; c < map.cols; c++) { for (var r = 0; r < map.rows; r++) { if (map.tiles[c][r] !== 0) { // 0 is an empty tile ctx.drawImage( tileAtlas, // image map.tiles[c][r] * 32, // cut start x 0, // cut start y map.tsize, // size of tiles for cut size x map.tsize, // size of tiles for cut size y c * map.tsize, // place tiles on canvas x r * map.tsize, // place tiles on canvas y map.tsize, // place height map.tsize // place width ); } } }}}這是spritesheet本來應(yīng)該顯示一個(gè)8x8的“草”網(wǎng)格,但它是空白的,但控制臺(tái)卻很清晰
在Javascript中顯示圖塊地圖
牧羊人nacy
2021-04-09 16:14:48