CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvas
Steen Schütt
Steen Schütt

Reputation: 1504

Why does my HTML5 page crash when loaded from web when it doesn't locally

Completely new to HTML5 I started playing around with canvas. This is my first ever canvas page.

It works perfectly when you run it locally (i.e. file:///), but when I upload the files to either of my webhost, the page is stuck while loading. The loading icon is spinning and the title appears, but page body is never retrieved, so obviously it gets stuck in the head somewhere.

Below is my code:

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

Upvotes: 0

Views: 179

Answers (1)

Les Ferguson
Les Ferguson

Reputation: 351

Are the image paths relative to the current page? Have you tried something like

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

e.g. if cellWidth is zero then

curX += cellWidth;

won't get you out of that loop.

Upvotes: 1

Related Questions