javascript(html5)
preciso adicionar um jogador no mapa isometrico canvas e nao estou achando como fazer isso sera que algum programador de html5 canvas poderia me ajudar ai?
veja o codigo abaixo que carrega o mapa:
function drawMap(){
var tileH = 25;
var tileW = 50;
for(i=0;i<map.length;i++){
for(j=0;j<map[i].length;j++){
var drawTile = map[i][j];
var jogador = map[i][j];
var drawObj = objectMap[i][j];
var xpos = (i-j)*tileH + mapX;
var ypos = (i+j)*tileH/2+ mapY;
ctx.drawImage(tileImg[drawTile],xpos,ypos);
if(drawObj){
ctx.drawImage(objectImg[drawObj-1],xpos,ypos-(objectImg[drawObj-1].height/2));
}
if (i == playerX && j == playerY ){var eu = ctx.drawImage(charImg[cimg],xpos,ypos-(charImg[0].height/2));
}
if(i == xmouse && j == ymouse){
ctx.fillStyle = 'rgba(255, 255, 120, 0.7)';
ctx.beginPath();
ctx.moveTo(xpos, ypos+12.5);
ctx.lineTo(xpos+25, ypos);
ctx.lineTo(xpos+50, ypos+12.5);
ctx.lineTo(xpos+25, ypos+25);
ctx.fill();
}
}
}
};
como voces podem ver ja tem um jogador que loga atravez desse if :
if (i == playerX && j == playerY ){var eu = ctx.drawImage(charImg[cimg],xpos,ypos-(charImg[0].height/2));
}
mais eu quero colocar outros jogadores aleatoriamente como em um chat por exemplo eu quero pegar...
nome;
imagem;
posiçaox;
posiçaoy;
digamos que seja um mmorpg e recebemos do servidor tcp o nome, imagem, posiçaox, posiçaoy, teriamos que dar um if no usuario por exemplo quando é um div usamos jquery e fazemos assim:
if($('#mouse_'+userid).length == 0 && userid != 'you') {
var randcolor = randc();
$('body').append('<div class="dot" style="background-color:'+randcolor+'" id="mouse_'+userid+'"/>'
);
}
if (userid != 'you'){
$('#mouse_'+userid).css({
'left' : x + 'px',
'top' : y + 'px'
})
}
compara o usuario se é diferente de voce(you) e cria uma div dinamica e adiciona nela 'left' : x + 'px', 'top' : y + 'px' e usa .append() para adicionar no body da pagina;
preciso dessa funçao mais em canvas html5;
se ainda nao estiverem entendendo a pergunta só falar que eu edito coloco mais codigos beleza.
http://glacialflame.com/tutorials/tiles/06/
valew desde ja obrigado.
Discussão (2)
Carregando comentários...