HTML 5 animation de toile - objets clignotants

Question

J'apprends des façons de manipuler HTML 5 Canvas, et j'ai décidé d'écrire un jeu simple, une arcade de défilement, pour une meilleure compréhension. C'est encore au tout début du développement, et en rendant un arrière-plan (un champ d'étoiles en mouvement), j'ai rencontré un petit problème ennuyeux, certaines des étoiles clignotent en se déplaçant. Voici le code je:

var c = document.getElementById('canv'); 

var width = c.width; 
var height = c.height; 
var ctx = c.getContext('2d');//context 

var bgObjx = new Array; 
var bgObjy = new Array; 
var bgspeed = new Array; 

function init(){ 
    for (var i = 1; i < 50; i++){ 
     bgObjx.push(Math.floor(Math.random()*height)); 
     bgObjy.push(Math.floor(Math.random()*width)); 
     bgspeed.push(Math.floor(Math.random()*4)+1); 
    } 
    setInterval('draw_bg();',50); 
} 

function draw_bg(){ 
    var distance; //distace to star is displayed by color 

    ctx.fillStyle = "rgb(0,0,0)"; 
    ctx.fillRect(0,0,width,height); 

    for (var i = 0; i < bgObjx.length; i++){ 
     distance = Math.random() * 240; 
     if (distance < 100) distance = 100;//Don't let it be too dark 
     ctx.fillStyle = "rgb("+distance+","+distance+","+distance+")"; 
     ctx.fillRect(bgObjx[i], bgObjy[i],1,1); 
     bgObjx[i] -=bgspeed[i]; 
     if (bgObjx[i] < 0){//if star has passed the border of screen, redraw it as new 
      bgObjx[i] += width; 
      bgObjy[i] = Math.floor(Math.random() * height); 
      bgspeed[i] = Math.floor (Math.random() * 4) + 1; 
     } 
    } 
} 

Comme vous pouvez le voir, il y a 3 tableaux, un pour étoiles (objets) x coordonnons un pour y, et une pour vitesse variable. La couleur d'une étoile change chaque image, pour la faire scintiller. Je me doutais bien que le changement de couleur est la question, et binded la couleur de l'objet à la vitesse:

for (var i = 0; i < bgObjx.length; i++){ 
    distance = bgspeed[i]*30; 

En fait, qui a résolu le problème, mais je ne comprends toujours pas comment. Est-ce que n'importe quel gourou de rendu graphique se donnerait la peine d'expliquer cela, s'il vous plaît?

Merci d'avance.

P.S. Juste au cas où: oui, j'ai dessiné quelques solutions à partir d'un jeu de Canvas existant, y compris la couleur liée à la vitesse. Je veux juste comprendre la raison derrière cela.

Answer 1

Dans ce cas, le «clignotement» des étoiles est dû à une erreur logique dans la détermination de la valeur distance (couleur) des étoiles.

distance = Math.random() * 240; // Ce n'est pas garanti pour retourner un entier

distance = (Math.random() * 240)>>0; // Ce arrondit le résultat entier le plus proche

double buffering est généralement inutile pour la toile, que les navigateurs ne seront pas afficher la toile tirée jusqu'à ce que les fonctions de dessin soient toutes terminées.

Answer 2

Permet de voir un effet similaire lors de la programmation de jeux directs2d. Trouvé un double tampon permettrait de fixer le scintillement.

Vous ne savez pas exactement comment vous obtiendriez un tampon double (ou triple?) Avec la balise canvas, mais c'est la première chose que j'examinerais.