1

I have question about my code. It is really working weird.... I have no clue why this happens but let me explain. (MY English is bad but I will try my best to explain and give you guys good picture what is going on)

var spaceshipIncoming = document.createElement('audio');
var canvasMS12Main = document.getElementById('canvasMS12Main');
var imgMainMs12 = canvasMS12Main.getContext('2d');
var mainMs12 = new Image();
var number2 = 5;
var formatImage = ".png";
var stopeIncreaseMS12 = false;


function introMenu(){ //509,734,306,345
        imgMain.drawImage(mainImg, 6, 8, gameWidth, gameHeight, 0, 0, gameWidth, gameHeight);
        audioElement.setAttribute('src', 'soma.mp3');
        audioElement.play();          
}

function ms12AniAndSound(){
        setTimeout("introMS12()",5000);
        spaceshipIncoming.setAttribute('src', 'spaceshipIncoming.mp3');
        spaceshipIncoming.play();
}
function introMS12(){//78
    if(number2 < 78){
        number2 = number2 + 1;
    }else if (number2 == 78){
        stopeIncreaseMS12 = true;
    }
    var num = new Number(number2);
    mainMs12.src = 'ms12IntroAnimation/introMS12-' + num + formatImage;
    clearMainMS12();

    imgMainMs12.drawImage(mainMs12, 0, 0, gameWidth, gameHeight, 0, 0, gameWidth, gameHeight); 
    delayMS12();
}

function delayMS12(){
    if(stopeIncreaseMS12 == false){
    setTimeout("introMS12()",25);
    }else if(stopeIncreaseMS12 == true){
        clearMainMS12();
    }

}

function clearMainMS12(){
    imgMainMs12.clearRect(0, 0, 800, 500);
}

I have folder that has animation images, and the each PNG files are named like: introMS12-#. and each # starts from 6 to 78 (so basically it looks like introMS12-6.png, introMS12-7.png, introMS12-8.png.....introMS12-78.png)

When I first load the webpage, it doesn't show animation, but plays only mp3 sound on canvas. However, if I refresh it or press F5, it plays animation..... sometimes it doesn't play animation even if I refresh it. However, if I close the Chrome web browser and restart it and try refresh button, then it starts playing animation..... (it works randomly....)

I have been trying to make this work over 10 hours... but I do not know what is wrong with my code...... pleas help me ! thanks.

Improve this question
5
  • Are you preloading the images, if not you may be trying to run the animation before the images are load. Refreshing has probably given them time to be loaded in the cache. Commented May 7, 2012 at 11:56
  • if I put all imgs in array first and print them, will it decrease the time to load or cache load? or gives same amount of time delay? Commented May 7, 2012 at 13:34
  • by the way, thank you so much jing3142. I have been looking for answer from program expert.... but no one answered to me.... I am glad at least I got an idea that it is load and cache problem.... Commented May 7, 2012 at 13:39
  • try this for suggestions on pre loading images stackoverflow.com/questions/1038706/pre-loading-images Commented May 7, 2012 at 15:13
  • thank you ^^^ that was rly helpful Commented May 11, 2012 at 7:15
Related questions
0
Loops in HTML5 Canvas Animations
1
Drawing img in Canvas with for loop
0
Animate Canvas using for loop and setInterval
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.