StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You need to change the following lines</p> <pre><code>imgBackground.addEventListener('load', drawBg, false); // init to drawBg </code></pre> <p>and</p> <pre><code>function init(){ //drawBg(); remove this as you already calling on load of image loop(); document.addEventListener('keydown', checkKeyDown, false); document.addEventListener('keyup', checkKeyUp, false); } </code></pre> <p>Now the animation WORKS BUT you are using requestAnimationFrame which run 60fps so you are not able to see the animation properly. So if you want to use requestAnimationFrame then you need to have more sprites. </p> <p>If you cannot provide more sprites then do not use requestAnimationFrame instead use setTimeout (which is not recommended though) and make use of 10fps which you have used in your first example.</p> <h1>Update :</h1> <p>Here is the fiddle which gives your animation working <a href="http://jsfiddle.net/bittu4u4ever/7cua6/3/" rel="nofollow">Fiddle</a></p> <h1>More Update:</h1> <p>for better fps on moving the tadpole change this</p> <pre><code>Player.prototype.checkDirection = function(){ if(this.isUpKey){ this.drawY -= this.speed*this.width/10; // using width of the tadpole and 10fps } if(this.isRightKey){ this.drawX += this.speed*this.width/10; } if(this.isDownKey){ this.drawY += this.speed*this.width/10; } if(this.isLeftKey){ this.drawX -= this.speed*this.width/10; } } </code></pre> <p><a href="http://jsfiddle.net/bittu4u4ever/7cua6/5/" rel="nofollow">Fiddle </a> for that</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload