Я пишу игру на основе поезда в Facebook Javascript. У меня есть перевернутый треугольник, который представляет поезд и пунктирные линии, которые представляют путь, который соединяет города в Европе. Поезд движется по пути, чтобы ехать из одного города в другой. В настоящее время я перерисовываю игровое поле при каждом обновлении страницы. Это дает эффект всегда показывать поезд в его последней позиции на пути. Однако использование обновления страницы для перерисовки игровой доски оказывается слишком загруженным процессором, и в результате производительность моих приложений снижается. Следовательно, мне нужно реализовать Ajax и некоторую спрайтовую анимацию для поезда.
Когда поезд меняет положение на пути, мне нужно стереть маркер поезда в его старом положении и перерисовать его в новом положении. Я знаю, как перерисовать его, но мне нужно помочь, стереть его в прежнем положении и восстановить фоновую графику. Я понятия не имею, как это сделать. На самом деле, я вообще не знаю, как манипулировать графикой в javascript (кроме базовой процедуры PlotPixel (), которая создает div размером 1px). Пожалуйста, имейте в виду, что 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.