Roberto Perez
Preguntastudent•hace 6 años
Tengo un error en la linea 100 pero no entiendo el problema. Les comparto el codigo de estudio…
<code> <html> <head> <meta charset="utf-8"> <title>Dibujando con las flechas con Mouse</title> </head> <body> <canvas width="500" height="500" id="villaplatzi"></canvas> <script> //eventos.js //Probando la funcion aletoria y la formula var z; // solita la variable var min; var max; /* apagamos la formula matematica variable for(var i = 0; i < 10; i++) { //va sin coma al final z = aleatorio(10, 20);// se declara adentro para que vuelva a llamar la interaccion document.write(z + ", "); // se suma interracion de estring para separar los numeros } document.write(z); */ // Crea el canvas y el mapa // cargando imagenes con js var vp = document.getElementById("villaplatzi"); var papel = vp.getContext("2d"); //var mapa = "Villaplatzi/villa.png"; // llamando la imagen de la villa /* // creando un objeto en js //Instancia de la clase Nueva definicion de objeto Esto es la Clase Image var fondo = new Image(); //definicion de objeto // Se carga la imagen con un evento loading //Cargando la fuente de la imagen atravez de un objeto y llamando la imagen con src fondo.src = mapa; // escuchar el evento de carga de la imagen fondo.addEventListener("load", dibujarFondo); //Aca es donde se los elementos de la imagen Escribir los elementos de la villa var vaca = new Image(); vaca.src = "Villaplatzi/vaca.png"; // llamandon la imagen de la vaca // dibujando la vaca vaca.addEventListener("load", dibujarVacas); var cerdo = new Image(); cerdo.src = "Villaplatzi/cerdo.png"; // dibujando la Cerdo cerdo.addEventListener("load", dibujarCerdos); // dibujando la Pollo var pollo = new Image(); //objeto del pollo pollo.src = "Villaplatzi/pollo.png"; pollo.addEventListener("load", dibujarPollos); Una manera de llamar los dibujos con problemas de cargar el fondo y los otros elementos No hay orden logico*/ var fondo = { //Objeto literal con sintaxis de Json url: "Villaplatzi/fondo.png", cargaOK: false }; var vaca = { //Objeto literal con sintaxis de Json url: "Villaplatzi/vaca.png", cargaOK: false }; var cerdo = { //Objeto literal con sintaxis de Json url: "Villaplatzi/cerdo.png", cargaOK: false }; var pollo = { //Objeto literal con sintaxis de Json url: "Villaplatzi/pollo.png", cargaOK: false }; //Creando otra funcion que identifica que se carge primero la villa //var fondo.imagen = new Image(); //definicion de objeto "new Image". genera error porque ya no es una variable sino un atributo fondo.imagen = new Image(); //fondo.imagen.src = mapa; //llamando el fondo con variable fondo.imagen.crcr = fondo.url; fondo.imagen.addEventListener("load", cargarFondo); vaca.objeto = new Image(); vaca.objeto.src = vaca.url; // llamandon la imagen de la vaca // dibujando la vaca vaca.addEventListener("load", cargarVacas); var cerdo = new Image(); cerdo.src = cerdo.url; // dibujando la Cerdo cerdo.addEventListener("load", cargarCerdos); // dibujando la Pollo var pollo = new Image(); //objeto del pollo pollo.src = pollo.url; pollo.addEventListener("load", cargarPollos); /* Aca es donde se dibuja pero no respeta el orden de aca para dibujar los elementos, oara dibujar el canvas function dibujarFondo(){ //dibujamos el fondo papel.drawImage(fondo, 0,0); //dibujar una imagen completa de 500px } function dibujarVacas(){ //dibujamos el vaca papel.drawImage(vaca, 10,10); //dibujar una imagen completa de 500px } function dibujarCerdos(){ //dibujamos el cerdo papel.drawImage(cerdo, 10,300); //dibujar una imagen completa de 500px } function dibujarPollos(){ //dibujamos el Pollo papel.drawImage(pollo, 300,150); //dibujar una imagen completa de 500px } */ // Otra manera de llamar en function los dibujos function cargarFondo(){ fondo.cargaOK = true; // para que siga disparando el codigo y no se pare //invocando la funcion dibujar dibujar(); //aca es cuando se dibuja } function cargarVacas(){ vaca.cargaOK = true; // para que siga disparando el codigo y no se pare dibujar(); //aca es cuando se dibuja } function cargarCerdos(){ cerdo.cargaOK = true; // para que siga disparando el codigo y no se pare dibujar(); //aca es cuando se dibuja } function cargarPollos(){ pollo.cargaOK = true; // para que siga disparando el codigo y no se pare dibujar(); //aca es cuando se dibuja } function dibujar(){ if(fondo.cargaOK == true){ // si fondo carga ok es verdadero papel.drawImage(fondo.imagen, 0,0); //dibujar una imagen completa de 500px en el canvas //cuidado con los objetos literales }if(vaca.cargaOK == true){ // si fondo carga ok es verdadero papel.drawImage(vaca.imagen, 100,100); //dibujar una imagen completa de 500px en el canvas //cuidado con los objetos literales } } function aleatorio(min, max){ // problema pequeño de numeros aleatorios var resultado; resultado = Math.floor(Math.random()*(max - min + 1)) + min; return resultado; // de vuelve el valor que la funcion matematica brinda } </script> </body> </html>
Daniel Alejandro Valero Salazar
student•hace 6 años
Hola Tiene el siguiente error:
//Deben ir con espacio, en todas están igual function cargarFondo(){} functioncargarFondo(){} ... //vaca debe llevar objeto vaca.objeto.addEventListener("load", cargarVacas); ... //Recuerde q' el nombre de la imagen de fondo es tile.png //Acá esta como "objeto" , pero cuando va a la función dibujar debe estar como objeto y esta como imagen vaca.objeto = new Image(); vaca.objeto.src = vaca.url; // llamandon la imagen de la vaca // dibujando la vaca vaca.objeto.addEventListener("load", cargarVacas); if(vaca.cargaOK == true){ // si fondo carga ok es verdadero papel.drawImage(vaca.objeto, 100,100); //dibujar una imagen completa de 500px en el canvas //cuidado con los objetos literales } ... //la ruta es src no crct fondo.imagen.crcr = fondo.url;
Con esto ya funciona!, igual le dejo el código corregido donde ya se muestra el fondo y la imagen, recuerda q' debe cambiar Villa Platzi por la ruta de las imagenes; adicional le sugiero utilizar dos archivos diferentes .html y .js
<html> <head> <metacharset="utf-8"> <title>Dibujando con las flechas con Mouse</title> </head> <body> <canvas width="500"height="500" id="villaplatzi"></canvas> <script>//eventos.js //Probando la funcion aletoria y la formula var z; // solita la variable var min; var max; /* apagamos la formula matematica variable for(var i = 0; i < 10; i++) { //va sin coma al final z = aleatorio(10, 20);// se declara adentro para que vuelva a llamar la interaccion document.write(z + ", "); // se suma interracion de estring para separar los numeros } document.write(z); */ // Crea el canvas y el mapa // cargando imagenes con js var vp = document.getElementById("villaplatzi"); var papel = vp.getContext("2d"); var mapa = "tile.png"; // llamando la imagen de la villa /* // creando un objeto en js //Instancia de la clase Nueva definicion de objeto Esto es la Clase Image var fondo = new Image(); //definicion de objeto // Se carga la imagen con un evento loading //Cargando la fuente de la imagen atravez de un objeto y llamando la imagen con src fondo.src = mapa; // escuchar el evento de carga de la imagen fondo.addEventListener("load", dibujarFondo); //Aca es donde se los elementos de la imagen Escribir los elementos de la villa var vaca = new Image(); vaca.src = "Villaplatzi/vaca.png"; // llamandon la imagen de la vaca // dibujando la vaca vaca.addEventListener("load", dibujarVacas); var cerdo = new Image(); cerdo.src = "Villaplatzi/cerdo.png"; // dibujando la Cerdo cerdo.addEventListener("load", dibujarCerdos); // dibujando la Pollo var pollo = new Image(); //objeto del pollo pollo.src = "Villaplatzi/pollo.png"; pollo.addEventListener("load", dibujarPollos); Una manera de llamar los dibujos con problemas de cargar el fondo y los otros elementos No hay orden logico*/ var fondo = { //Objeto literal con sintaxis de Json url: "Villa Platzi/tile.png", cargaOK: false }; var vaca = { //Objeto literal con sintaxis de Json url: "Villa Platzi/vaca.png", cargaOK: false }; var cerdo = { //Objeto literal con sintaxis de Json url: "Villa Platzi/cerdo.png", cargaOK: false }; var pollo = { //Objeto literal con sintaxis de Json url: "Villa Platzi/pollo.png", cargaOK: false }; //Creando otra funcion que identifica que se carge primero la villa //var fondo.imagen = new Image(); //definicion de objeto "new Image". genera error porque ya no es una variable sino un atributo fondo.imagen = new Image(); //fondo.imagen.src = mapa; //llamando el fondo con variable fondo.imagen.src = fondo.url; fondo.imagen.addEventListener("load", cargarFondo); vaca.objeto = new Image(); vaca.objeto.src = vaca.url; // llamandon la imagen de la vaca // dibujando la vaca vaca.objeto.addEventListener("load", cargarVacas); var cerdo = new Image(); cerdo.src = cerdo.url; // dibujando la Cerdo cerdo.addEventListener("load", cargarCerdos); // dibujando la Pollo var pollo = new Image(); //objeto del pollo pollo.src = pollo.url; pollo.addEventListener("load", cargarPollos); /* Aca es donde se dibuja pero no respeta el orden de aca para dibujar los elementos, oara dibujar el canvas function dibujarFondo(){ //dibujamos el fondo papel.drawImage(fondo, 0,0); //dibujar una imagen completa de 500px } function dibujarVacas(){ //dibujamos el vaca papel.drawImage(vaca, 10,10); //dibujar una imagen completa de 500px } function dibujarCerdos(){ //dibujamos el cerdo papel.drawImage(cerdo, 10,300); //dibujar una imagen completa de 500px } function dibujarPollos(){ //dibujamos el Pollo papel.drawImage(pollo, 300,150); //dibujar una imagen completa de 500px } */ // Otra manera de llamar en function los dibujos function cargarFondo(){ fondo.cargaOK = true; // para que siga disparando el codigo y no se pare //invocando la funcion dibujar dibujar(); //aca es cuando se dibuja } function cargarVacas(){ vaca.cargaOK = true; // para que siga disparando el codigo y no se pare dibujar(); //aca es cuando se dibuja } function cargarCerdos(){ cerdo.cargaOK = true; // para que siga disparando el codigo y no se pare dibujar(); //aca es cuando se dibuja } function cargarPollos(){ pollo.cargaOK = true; // para que siga disparando el codigo y no se pare dibujar(); //aca es cuando se dibuja } function dibujar(){ if(fondo.cargaOK == true){ // si fondo carga ok es verdadero papel.drawImage(fondo.imagen, 0,0); //dibujar una imagen completa de 500px en el canvas //cuidado con los objetos literales }if(vaca.cargaOK == true){ // si fondo carga ok es verdadero papel.drawImage(vaca.objeto, 100,100); //dibujar una imagen completa de 500px en el canvas //cuidado con los objetos literales } } function aleatorio(min, max){ // problema pequeño de numeros aleatorios var resultado; resultado = Math.floor(Math.random()*(max - min + 1)) + min; return resultado; // de vuelve el valor que la funcion matematica brinda } </script> </body> </html>
Slds,
