[Resolvido] JavaScript array com imagens

lpw · Janeiro 10, 2013

Oi gente, eu sou novo aqui no forum, tenho algum conhecimento de Java e P.O.O, um pouco de C/C++ também, conheço um pouco de HTML5 (eu iniciei me focando nessa versão ja) PHP e JS.

Há algum tempo eu venho com a ideia de criar alguns jogos simples, afim de entender, tenho a intenção de montar um pequeno MMORPG em 2D, porém sei que ainda tenho muito chão pela frente. Em um de meus estudos eu peguei umas imagens de sprites criei um campo, afim de aprender a trabalhar com as teclas do teclado e o JS (setas, enter, esc, delet, etc) então nesse meu script a unica coisa que ele faz é andar pela tela e algumas coisinhas sem importancia. Bom ai que entra meu problema, eu faço a imagem se deslocar, criei um array com as imagens da sequencia dela andando, porem quando eu faço o personagem caminhar ele vai direto para a ultima posição do array, e se eu colocar um "if(i == 3){i = 0;}" onde "i" é a minha variavel e 3 é a ultima posição, ele simplesmente não se desloca mais.

Aqui vai meu codigo:

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Movendo personagem</title>

<script type="text/javascript">

// DECLARAÇÃO DE VARIAVEIS.

// PALCO.
var context; // Monta o palco para o canvas.
var alturaY = 640; // Altura da tela.
var larguraX = 640; // Largura da tela.

// TECLAS.
var up; // tecla seta para cima.
var down; // tecla seta para baixo.
var left; // tecla seta para esquerda.
var right; // tecla seta para direita.
var space; // tecla de ESPAÇO.
var enter; // tecla ENTER.
var esc; // tecla ESC.

// POSIÇÃO INICIAL.
var y = alturaY/2-16; // Determina a posição inicial no eixo Y.
var x = larguraX/2-16; // Determina a posição inicial no eixo X.

// DESENHA NA TELA.
var heroi = new Image(); // Pega e monta a imagem. Este é o "Buffer".

// FRENTE
var heroiFrente = new Image();
heroiFrente.src = "hero/h1.png"; // Recebe a imagem do personagem de frente.

var heroiAndaFrente1 = new Image();
heroiAndaFrente1.src = "hero/h2.png"; // Recebe a imagem do personagem andando de frente 1.

var heroiAndaFrente2 = new Image();
heroiAndaFrente2.src = "hero/h3.png"; // Recebe a imagem do personagem andando de frente 2.

// COSTAS
var heroiCostas = new Image();
heroiCostas.src = "hero/h10.png"; // Recebe a imagem do personagem de costas.

var heroiAndaCostas1 = new Image();
heroiAndaCostas1.src = "hero/h11.png"; // Recebe a imagem do personagem andando de costas.

var heroiAndaCostas2 = new Image();
heroiAndaCostas2.src = "hero/h12.png"; // Recebe a imagem do personagem andando de costas.

// ESQUERDA
var heroiEsquerda = new Image();
heroiEsquerda.src = "hero/h4.png"; // Recebe a imagem do personagem do lado esquerdo.

var heroiAndaEsquerda1 = new Image();
heroiAndaEsquerda1.src = "hero/h5.png"; // Recebe a imagem do personagem andando esquerda 1.

var heroiAndaEsquerda2 = new Image();
heroiAndaEsquerda2.src = "hero/h6.png"; // Recebe a imagem do personagem andando esquerda 2.

// DIREITA
var heroiDireita = new Image();
heroiDireita.src = "hero/h7.png"; // Recebe a imagem do personagem do lado direito.

var heroiAndaDireita1 = new Image();
heroiAndaDireita1.src = "hero/h8.png"; // Recebe a imagem do personagem andando direito 1.

var heroiAndaDireita2 = new Image();
heroiAndaDireita2.src = "hero/h9.png"; // Recebe a imagem do personagem andando direito 2.

var andaFrente = new Array(); // Monta o array de imagens para andar para frente.
andaFrente[0] = heroiFrente;
andaFrente[1] = heroiAndaFrente1;
andaFrente[2] = heroiFrente;
andaFrente[3] = heroiAndaFrente2;

var andaCostas = new Array(); // Monta o array de imagens para andar para tras.
andaCostas[0] = heroiCostas;
andaCostas[1] = heroiAndaCostas1;
andaCostas[2] = heroiCostas;
andaCostas[3] = heroiAndaCostas2;

var andaEsquerda = new Array(); // Monta o array de imagens para andar para a esquerda.
andaEsquerda[0] = heroiEsquerda;
andaEsquerda[1] = heroiAndaEsquerda1;
andaEsquerda[2] = heroiEsquerda;
andaEsquerda[3] = heroiAndaEsquerda2;

var andaDireita = new Array(); // Monta o array de imagens para andar para a direita.
andaDireita[0] = heroiDireita;
andaDireita[1] = heroiAndaDireita1;
andaDireita[2] = heroiDireita;
andaDireita[3] = heroiAndaDireita2;

heroi = heroiFrente; // Faz o Buffer receber o valor inicial da imagem.

// Faz variavel ficar com valor TRUE.
function KeyDown(e){ // Verifica se alguma das teclas foi pressionada.

if(e.keyCode == 38){ up = 1; animaUp(); }
if(e.keyCode == 40){ down = 1; animaDown(); }
if(e.keyCode == 37){ left = 1; animaLeft(); }
if(e.keyCode == 39){ right = 1; animaRight(); }

if(e.keyCode == 32){ space = 1; }
if(e.keyCode == 13){ enter = 1; }
if(e.keyCode == 27){ esc = 1; }
}

// Faz variavel ficar com valor FALSE.
function KeyUp(e){ // Verifica se alguma das teclas foi liberada.

if(e.keyCode == 38){ up = 0; heroi = heroiCostas; }
if(e.keyCode == 40){ down = 0; heroi = heroiFrente; }
if(e.keyCode == 37){ left = 0; heroi = heroiEsquerda; }
if(e.keyCode == 39){ right = 0; heroi = heroiDireita; }

if(e.keyCode == 32){ space = 0; }
if(e.keyCode == 13){ enter = 0; }
if(e.keyCode == 27){ esc = 0; }
}

function animaUp(){ // Executa a animação.

for(var i=0; i<=3; i++){
	heroi = andaCostas[i];
	/*if(i == 3){i=0;}*/
}
}
function animaDown(){ // Executa a animação.

for(var i=0; i <=3; i++){
	heroi = andaFrente[i];
	//if(i == 3){i=0;}
	/*setInterval(i, 4);*/
}
}
function animaLeft(){ // Executa a animação.

for( var i=0; i<=3; i++){
	heroi = andaEsquerda[i];
	/*if(i == 3){i=0;}*/
}

}
function animaRight(){ // Executa a animação.

for( var i=0; i<=3; i++){
	heroi = andaDireita[i];
	/*if(i == 3){i=0;}*/
}

}

// Pinta a tela.
function drawGame(){

context = game_area.getContext("2d");

// Faz a heroi se deslocar para as direções solicitadas.
if(up){ y -= 2; }
if(down){ y += 2; }
if(left){ x -= 2; }
if(right){ x += 2; }

// Colisões com as bordas do mapa. 
if(x <= 0){ x=0; }
if(y <= 0){ y=0; }
if(x >= 613){ x=613; }
if(y >= 608){ y=608; } // 613

// Funções especiais.
if(space){ document.getElementById("game_area").style.backgroundColor = "#0000FF" } // Só muda o fundo do canvas.
if(enter){x=larguraX/2-16; y=alturaY/2-16; document.getElementById("game_area").style.backgroundColor = "#00FF00";} // Centraliza personagem e devolve a cor original do canvas.
if(esc){ x=0; y=0; } // posiciona o personagem em X:0 e Y:0.

context.fillStyle = "#FF0000";  // Define a cor do texto.
context.clearRect(0, 0, larguraX, alturaY);

context.drawImage(heroi, x, y); // desenha a imagem.
context.fillText("X: " +String(x) +" Y: " +String(y), 15 ,15); // Imprime o texto.
}

document.addEventListener('keydown', KeyDown, 0);
document.addEventListener('keyup', KeyUp, 0);

setInterval(drawGame, 32);

</script>

</head>

<body id="corpo" style="background-color:#9955FF; margin:auto; position:relative;">
<canvas style="background-color:#00FF00; margin:0px; position:fixed;" id="game_area" width="640" height="640">Não suporta canvas</canvas>
<!--
<p>
<strong>SPACE:</strong> Muda o fundo do mapa.
<br>
<strong>ENTER:</strong> Posiciona no centro da imagem.
<br>
<strong>ESC:</strong> Zera o posicionamento do quadradinho.
</p>
-->
</body>

</html>

Não sei se tem como colocar um pacote com as imagens para download. Porém se for o caso eu coloco tudo em um link para download, são 12 imagens de 32X32px sendo 3 para cada lado do personagem.

Lembrando que esse é meu primeiro codigo trabalhando com eventos de teclado.

Desde ja, muito obrigado.

lpw · Janeiro 10, 2013

Gente, só para informar que esta resolvido o problema, caso mais alguem tem o mesmo problema, vou deixar o codigo como ficou:

O que acontece é que ele caia em um loop eterno e em JS da erro isso, eu não sabia. ;)

aqui vai o novo codigo:

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Movendo personagem</title>

<script type="text/javascript">

// DECLARAÇÃO DE VARIAVEIS.

// PALCO.
var context; // Monta o palco para o canvas.
var alturaY = 640; // Altura da tela.
var larguraX = 640; // Largura da tela.

// TECLAS.
var up; // tecla seta para cima.
var down; // tecla seta para baixo.
var left; // tecla seta para esquerda.
var right; // tecla seta para direita.
var space; // tecla de ESPAÇO.
var enter; // tecla ENTER.
var esc; // tecla ESC.

// POSIÇÃO INICIAL.
var y = alturaY/2-16; // Determina a posição inicial no eixo Y.
var x = larguraX/2-16; // Determina a posição inicial no eixo X.

// DESENHA NA TELA.
var heroi = new Image(); // Pega e monta a imagem. Este é o "Buffer".

// FRENTE
var heroiFrente = new Image();
heroiFrente.src = "hero/h1.png"; // Recebe a imagem do personagem de frente.

var heroiAndaFrente1 = new Image();
heroiAndaFrente1.src = "hero/h2.png"; // Recebe a imagem do personagem andando de frente 1.

var heroiAndaFrente2 = new Image();
heroiAndaFrente2.src = "hero/h3.png"; // Recebe a imagem do personagem andando de frente 2.

// COSTAS
var heroiCostas = new Image();
heroiCostas.src = "hero/h10.png"; // Recebe a imagem do personagem de costas.

var heroiAndaCostas1 = new Image();
heroiAndaCostas1.src = "hero/h11.png"; // Recebe a imagem do personagem andando de costas.

var heroiAndaCostas2 = new Image();
heroiAndaCostas2.src = "hero/h12.png"; // Recebe a imagem do personagem andando de costas.

// ESQUERDA
var heroiEsquerda = new Image();
heroiEsquerda.src = "hero/h4.png"; // Recebe a imagem do personagem do lado esquerdo.

var heroiAndaEsquerda1 = new Image();
heroiAndaEsquerda1.src = "hero/h5.png"; // Recebe a imagem do personagem andando esquerda 1.

var heroiAndaEsquerda2 = new Image();
heroiAndaEsquerda2.src = "hero/h6.png"; // Recebe a imagem do personagem andando esquerda 2.

// DIREITA
var heroiDireita = new Image();
heroiDireita.src = "hero/h7.png"; // Recebe a imagem do personagem do lado direito.

var heroiAndaDireita1 = new Image();
heroiAndaDireita1.src = "hero/h8.png"; // Recebe a imagem do personagem andando direito 1.

var heroiAndaDireita2 = new Image();
heroiAndaDireita2.src = "hero/h9.png"; // Recebe a imagem do personagem andando direito 2.

var andaFrente = new Array(); // Monta o array de imagens para andar para frente.
andaFrente[0] = heroiFrente;
andaFrente[1] = heroiAndaFrente1;
andaFrente[2] = heroiFrente;
andaFrente[3] = heroiAndaFrente2;

var andaCostas = new Array(); // Monta o array de imagens para andar para tras.
andaCostas[0] = heroiCostas;
andaCostas[1] = heroiAndaCostas1;
andaCostas[2] = heroiCostas;
andaCostas[3] = heroiAndaCostas2;

var andaEsquerda = new Array(); // Monta o array de imagens para andar para a esquerda.
andaEsquerda[0] = heroiEsquerda;
andaEsquerda[1] = heroiAndaEsquerda1;
andaEsquerda[2] = heroiEsquerda;
andaEsquerda[3] = heroiAndaEsquerda2;

var andaDireita = new Array(); // Monta o array de imagens para andar para a direita.
andaDireita[0] = heroiDireita;
andaDireita[1] = heroiAndaDireita1;
andaDireita[2] = heroiDireita;
andaDireita[3] = heroiAndaDireita2;

var andaUmFrente = 0; // Variaveis para fazer animação
var andaUmCostas = 0;
var andaUmEsquerda= 0;
var andaUmDireita = 0;

heroi = heroiFrente; // Faz o Buffer receber o valor inicial da imagem.

// Faz variavel ficar com valor TRUE.
function KeyDown(e){ // Verifica se alguma das teclas foi pressionada.

if(e.keyCode == 38){ up = 1; }
if(e.keyCode == 40){ down = 1; }
if(e.keyCode == 37){ left = 1; }
if(e.keyCode == 39){ right = 1; }

if(e.keyCode == 32){ space = 1; }
if(e.keyCode == 13){ enter = 1; }
if(e.keyCode == 27){ esc = 1; }
}

// Faz variavel ficar com valor FALSE.
function KeyUp(e){ // Verifica se alguma das teclas foi liberada.

if(e.keyCode == 38){ up = 0; heroi = heroiCostas; }
if(e.keyCode == 40){ down = 0; heroi = heroiFrente; }
if(e.keyCode == 37){ left = 0; heroi = heroiEsquerda; }
if(e.keyCode == 39){ right = 0; heroi = heroiDireita; }

if(e.keyCode == 32){ space = 0; }
if(e.keyCode == 13){ enter = 0; }
if(e.keyCode == 27){ esc = 0; }
}

function animaUp(){ // Executa a animação.

	heroi = andaCostas[andaUmCostas];
	andaUmCostas++;
	if(andaUmCostas == andaCostas.length){ andaUmCostas = 0; }
}

function animaDown(){ // Executa a animação.

	heroi = andaFrente[andaUmFrente];
	andaUmFrente++;
	if(andaUmFrente == andaFrente.length){ andaUmFrente=0; }
}
function animaLeft(){ // Executa a animação.

	heroi = andaEsquerda[andaUmEsquerda];
	andaUmEsquerda++;
	if(andaUmEsquerda == andaEsquerda.length){ andaUmEsquerda = 0; }
}
function animaRight(){ // Executa a animação.

	heroi = andaDireita[andaUmDireita];
	andaUmDireita++;
	if(andaUmDireita == andaDireita.length){ andaUmDireita = 0; }
}

// Pinta a tela.
function drawGame(){

context = game_area.getContext("2d");

// Faz a heroi se deslocar para as direções solicitadas.
if(up){ animaUp(); y -= 3; }
if(down){ animaDown(); y += 3; }
if(left){ animaLeft(); x -= 3; }
if(right){ animaRight(); x += 3; }

// Colisões com as bordas do mapa. 
if(x <= 0){ x=0; }
if(y <= 0){ y=0; }
if(x >= 613){ x=613; }
if(y >= 608){ y=608; } // 613

// Funções especiais.
if(space){ document.getElementById("game_area").style.backgroundColor = "#0000FF" } // Só muda o fundo do canvas.
if(enter){x=larguraX/2-16; y=alturaY/2-16; document.getElementById("game_area").style.backgroundColor = "#00FF00";} // Centraliza personagem e devolve a cor original do canvas.
if(esc){ x=0; y=0; } // posiciona o personagem em X:0 e Y:0.

context.fillStyle = "#FF0000";  // Define a cor do texto.
context.clearRect(0, 0, larguraX, alturaY);

context.drawImage(heroi, x, y); // desenha a imagem.
context.fillText("X: " +String(x) +" Y: " +String(y), 15 ,15); // Imprime o texto.
}

document.addEventListener('keydown', KeyDown, 0);
document.addEventListener('keyup', KeyUp, 0);

setInterval(drawGame, 64);

</script>

</head>

<body id="corpo" style="background-color:#9955FF; margin:auto; position:relative;">
<canvas style="background-color:#00FF00; margin:0px; position:fixed;" id="game_area" width="640" height="640">Não suporta canvas</canvas>
<!--
<p>
<strong>SPACE:</strong> Muda o fundo do mapa.
<br>
<strong>ENTER:</strong> Posiciona no centro da imagem.
<br>
<strong>ESC:</strong> Zera o posicionamento do quadradinho.
</p>
-->
</body>

</html>

Obrigado.

P.S.: Moderadores podem fechar que esta solucionada a duvida, desculpem pelo double post =/

Entrar

Arquivado

[Resolvido] JavaScript array com imagens

Recommended Posts

lpw 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

lpw 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP+Codeginiter - Orientação para Impressão

Ajuda com Extends e envio para o banco

Fixar div até atingir uma certa altura

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante