Question

我正在Facebook Javascript中编写基于火车的游戏。我有一个倒三角形代表火车和虚线，代表连接欧洲城市的轨道。火车沿着轨道移动，从一个城市到另一个城市。这时，我重新绘制每个页面刷新的游戏板。这具有始终显示列车在轨道上的最新位置的效果。但是，使用页面刷新来重绘游戏板变得过于耗费CPU，因此我的应用程序性能受到了影响。因此我需要为火车实现Ajax和某种精灵动画。

当火车在轨道上改变位置时，我需要将火车标记擦除在旧位置，然后重新绘制它的新位置。我知道如何重绘它，但删除它的旧位置并恢复背景图形是我需要帮助的地方。我不知道该怎么做。事实上，我根本不知道在javascript中操作图形（除了创建1px div的基本PlotPixel（）例程）请记住，Facebook JS与现有的JS库和框架不兼容。

有人能为我提供一些帮助吗？我非常感激。谢谢！

以下是相关代码：

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);
}

此代码从一个城市的x，y坐标到另一个城市的x，y坐标绘制轨迹（虚线）。如果该列车道上有火车，它也会乘坐火车。如果火车出现在其中一个城市，它会在城市中划出火车。

游戏本身位于http://apps.facebook.com/rails_dev。

Answer 1

也许不是操纵图像本身，而是使用z-index和绝对定位的div将列车图像移动到位置顶部（地图图像？）？与尝试在javascript中创建或修改实际图像数据相比，这可能更容易实现并且更高效。

[编辑：显示或隐藏图片，javascript看起来像：

（给出一些类似HTML的内容）

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

javascript看起来像：

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

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

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

Answer 2

绝对将你的“游戏世界”变成一个div，背景图片上有地图和曲目。然后，您可以操纵<img>元素（您的火车）来更改其位置：

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";
}

关于JavaScript图形动画的问题：保存和恢复“精灵”背景

2 个答案: