0

对 HTML5 完全陌生，我开始玩画布。这是我的第一个画布页面。

当您在本地运行它时（即 file:///），它工作得很好，但是当我将文件上传到我的任何一个虚拟主机时，页面在加载时卡住了。加载图标正在旋转并且标题出现，但页面正文从未被检索到，因此很明显它卡在某个地方的头部。

下面是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <title>1st Attempt - 2D Canvas</title>
        <meta charset='utf-8'> 
        <script type="text/javascript">
            window.addEventListener('load', function () {
                canvas = document.getElementById('gamecanvas');
                context = canvas.getContext('2d');

                if(context){
                    // Load images and stuff
                    sprites = loadResources();

                    // Create player object
                    player = {"pos": {"x": 0, "y": 0}, "blockunder": sprites.grass};

                    // Draw a grid with a texture and stroke using my own awesome function
                    drawGrid(sprites.grass, false);
                    drawPlayer(0, 0);

                    // Define controls
                    window.onkeydown = function(event){
                        switch(event.which){
                            case 37: // ArrowLeft
                                movePlayer("left");
                                break;
                            case 38: // ArrowUp
                                movePlayer("up");
                                break;
                            case 39: // ArrowRight
                                movePlayer("right");
                                break;
                            case 40: // ArrowDown
                                movePlayer("down");
                                break;
                        }
                    }
                }
            }, false);

            function loadResources(){
                // Sprites
                var grass = new Image();
                grass.src = 'gfx/grass.png';

                var player = new Image();
                player.src = 'gfx/player.png';

                console.log("Loaded all resources");
                return {"player": player, "grass": grass};
            }

            function drawGrid(bgImage, drawStroke){
                cellWidth = bgImage.width;
                cellHeight = bgImage.height;
                console.log("Texture dimensions are " + cellWidth + "x" + cellHeight + " pixels");
                canvasWidth = context.canvas.getAttribute("width");
                canvasHeight = context.canvas.getAttribute("height");
                var curX = 0;
                var curY = 0;

                context.strokeStyle = '#444';
                context.lineWidth = 1;

                while(curX < canvasWidth){
                    while(curY < canvasHeight){
                        context.drawImage(bgImage, curX, curY);
                        if(drawStroke){
                            context.strokeRect(curX, curY, curX + cellWidth, curY + cellHeight);
                        }
                        curY += cellHeight;
                    }
                    curY = 0;
                    curX += cellWidth;
                }
            }

            function movePlayer(direction){
                switch(direction){
                    case "left":
                        drawPlayer(-cellWidth, 0);
                        break;
                    case "up":
                        drawPlayer(0, -cellWidth);
                        break;
                    case "right":
                        drawPlayer(cellWidth, 0);
                        break;
                    case "down":
                        drawPlayer(0, cellWidth);
                        break;
                }
            }

            function drawPlayer(addX, addY){
                addX = typeof addX !== 'undefined' ? addX : 0;
                addY = typeof addY !== 'undefined' ? addY : 0;

                context.drawImage(player.blockunder, player.pos.x, player.pos.y);
                if(player.pos.x + addX >= 0 && player.pos.x + addX < canvasWidth){
                    player.pos.x += addX;
                }
                if(player.pos.y + addY >= 0 && player.pos.y + addY < canvasHeight){
                    player.pos.y += addY;
                }
                context.drawImage(sprites.player, player.pos.x, player.pos.y);
            }
        </script>
    </head>
    <body style="text-align: center;">
        <h1>Run Steve!</h1>
        <canvas id="gamecanvas" height="608" width="800">Canvas is not supported.</canvas>
    </body>
</html>
4

1 回答 1

1

图像路径是否相对于当前页面？你有没有尝试过类似的东西

grass.src = '~/gfx/grass.png';

例如，如果 cellWidth 为零，则

curX += cellWidth;

不会让你摆脱那个循环。

于 2013-05-30T00:01:50.187 回答