DrawImage在For循环中不起作用

时间:2018-05-30 20:54:26

标签: javascript loops

我对游戏编程比较新,甚至比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);

0 个答案:

没有答案