-1

I am working on a basic game in javascript. I don't use jQuery. The thing is that I have trouble in getting rid of the flickering. I noticed it happens because of the canvas clearing command. I read a lot of suggestions that recommended a sort of double buffering like having a buffer canvas on which I should draw which is not visible and another canvas which is visible and all the content is copied from the buffer. However, I doubt that even if I implement this I would still have the flickering as I still have to clear the visible canvas.

The final question is : What is the best way of getting rid of the flickering in my code? Thank you for your help.

this is a sample of my code:

http://edumax.org.ro/extra/new/Scratch.html

Vlad Otrocol
  • 2,952
  • 7
  • 33
  • 55
  • 1
    I don't see any flickering; just part of the word "True" and an Apple logo. What is it supposed to do? – Peter-Paul van Gemerden Dec 25 '11 at 11:42
  • Please post the link to the game itself: we can't help without that. There's no code in the linked-to sample. – Pete Wilson Dec 25 '11 at 11:45
  • I noticed before when playing around on the canvas that clearing canvas as part of animation can result in that kind of behavior. Perhaps you could try "painting" white over where the object moved from? – Chase Dec 25 '11 at 11:48
  • go to page source and in – Vlad Otrocol Dec 25 '11 at 11:51
  • and the game it's suppose to move on user keypress, try using the arrows – Vlad Otrocol Dec 25 '11 at 11:51

1 Answers1

1

In your draw() method you call loadImages(), hence loading the images every time you redraw, ie every time the apple moves, hence the flickering.

Just put some breakpoints in your draw method it will all become pretty clear.

I guess what you want to do is to load the images at loading time then just draw... no need to load on every move.

m0s
  • 4,250
  • 9
  • 41
  • 64
  • Your answer is genius! Thank you! It works great now. I just got into javascripting and working with html5 and I still have trouble understanding how the methods work. I thought you had that fixed way of inserting images that I kept finding on all websites. – Vlad Otrocol Dec 25 '11 at 12:00
  • @Vlad Otrocol You are welcome. I myself not very familiar with working with canvas and can't say much about it, but if you are just starting to work with this kind of things make sure to take full advantage of debugger in your browser, use breakpoints and do lots of logging it will save you lots of time. Take a look how it works in Chrome http://code.google.com/chrome/extensions/tut_debugging.html – m0s Dec 25 '11 at 12:17