Javascript 使用PreloJS加载图像并将其添加到CreateJS阶段
我正在尝试用Javascript创建一个Tri-Peaks纸牌游戏，使用CreateJS帮助与HTML画布交互。我对编程并不完全陌生，因为我上过Java和C的大学课程，但我对Javascript和HTML都是新手 我使用一个card类和Deck类创建了大量的纸牌游戏，在一个Javascript文件中添加了图像、事件侦听和游戏逻辑，但这导致了大量混乱的、有点缺陷的代码，我觉得需要清理这些代码 我正在尝试为卡片表实现一个单独的类，它将是画布或舞台，它将绘制4行可玩的卡片、库存堆和废弃堆。我目前只是想让股票堆出现在画布上，但这并没有发生 我的问题是，为什么我的股票没有出现？此外，如您所见，创建卡时会加载卡图像。我应该换一种方式吗 卡片类别：Javascript 使用PreloJS加载图像并将其添加到CreateJS阶段,javascript,html,canvas,easeljs,createjs,Javascript,Html,Canvas,Easeljs,Createjs,我正在尝试用Javascript创建一个Tri-Peaks纸牌游戏，使用CreateJS帮助与HTML画布交互。我对编程并不完全陌生，因为我上过Java和C的大学课程，但我对Javascript和HTML都是新手 我使用一个card类和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;
};
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);
}
};
函数CardDeck（）{
//创建空数组
this.deck=[]；
//填充空数组
对于（i=1；i您仅在创建卡后立即更新阶段。卡正在加载位图图像，这是一个需要时间的并发操作。因此，您渲染阶段的唯一时间是在加载图像之前
我建议使用PreloJS来预加载您的卡片图像。这还可以让您更好地控制它们加载的时间/方式，并让您在加载时向用户显示进度条或干扰物。我建议等待所有图像加载，然后调用stage.update（）。或者使用createjs.Ticker.addEventListener（“tick”，handleTick）；
事件处理程序为您更新阶段
参考资料：谢谢你的建议。我会试一试。我试过PreloJS，但我也遇到了类似的问题。画布上除了背景图像外没有显示任何内容。我目前正在尝试通过加载进度更新显示文本，但没有显示任何内容。你确定要更新阶段吗？阶段d除非调用stage.update（）
我在原始帖子的底部发布了新代码。在添加进度文本子项后，我正在更新阶段。insertCard
做什么？最好的方法是在加载卡片后创建套牌，或者至少在此时更新阶段。如果您仅在最初创建进度文本时进行更新，则不会显示任何内容。
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>
<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>
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");
}