Я уже запустил демона на веб-сокете, отрисовал для всех клиентов дижение танчиков и т.д.
Но я так же сделал что-бы на фронт передавалась для всех клиентов сообшение о движений и отрисовки пули. И даже проверил через case, осталось просто нарисовать пулю, но я не понимаю как?
Кому нужен полный код javascript'a:
https://codepen.io/Crose00555/pen/XGYzEY
Cам код на танчик не будет работать увас, так как есть еше файлы php и демон. Там я все сделал правильно.
Проверка все есть, осталось нарисовать в функций newBullets:
initialize: function(data) {
tankData = {
id: data.id,
x: 300 + 2*data.id,
y: 330,
w: 85,
h: 75,
i: "../static/img/tanchik.png",
};
tank = new Tank(tankData.id, tankData.x, tankData.y, tankData.w, tankData.h, tankData.i);
this.tanks[data.id] = tank;
this.currentTank = tankData.id;
this.ws.send(JSON.stringify({
action: "initialized",
data: tankData
}));
},
activity: function (data) {
serverElements = [];
data.forEach(element => {
if(! this.tanks[element.id]) {
this.tanks[element.id] = new Tank(element.id, element.x, element.y, element.w, element.h, element.i);
} else {
this.tanks[element.id].processData(element);
}
serverElements.push(element.id);
});
for(tank in this.tanks) {
var found = false;
serverElements.forEach(element => {
if(element == tank) {
found = true;
}
});
if(!found) {
delete this.tanks[tank];
}
}
},
newBullets: function (data) {
}
Информация о отрисовки и т.д:
function Bullet(direction, x, y) {
var self = this;
self.x = x;
self.y = y;
self.img = new Image();
self.img.src = "/static/img/tank_bullet.png";
self.direction = direction;
self.width = 30;
self.height = 20;
self.angle = 0;
self.speed = 7;
self.moveUp = function() {
self.y-=self.speed;
self.angle=-90;
}
self.moveLeft = function() {
self.x-=self.speed;
self.angle=180;
}
self.moveRight = function() {
self.x+=self.speed;
self.angle=0;
}
self.moveDown = function() {
self.y+=self.speed;
self.angle=90;
}
self.getBulletData = function() {
return {
id: self.id,
x: self.newX,
y: self.newY,
a: self.newAngle,
d: self.direction
};
}
self.processData = function(data) {
self.x = data.x;
self.y = data.y;
self.angle = data.a;
}
self.drawBullet = function() {
if (self.direction == 0) {
self.moveUp();
}
if (self.direction == 90) {
self.moveRight();
}
if (self.direction == -90) {
self.moveLeft();
}
if (self.direction == 180) {
self.moveDown();
}
myGame.drawRotatedImage(self.img, self.x, self.y, self.angle, self.width, self.height);
}
}
И так-же я уже каждый раз создаю пулю;
for(tank in gameProcessor.tanks) {
tank = gameProcessor.tanks[tank];
if (tank.id == gameProcessor.currentTank) {
if (self.key == 37) {
tank.moveLeft();
}
if (self.key == 38) {
tank.moveUp();
}
if (self.key == 39) {
tank.moveRight();
}
if (self.key == 40) {
tank.moveDown();
}
if(self.key == 32) {
tank.shoot();
self.key = false;
self.ws.send(JSON.stringify({
action: "shoot",
data: tank.getTankData()
}));
}
if (tank.isUpdated) {
tank.isUpdated = false;
self.ws.send(JSON.stringify({
action: "processTank",
data: tank.getTankData()
}));