我对游戏编程比较新,甚至比Javascript更新。我想设计一个自上而下的游戏,我正在尝试生成一个带有tileset的地图。具体来说,我想在整个地图周围创建一个边框 - 但无论出于何种原因,上下文都不会绘制到画布上。有什么帮助吗?
var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");
canvas.width = 640;
canvas.height = 480;
var dungeon = [];
var Camera = {
posX: 0,
posY: 0,
}
var textures = new Image();
textures.onload = function(x, y) {
return 0;
}
textures.src = "Images/textures.jpg";
function createDungeon(width, height) {
for(a=0; a<height; a+=32) {
for(b=0; b<width; b+=32) {
if(a==0 || (a==height-32) || b==0 || (b==width-32)) {
dungeon.push([b, a, 0]);
}
else {
dungeon.push([b, a, 1]);
}
}
}
}
function drawDungeon(startX, startY, width, height) {
var viewX = startX;
while(viewX >= width) {
viewX-=width;
}
var viewY = startY;
while(viewY >= height) {
viewY-=height;
}
for(a=0; a<height; a+=32) {
for(b=0; b<width; b+=32) {
for(c=0; c<dungeon.length; c++) {
if(dungeon[c][0] == (b+startX) && dungeon[c][1] == (a+startY)) {
if(dungeon[c][2] == 0) {
ctx.drawImage(textures, b, a);
}
else if(dungeon[c][2] == 1) {
ctx.fillStyle = "#ffffff";
ctx.fillRect(b, a, 32, 32);
}
}
}
}
}
}
createDungeon(6400, 4800);
drawDungeon(Camera.posX, Camera.posY, canvas.width, canvas.height);