Canvas遊戲，在哪裏編寫背景代碼？

Question

的問題

我一直在創造一個遊戲，我得在這裏我想看看是什麼樣子與我創建了一個樣機背景的舞臺。

問題

凡約在我的代碼，我應該把這個代碼，它目前是犯規顯示背景的地方。

我想在畫布上這樣的背景下，尺寸是正確的。

守則

var game = create_game(); 
    game.init(); 

    function create_game() { 
     debugger; 
     var level = 1; 
     var projectiles_per_level = 1; 
     var min_speed_per_level = 1; 
     var max_speed_per_level = 2; 
     var last_projectile_time = 0; 
     var next_projectile_time = 0; 
     var width = 600; 
     var height = 500; 
     var delay = 1000; 
     var item_width = 30; 
     var item_height = 30; 
     var total_projectiles = 0; 
     var projectile_img = new Image(); 
     var projectile_w = 30; 
     var projectile_h = 30; 
     var player_img = new Image(); 
     var background_img = new Image(); 
     var c, ctx; 

     var projectiles = []; 
     var player = { 
      x: 200, 
      y: 400, 
      score: 0 
     }; 

     function init() { 
      projectile_img.src = "projectile.png"; 
      player_img.src = "player.png"; 

      background_img.src = "background.png"; 
      background_img.onload = function(){ 
       context.drawImage(background_img, 0, 0); 
        } 


      level = 1; 
      total_projectiles = 0; 
      projectiles = []; 

      c = document.getElementById("c"); 
      ctx = c.getContext("2d"); 
      ctx.fillStyle = "#410b11"; 
      ctx.fillRect(0, 0, 500, 600); 

      c.addEventListener("mousemove", function (e) { 
       //moving over the canvas. 
       var bounding_box = c.getBoundingClientRect(); 
       player.x = (e.clientX - bounding_box.left) * (c.width/bounding_box.width) - player_img.width/2; 
      }, false); 

      setupProjectiles(); 
      requestAnimationFrame(tick); 
     } 

     function setupProjectiles() { 
      var max_projectiles = level * projectiles_per_level; 
      while (projectiles.length < max_projectiles) { 
       initProjectile(projectiles.length); 
      } 
     } 

     function initProjectile(index) { 
      var max_speed = max_speed_per_level * level; 
      var min_speed = min_speed_per_level * level; 
      projectiles[index] = { 
       x: Math.round(Math.random() * (width - 2 * projectile_w)) + projectile_w, 
       y: -projectile_h, 
       v: Math.round(Math.random() * (max_speed - min_speed)) + min_speed, 
       delay: Date.now() + Math.random() * delay 
      } 
      total_projectiles++; 
     } 

     function collision(projectile) { 
      if (projectile.y + projectile_img.height < player.y + 20) { 
       return false; 
      } 
      if (projectile.y > player.y + 74) { 
       return false; 
      } 
      if (projectile.x + projectile_img.width < player.x + 20) { 
       return false; 
      } 
      if (projectile.x > player.x + 177) { 
       return false; 
      } 

      return true; 
     } 

     function maybeIncreaseDifficulty() { 
      level = Math.max(1, Math.ceil(player.score/10)); 
      setupProjectiles(); 
     } 

     function tick() { 
      var i; 
      var projectile; 
      var dateNow = Date.now(); 
      c.width = c.width; 
      for (i = 0; i < projectiles.length; i++) { 
       projectile = projectiles[i]; 
       if (dateNow > projectile.delay) { 
        projectile.y += projectile.v; 
        if (collision(projectile)) { 
         initProjectile(i); 
         player.score++; 
        } else if (projectile.y > height) { 
         initProjectile(i); 
        } else { 
         ctx.drawImage(projectile_img, projectile.x, projectile.y); 
        } 
       } 
      } 

      ctx.font = "bold 24px sans-serif"; 
      ctx.fillStyle = "#410b11"; 
      ctx.fillText(player.score, c.width - 50, 50); 
      ctx.fillText("Level: " + level, 20, 50); 

      ctx.drawImage(player_img, player.x, player.y); 
      maybeIncreaseDifficulty(); 
      requestAnimationFrame(tick); 

      ctx.drawImage(background_img, 0, backgroundY); 

     } 

     return { 
      init: init 
     }; 
    } 

Answer 1

正如評論所指出的，這裏更確切地說：

首先，背景圖片，必須先在每個動畫幀渲染。

但是，圖片並沒有顯示出來。這是由於變量被使用（backgroundY），這是從來沒有宣佈的地方。

這實際上應該打印到控制檯上，因爲未定義錯誤「backgroundY」。

每當圖像對象的屬性src被設置爲一個值時，它需要一段時間纔會被加載。所以在很多情況下，有必要指出何時何時完成onload回調加載。

然而，在這種情況下，沒有必要。滴答/動畫循環函數只會在加載之前繪製任何東西（一個空的圖像對象）。加載後，它將繼續每幀畫出加載的圖像。

如果背景真的很重要，那麼意味着應用只能在它開始的時候啓動，當然，只能從img.onload處理程序中啓動整個遊戲/動畫。

Answer 2

您必須繪製：

1. 後臺第一
2. 球員後
3. 水平/成績信息最後

Background < Player < UI < You Looking

描繪順序是從後頂（painters algorithm）

另外請注意，出於性能的考慮，如果你的背景不會改變，你可以在另一個「靜態」畫布繪製遊戲的下帆布。

否則，背景將被繪製在玩家的上方/上方並隱藏它。