HTML 5 dessin efficace sur toile pour le jeu

Question

Je tente de développer un jeu avec un élément de toile. En ce moment, je dessine des tuiles (carrés de couleur) comme arrière-plan, et le héros est contrôlé par des flèches basées sur cette démo:

Cependant, appeler showDungeon() pour dessiner mon fond rend le mouvement du héros non lisse comme dans la démo. Je pense que le problème est que je dessine chaque tuile comme 32x32, ce qui rend le mouvement lent dans Chrome. Des suggestions ou des optimisations de code que je peux faire? Le mouvement est bien quand les tuiles sont 16x16, mais je veux les tuiles 32x32. Je ne veux pas utiliser CSS pour doubler la taille de la toile car cela peut ruiner les graphiques avec anti-aliasing. http://www.html5rocks.com/en/tutorials/casestudies/onslaught.html#toc-pixelated

// Draw everything 
var render = function() { 

    showDungeon(); 
    ctx.drawImage(img, hero.x, hero.y); 

}; 

// The main game loop 
var main = function() { 
    var now = Date.now(); 
    var delta = now - then; 

    update(delta/1000); 
    render(); 

    then = now; 
}; 

// Let's play this game! 
var then = Date.now(); 
setInterval(main, 1); // Execute as fast as possible 

problème sans rapport avec: pour une raison quelconque, je ne pourrais pas dessiner un carré vert comme un héros dans render(), donc j'utiliser une image au lieu. http://jsfiddle.net/4M5Xz/4/

Answer 1

Vous avez une boucle étrange dans le code:

function showDungeon() { 
    for (var x = 0; x < (15*32); x++) { 
     for (var y = 0; y < (15*32); y++) { 
     ... 
     } 
    } 
} 

Il est comme vous dessinez l'arrière-plan trop de fois. Je l'ai changé à:

function showDungeon() { 
    for (var x = 0; x < 15; x++) { 
     for (var y = 0; y < 15; y++) { 
     ... 
     } 
    } 
} 

et il était à nouveau lisse.