爲什麼我的HTML5頁面在從本地不在本地加載時崩潰

HTML5的全新功能我開始使用canvas進行遊戲。這是我的第一個畫布頁面。爲什麼我的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>

來源

2013-05-29 Time Sheep

我剛剛通過Chrome開發人員工具分析了您網頁的JS，'drawGrid（）'佔用了所有處理時間的98％。我想你在那裏遇到了一個無限循環。 – ComFreek

@ComFreek如果是這樣，drawPlayer函數將不會運行，所以我不明白它是如何循環的。偶然的負載事件循環嗎？ –

哦，drawPlayer沒有運行...對。 –

是相對於當前頁面的圖像路徑？您是否嘗試過類似

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

例如，如果cellWidth爲零，那麼

curX += cellWidth;

不會讓你脫離該循環。

來源

2013-05-30 00:01:50

我早些時候嘗試過無效。是的，它們與當前路徑相關。 –

在圖像加載事件完成之前，不應調用drawGrid？ –

是的是的是的，就是這樣！它說單元格是0x0像素，所以我只需要將loadgraw的loadload回調或類似的東西至少添加到drawgrid ...謝謝！ –

爲什麼我的HTML5頁面在從本地不在本地加載時崩潰

回答

相關問題