4

簡単なカードゲームをして Javascript の学習を始めたところですが、問題に行き詰まっています。ユーザーがポップアップ ボックスで切り札を選択できるようになる前に、4 枚のカードを画像として表示したいと考えています。しかし、コードを実行するたびに、ポップアップボックスの前ではなく、カードの画像が表示されます。関連するコードを見てください：

function preloadImages() {
    var imgs = [];
    for (var i = 0; i < max_length_deck; i++) {
        imgs[i] = new Image();
        imgs[i].src = 'img/' + deck[i] + '.png';
    }
}

function generateDeck() {
    for (i = 0; i < colour.length; i++) {
        for (x = 0; x < number.length; x++) {
            deck.push(colour[i] + '' + number[x]);
        }
    }
}

function shuffleCards() {
    cards.length = 0;
    for (i = 0; i < max_length_deck; i++) {
        var random = Math.floor(Math.random() * deck.length);
        cards.push(deck[random]);
        deck.splice(random, 1);
    }
}

function dealCards() {
    generateDeck();
    preloadImages();
    shuffleCards();
    for (var i = 0; i < 4; i++) {
        window.document.images[i].src = 'img/' + cards[i] + '.png'; //I defined four image tags at html file
    }
    selectTrump();
}

function selectTrump() {
    var result = false;
    while (result != true) {
        trump = prompt("Please enter trump:", "");
        result = checkTrump(trump);
    }
}

すでにいくつかのことを検索して試しました（jQueryロードハンドラー; window.setTimeout）が、何も機能せず、問題も発生しません。だから、ヒントをどうもありがとう！

BRケアー

4

1 に答える 1

0

関数 Dealcards() では、カードを配る前に、最初に画像が読み込まれるまで待つ必要があります。これには、イベントハンドラーを追加して使用できます。

<html>
<head>
<script>
function loadImage()
{
alert("Image is loaded");
}
</script>
</head>

<body>
<img src="w3javascript.gif" onload="loadImage()" id="myImage">
</body>
</html>

//Or use:
// example

function addEvent(element, evnt, funct){
  if (element.attachEvent)
   return element.attachEvent('on'+evnt, funct);
  else
   return element.addEventListener(evnt, funct, false);
}

addEvent(
    document.getElementById('myImage'),
    'load',
    function () { alert('image loaded!'); }
);

addEventListener と onclick

于 2013-08-10T17:10:07.110 に答える