Hola comunidad de StackOverflow,
El problema es que no me deja crear el objeto dianaIzq
, ya que me dice que no encuentra la imagen. El segundo parámetro que recibe el constructor que crea el objeto es la URL.
Para armar la URL combino strings
y una variable, que necesito que del tipo string
. Esto es para poder ir cambiando la URL de la imagen.
Lo que no entiendo es por qué no puedo hacer esta combinación de strings y variable.
Muchas Gracias por su ayuda, aquí está el código:
Html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DAIGHT</title>
<script type="text/javascript" src="DAIGHT.js"></script>
</head>
<body>
<canvas width="600" height="600" id="c"></canvas>
<script type="text/javascript">
inicio();
</script>
</body>
</html>
Javascript:
var posDiana;
var Imagen = function(canvas, url, x, y) {
this.canvas = canvas;
this.pos = {x, y};
this.crearImagen(url);
}
Imagen.prototype.crearImagen = function(url) {
var self = this;
this.imagen = new Image();
this.imagen.onload = function() {
self.dibujar();
};
this.imagen.src = url;
}
Imagen.prototype.dibujar = function() {
this.canvas.drawImage(this.imagen, this.pos.x, this.pos.y);
}
var teclas = [37, 38, 39, 40];
function inicio() {
var canvas = document.getElementById("c").getContext("2d");
var dinosaur = new Imagen(canvas, "Dinosaur.png", 400, 400);
document.addEventListener("keydown", teclado);
var dianaIzq = new Imagen(canvas, "diana-" + posDiana + ".png", 200, 200);
}
function teclado(lol)
{
var tecla = lol.keyCode;
//Flecha Izquierda
if (tecla == teclas[0])
{
posDiana = "izq";
}
}