Question sur l'animation graphique JavaScript: sauvegarder et restaurer un fond de "sprite"

Question

J'écris un jeu basé sur le train dans Facebook Javascript. J'ai un triangle inversé qui représente le train et les lignes pointillées qui représentent la voie qui relie les villes en Europe. Le train se déplace le long de la piste pour se déplacer d'une ville à l'autre. À ce moment, je redessine le plateau avec chaque actualisation de page. Cela a pour effet de toujours montrer le train dans sa dernière position sur la piste. Toutefois, l'utilisation de l'actualisation de la page pour redessiner le plateau de jeu s'avère trop gourmande en ressources processeur et les performances de mes applications en souffrent. D'où j'ai besoin d'implémenter Ajax et une sorte d'animation d'image-objet pour le train. Lorsque le train change de position sur la voie, je dois effacer le marqueur de train à son ancienne position et le redessiner à sa nouvelle position. Je sais comment le redessiner, mais l'effacer à son ancienne position et restaurer les graphiques d'arrière-plan est là où j'ai besoin d'aide. Je n'ai aucune idée comment faire ça. En fait, je n'ai aucune connaissance de la manipulation des graphiques en javascript (sauf une routine de base PlotPixel() qui crée des divs 1px) S'il vous plaît gardez à l'esprit que Facebook JS est incompatible avec les bibliothèques et frameworks JS existants.

Quelqu'un peut-il m'aider? Je l'apprécierais beaucoup. Merci!

Voici le code correspondant:

function drawTrack(x1, y1, x2, y2, c, trains) { 
if(c == '#444') new Dialog().showMessage('dialog', 'in drawTrack: x1='+x1+', y1='+y1+', x2='+x2+', y2='+y2); 
/** 
if(trains[0]) { 
var train_dump = dump(trains[0], 2); 
new Dialog().showMessage('dialog', 'td='+train_dump); 
} 
**/ 
    var xs1 = x1; 
    var ys1 = y1; 
    var xs2 = x2; 
    var ys2 = y2; 
    var step = 1; 
    var dashlen = 4; 
    var middash = parseInt(dashlen/2); 
    var count = 1; 
    var steep = Math.abs(y2 - y1) > Math.abs(x2 - x1); 
    if (steep) { 
     var t = y1; 
     y1 = x1; 
     x1 = t; 
     t = y2; 
     y2 = x2; 
     x2 = t; 
    } 
    var deltaX = Math.abs(x2 - x1); 
    var deltaY = Math.abs(y2 - y1); 
    var error = 0; 
    var deltaErr = deltaY; 
    var xStep; 
    var yStep; 
    var x = x1; 
    var y = y1; 
    var drewDash; 
    if (x1 < x2) { 
     xStep = step; 
    } 
    else { 
     xStep = -step; 
    } 

    if(y1 < y2) { 
     yStep = step; 
    } 

    else { 
     yStep = -step; 
    } 
    var points = 0; 
    var drawFlag = false; 
    while(x != x2) { 
     x = x + xStep; 
     if(xStep > 0) { 
      if(x > x2) { 
      break; 
      } 
      // do not draw dashes near the city markers 
      if(x >= x2-dashlen) { 
      drawFlag = false; 
      } 
     } 
     if(xStep < 0) { 
      if(x < x2) { 
      break; 
      } 
      // do not draw dashes near the city markers 
      if(x <= x2+dashlen) { 
      drawFlag = false; 
      } 
     } 
     error = error + deltaErr; 
     if(2 * error >= deltaX) { 
      y = y + yStep; 
      error = error - deltaX; 
     } 
     if(points < dashlen) { 
      if(drawFlag) { 
      if(steep) { 
       PlotPixel(y, x, c); 
       drewDash = true; 
      } 
      else { 
       PlotPixel(x, y, c); 
       drewDash = true; 
      } 
      if(points == middash) { 
       if(trains[0]) { 
       for(var key = 0; key < trains.length; key++) { 
        if(trains[key]['track_unit'] == count) { 
        if(steep) { 
         trainMarker(y, x, trains[key]); 
        } else { 
         trainMarker(x, y, trains[key]); 
        } 
        } 
       } 
       } 
      } 
      } 
      points++; 
     } else { 
      drawFlag = !drawFlag; 
      if(drewDash) count++; 
      points = 0; 
      drewDash = false; 
     } 
    } 

    if(trains[0]) { 
     for(var key = 0; key < trains.length; key++) { 
     if(trains[key]['status'] == 'ARRIVED') { 
      if(trains[key]['direction'] == '+') { 
      trainMarker(xs2, ys2, trains[key]); 
      } else { 
      trainMarker(xs1, ys1, trains[key]); 
      } 
     } 
     } 
    } 
    return count; 
} 

function trainMarker(x, y, trainData) { 
    var train = document.createElement('div'); 
    train.setClassName('train'); 
    y -= trainMarkerHeight; 
    x -= parseInt(trainMarkerWidth/2); 
    var trainId = 'train-'+trainData['line'].toLowerCase()+'-'+trainData['player_number']; 
    train.setId(trainId); 
    train.setStyle('left', x + 'px'); 
    train.setStyle('top', y + 'px'); 

    var trainImg = document.createElement('img'); 
    trainImg.setSrc(publicURL + '/images/train_marker_red.gif'); 
    train.appendChild(trainImg); 

    var trainPlayerNum = document.createElement('div'); 
    trainPlayerNum.setClassName('train-player-num'); 
    trainPlayerNum.setId('train-player-'+trainData['player_number']); 
    trainPlayerNum.setTextValue(trainData['player_number']); 
    trainPlayerNum.setStyle('left', '8px'); 
    trainPlayerNum.setStyle('top', '1px'); 
    trainPlayerNum.addEventListener('mouseover', myEventHandler); 
    trainPlayerNum.addEventListener('mouseout', myEventHandler); 
    trainPlayerNum.appendChild(setTrainTooltip(trainData)); 
    train.appendChild(trainPlayerNum); 

    var parentObj = document.getElementById('map'); 
    parentObj.appendChild(train); 
} 

Ce code dessine la piste (lignes en pointillés) de x de une ville, y coords au x d'une autre ville, y coords. Si un train est présent sur cette ligne de voie, il tire également le train. Si le train est présent à l'une des villes, il tire le train à la ville.

Le jeu lui-même est au http://apps.facebook.com/rails_dev.

Answer 1

Peut-être qu'au lieu de manipuler l'image elle-même, vous pouvez déplacer l'image du train au-dessus de la position (image de carte?) En utilisant z-index et un div positionné de façon absolue. Cela pourrait être plus facile à mettre en œuvre et plus performant que d'essayer de créer ou de modifier les données d'image réelles en javascript.

[Edit: pour afficher ou masquer une image, le javascript ressemble:

(donné quelques HTML comme :)

<img src="train.jpg" id="trainImg" /> 
<img src="background.jpg" id="backgroundImg" /> 

Le javascript ressemble:

function getTrain() { 
    document.getElementById("trainImg"); 
} 

function showTrain() { 
    getTrain().style.display = ""; 
} 

function hideTrain() { 
    getTrain().style.display = "none"; 
} 

]

Answer 2

Transformez définitivement votre «monde du jeu» en un div avec la carte et la piste sur le backgr ound image. Vous pouvez ensuite manipuler un élément <img> (votre train) pour changer son emplacement:

var train = document.createElement("img"); 
train.srx = "..."; 
train.style.position = "absolute"; 
document.getElementById("gameboard").appendChild(train);  

function moveTrainTo(x, y) { 
    train.style.left = x + "px"; 
    train.style.top = y + "px"; 
}