teclado.js -> já feito
animacao.js -> já feito
teclado_teste_3
<!DOCTYPE html>
<html>
<head>
<title>Um heroi que atira</title>
<script src="teclado.js"></script>
<script src="heroi.js"></script>
<script src="bola.js"></script>
<script src="animacao.js"></script>
</head>
<body>
<canvas id="canvas_teclado_3" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('canvas_teclado_3');
var context = canvas.getContext('2d');
var teclado = new Teclado(document);
var animacao = new Animacao(context);
// Um sprite pode ler o teclado para saber como se comportar, por que não?
var heroi = new Heroi(context, teclado, animacao);
heroi.x = 0;
heroi.y = 100;
animacao.novoSprite(heroi);
teclado.disparou(ESPACO, function() {
heroi.atirar();
});
animacao.ligar();
</script>
</body>
</html>
-------------------------------------------------------------------------------------------------------
bola.js
function Bola(context) {
this.context = context;
this.x = 0;
this.y = 0;
this.velocidadeX = 0;
this.velocidadeY = 0;
// Atributos de desenho padrão
this.cor = 'black';
this.raio = 10;
}
Bola.prototype = {
atualizar: function() {
var ctx = this.context;
this.x += this.velocidadeX;
this.y += this.velocidadeY;
},
desenhar: function() {
var ctx = this.context;
// Guardar configurações atuais do contexto
ctx.save();
// Configurar o contexto de acordo com a bola
ctx.fillStyle = this.cor;
// Desenhar
ctx.beginPath();
ctx.arc(this.x, this.y, this.raio, 0, 2 * Math.PI, false);
ctx.fill();
// Voltar às configurações anteriores
ctx.restore();
}
}
----------------------------------------------------------------------------------
heroi.js
// Códigos únicos para as direções
var DIRECAO_ESQUERDA = 1;
var DIRECAO_DIREITA = 2;
function Heroi(context, teclado, animacao) {
this.context = context;
this.teclado = teclado;
this.animacao = animacao;
this.x = 0;
this.y = 0;
this.direcao = DIRECAO_DIREITA;
}
Heroi.prototype = {
atualizar: function() {
if (this.teclado.pressionada(SETA_ESQUERDA) && this.x > 0) {
this.direcao = DIRECAO_ESQUERDA;
this.x -= 10;
}
else if (this.teclado.pressionada(SETA_DIREITA) &&
this.x < this.context.canvas.width - 20) {
this.direcao = DIRECAO_DIREITA;
this.x += 10;
}
},
desenhar: function() {
this.context.fillRect(this.x, this.y, 20, 50);
},
atirar: function() {
var tiro = new Bola(this.context);
tiro.x = this.x + 10;
tiro.y = this.y + 10;
tiro.raio = 10;
tiro.cor = 'red';
// Lendo a direção atual
if (this.direcao == DIRECAO_ESQUERDA)
tiro.velocidadeX = -20;
else
tiro.velocidadeX = 20;
this.animacao.novoSprite(tiro);
}
}
// Códigos únicos para as direções
var DIRECAO_ESQUERDA = 1;
var DIRECAO_DIREITA = 2;
function Heroi(context, teclado, animacao) {
this.context = context;
this.teclado = teclado;
this.animacao = animacao;
this.x = 0;
this.y = 0;
this.direcao = DIRECAO_DIREITA;
}
Heroi.prototype = {
atualizar: function() {
if (this.teclado.pressionada(SETA_ESQUERDA) && this.x > 0) {
this.direcao = DIRECAO_ESQUERDA;
this.x -= 10;
}
else if (this.teclado.pressionada(SETA_DIREITA) &&
this.x < this.context.canvas.width - 20) {
this.direcao = DIRECAO_DIREITA;
this.x += 10;
}
},
desenhar: function() {
this.context.fillRect(this.x, this.y, 20, 50);
},
atirar: function() {
var tiro = new Bola(this.context);
tiro.x = this.x + 10;
tiro.y = this.y + 10;
tiro.raio = 10;
tiro.cor = 'red';
// Lendo a direção atual
if (this.direcao == DIRECAO_ESQUERDA)
tiro.velocidadeX = -20;
else
tiro.velocidadeX = 20;
this.animacao.novoSprite(tiro);
}
}
Nenhum comentário:
Postar um comentário