Question

全新的HTML5我开始玩画布。这是我的第一个画布页面。

当你在本地运行它（即file：///）时，它运行得很好，但是当我将文件上传到我的任一个webhost时，页面在加载时卡住了。加载图标正在旋转，标题出现，但页面正文永远不会被检索，所以很明显它会卡在头部某处。

以下是我的代码：

<!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>

Answer 1

图像路径是否相对于当前页面？你尝试过像

这样的东西吗？

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

e.g。如果cellWidth为零则

curX += cellWidth;

不会让你退出那个循环。

为什么我的HTML5页面在从本地不加载时从Web加载时崩溃

1 个答案: