Использование PreloadJS для загрузки изображений и их добавления на этап CreateJS

Question

Я пытаюсь создать игру Solitaire Tri Peaks в Javascript, используя CreateJS, чтобы помочь взаимодействовать с холстом HTML. Я не совсем новичок в программировании, так как я занимаюсь колледжскими курсами на Java и C, но я новичок в Javascript и HTML.

Я создал большое количество карточной игры, используя класс карты и класс Deck, с добавлением изображения, прослушиванием событий и логикой игры, сделанной в одном файле Javascript, но это привело к большому количеству грязного, некорректного кода что я чувствовал необходимость очистки.

Я пытаюсь реализовать отдельный класс для карточного стола, который будет холстом или сценой, и он будет рисовать 4 ряда играемых карточек, стопку запаса и стопку отходов. В настоящее время я просто пытаюсь найти кучу запаса на холсте, но этого не происходит.

Мой вопрос в том, почему мой шток запаса не появляется? Кроме того, как вы можете видеть, изображения карт загружаются при создании карт. Должен ли я делать это по-другому?

класс

карта:

var Card = function(number) { 
    this.isFaceUp = false; 
    //number for image file path 
    this.number = number; 
    this.value = Math.ceil((this.number)/4); 
    //back of the card is default image 
    this.initialize("images/" + 0 + ".png"); 
    console.log("card created") 
    this.height = this.getBounds().height; 
    this.width = this.getBounds().width; 
    //load the card's front image 
    this.frontImage = new Image(); 
    this.frontImage.src = (this.getImagePath()); 
}; 

Card.prototype = new createjs.Bitmap("images/" + this.number + ".png"); 

Card.prototype.getImagePath = function() { 
     return "images/" + this.number + ".png"; 
}; 

Card.prototype.getValue = function() { 
    return this.value; 
} 
Card.prototype.flip = function() { 
// this.image = new Image(); 
// this.image.src = (this.getImagePath()); 
    this.image = this.frontImage; 
    this.isFaceUp = true; 
}; 

Card.prototype.getHeight = function() { 
    return this.height; 
}; 

Card.prototype.getWidth = function() { 
    return this.width; 
}; 

CardDeck класс:

function CardDeck() { 
    //create empty array 
    this.deck = []; 
    //fill empty array 
    for(i=1; i<=52; i++) { 
     //fill deck with cards, with i being the number of the card 
     this.deck[i-1] = new Card(i); 
    } 
    //shuffle deck 
    this.shuffle(); 
} 

CardDeck.prototype.getCard = function() { 
    if(this.deck.length < 1) alert("No cards in the deck"); 
    return this.deck.pop(); 
}; 

CardDeck.prototype.getSize = function() { 
    return this.deck.length; 
}; 

CardDeck.prototype.shuffle = function() { 
    for (i=0; i<this.deck.length; i++) { 
     var randomIndex = Math.floor(Math.random()*this.deck.length); 
     var temp = this.deck[i]; 
     this.deck[i] = this.deck[randomIndex]; 
     this.deck[randomIndex] = temp; 
    } 
}; 

CardDeck.prototype.getRemainingCards = function() { 
    return this.deck.splice(0); 
} 

CardDeck.prototype.listCards = function() { 
    for(i=0; i<this.deck.length; i++) { 
     console.log(this.deck[i].number); 
    } 
}; 

CardTable класс:

var CardTable = function(canvas) { 
    this.initialize(canvas); 
    this.firstRow = []; 
    this.secondRow = []; 
    this.thirdRow = []; 
    this.fourthRow = []; 
    this.stockPile = []; 
    this.wastePile = []; 
    //startX is card width 
    this.startX = (new Card(0)).width*3; 
    //startY is half the card height 
    this.startY = (new Card(0)).height/2; 
}; 

CardTable.prototype = new createjs.Stage(); 

CardTable.prototype.createStockPile = function(cards) { 
    for(i=0; i<23; i++) { 
     cards[i].x = 10; 
     cards[i].y = 50; 
     this.stockPile[i] = cards[i]; 
    } 
}; 

CardTable.prototype.addToWastePile = function(card) { 
    card.x = startX + card.width; 
    card.y = startY; 
    this.wastePile.push(card); 
    this.addChild(card); 
    this.update(); 
}; 

CardTable.prototype.drawStockPile = function() { 
    for(i=0; i<this.stockPile.length; i++) { 
     console.log("this.stockPile[i]"); 
     this.addChild(this.stockPile[i]); 
    } 
    this.update(); 
}; 

HTML файл:

<html> 
    <head> 
     <title>Tri-Peaks Solitaire</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script> 
     <script src="card.js"></script> 
     <script src="carddeck.js"></script> 
     <script src="cardtable.js"></script> 
     <script> 
      function init(){ 
       var canvas = document.getElementById("canvas"); 
       var table = new CardTable("canvas"); 
       deck = new CardDeck(); 
       table.createStockPile(deck.getRemainingCards()); 
       table.drawStockPile(); 
       table.update(); 
      } 
     </script> 
    </head> 
    <body onload="init()"> 
     <h1>Tri-Peaks Solitaire</h1> 
     <canvas style='border: 5px solid green; background: url("images/background.jpg");' 
       id="canvas" width="1000" height="450"> 
     </canvas> 

    </body> 
</html> 

PRELOADJS UPDATE:

var canvas = document.getElementById("canvas"); 
     var stage = new createjs.Stage(canvas); 
     var gameDeck = new CardDeck(); 
     var numbers = []; 
     var preloader; 
     var progressText = new createjs.Text("", "20px Arial","#FF0000"); 
     progressText.x = 50; 
     progressText.y = 20; 
     stage.addChild(progressText); 
     stage.update(); 
     setupManifest(); 
     startPreload(); 
function setupManifest() { 
      for(i=0; i<=52; i++) { 
      console.log("manifest"); 
       manifest.push({src:"images/" + i + ".png", 
           id: i}); 
       numbers.push(i); 
      } 
     } 

     function startPreload() { 
      preload = new createjs.LoadQueue(true); 
      preload.on("fileload", handleFileLoad); 
      preload.on("progress", handleFileProgress); 
      preload.on("complete", loadComplete); 
      preload.on("error", loadError); 
      preload.loadManifest(manifest); 
     } 

     function handleFileLoad(event) { 
      console.log("A file has loaded of type: " + event.item.type); 
      //console.log(numbers.pop()); 
      var cardNumber = numbers.pop(); 
      var newCard = new Card(cardNumber); 
      //faces.push(new Image()); 
      //faces[ faces.length - 1 ].src = "images/" + cardNumber + ".png"; 
      gameDeck.insertCard(newCard); 
     } 

     function loadError(evt) { 
      console.log("error",evt.text); 
     } 

     function handleFileProgress(event) { 
      progressText.text = (preload.progress*100|0) + " % Loaded"; 
      stage.update(); 
     } 

     function loadComplete(event) { 
      console.log("Finished Loading Assets"); 
     } 

Answer 1

Вы только обновляя сцену сразу после создания карты. Карты загружают растровые изображения, что является параллельной операцией, требующей времени. Таким образом, единственный раз, когда вы снимаете сцену, перед загрузкой изображений.

Я бы предложил использовать PreloadJS для предварительной загрузки изображений с вашей карты. Это также даст вам больший контроль над тем, когда/как они загружаются, и пусть вы покажете индикатор выполнения или distractor пользователю при загрузке.

Answer 2

Я предлагаю подождать, пока все изображения загрузятся, а затем вызывается stage.update(). В качестве альтернативы используйте обработчик событий createjs.Ticker.addEventListener("tick", handleTick); для обновления сцены для вас.

Код: http://www.createjs.com/docs/easeljs/classes/Ticker.html