Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Captura

    Cargado por

    Adolfo Cantillo Gomez
    16 vistas3 páginas
    Documento de html defuncionesy conseptos

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    Documento de html defuncionesy conseptos

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    16 vistas3 páginas

    Captura

    Cargado por

    Adolfo Cantillo Gomez
    Documento de html defuncionesy conseptos

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 3

    Estuvo excelente tu código y le realice algunas modificaciones para hacerlo más óptimo:

     Corregí el método de dibujar() para el lobo ya que no es necesario enviarle parámetros


    ya que la función no las tiene. Ya con el hecho de que las variables xLobo y yLobo son
    globales, no necesitan enviarse por parámetro.
     Cree unas condiciones para que el lobo no se salga del canvas.
     Definí afuera la forma de calcular la cantidad de vacas, pollos y cerdos a dibujar. Ya
    que si lo dejas dentro mantenerPosicion(), cada vez que se llame, se calculará este valor.
     Se debe guardar la imagen del lobo en PNG y colocarle transparencia. Su medidas
    son 50x50.

    HTML LOBO
    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Villa
    Platzi</title> <link rel="stylesheet" href="style.css"> </head> <body>
    <h1>Villa Platzi</h1> <canvas id="villa_platzi" width="500"
    height="500"></canvas> <script src="villaPlatziLobo.js"></script>
    </body> </html>

    HTML DEL SCRITP


    var vp = document.getElementById('villa_platzi'); var papel =
    vp.getContext('2d'); var ruta = "img/";
    document.addEventListener("keydown", moverLobo); var lobo = { url:
    ruta + "lobo.png", cargaOK: false }; var xLobo = 0; var yLobo = 0; var
    fondo = { url: ruta + "tile.png", cargaOK: false } var vaca = { url:
    ruta + "vaca.png", cargaOK: false }; var xVaca = new Array(); var
    yVaca = new Array(); var pollo = { url: ruta + "pollo.png", cargaOK:
    false }; var xPollo = new Array(); var yPollo = new Array(); var cerdo
    = { url: ruta + "cerdo.png", cargaOK: false }; var xCerdo = new
    Array(); var yCerdo = new Array(); fondo.imagen = new Image();
    fondo.imagen.src = fondo.url; fondo.imagen.addEventListener("load",
    cargarFondo); vaca.imagen = new Image(); vaca.imagen.src = vaca.url;
    vaca.imagen.addEventListener("load", cargarVaca); pollo.imagen = new
    Image(); pollo.imagen.src = pollo.url;
    pollo.imagen.addEventListener("load", cargarPollo); cerdo.imagen = new
    Image(); cerdo.imagen.src = cerdo.url;
    cerdo.imagen.addEventListener("load", cargarCerdo); lobo.imagen = new
    Image(); lobo.imagen.src = lobo.url;
    lobo.imagen.addEventListener("load", cargarLobo); var cantidad_vacas =
    aleatorio(0, 5); var cantidad_pollos = aleatorio(0, 5); var
    cantidad_cerdos = aleatorio(0, 5); console.log("Cantidad de Vacas: " +
    cantidad_vacas); console.log("Cantidad de Pollos: " +
    cantidad_pollos); console.log("Cantidad de Cerdos: " +
    cantidad_cerdos); function moverLobo(evento) { var movimiento = 50;
    var teclas = { UP: 38, DOWN: 40, LEFT: 37, RIGHT: 39 }; switch
    (evento.keyCode) { case teclas.UP: if (yLobo > 0) { yLobo = yLobo -
    movimiento; dibujar(); } break; case teclas.DOWN: if (yLobo < 450)
    { yLobo = yLobo + movimiento; dibujar(); } break; case teclas.LEFT: if
    (xLobo > 0) { xLobo = xLobo - movimiento; dibujar(); } break; case
    teclas.RIGHT: if(xLobo < 450) { xLobo = xLobo + movimiento; dibujar();
    } break; default: console.log("Otra tecla : " + evento.key);
    break; } } function cargarFondo() { fondo.cargaOK = true; dibujar(); }
    function cargarVaca() { vaca.cargaOK = true; mantenerPosicion(); }
    function cargarPollo() { pollo.cargaOK = true; mantenerPosicion(); }
    function cargarCerdo() { cerdo.cargaOK = true; mantenerPosicion(); }
    function cargarLobo() { lobo.cargaOK = true; dibujar(); } function
    mantenerPosicion() { if (vaca.cargaOK) { for (var i = 0; i <
    cantidad_vacas; i++) { var x = aleatorio(0, 6); var y = aleatorio(0,
    6); var x = x * 70; var y = y * 70; xVaca[i] = x; yVaca[i] = y; } } if
    (pollo.cargaOK) { for (var i = 0; i < cantidad_pollos; i++) { var x =
    aleatorio(0, 6); var y = aleatorio(0, 6); var x = x * 70; var y = y *
    70; xPollo[i] = x; yPollo[i] = y; } } if (cerdo.cargaOK) { for (var i
    = 0; i < cantidad_cerdos; i++) { var x = aleatorio(0, 6); var y =
    aleatorio(0, 6); var x = x * 70; var y = y * 70; xCerdo[i] = x;
    yCerdo[i] = y; } } dibujar(); } function dibujar() { if
    (fondo.cargaOK) { papel.drawImage(fondo.imagen, 0, 0); } if
    (vaca.cargaOK) { for (var i = 0; i < cantidad_vacas; i++)
    { papel.drawImage(vaca.imagen, xVaca[i], yVaca[i]); } } if
    (pollo.cargaOK) { for (var i = 0; i < cantidad_pollos; i++)
    { papel.drawImage(pollo.imagen, xPollo[i], yPollo[i]); } } if
    (cerdo.cargaOK) { for (var i = 0; i < cantidad_cerdos; i++)
    { papel.drawImage(cerdo.imagen, xCerdo[i], yCerdo[i]); } } if
    (lobo.cargaOK) { papel.drawImage(lobo.imagen, xLobo, yLobo); } }
    function aleatorio(min, max) { var resultado; resultado =
    Math.floor(Math.random() * (max - min + 1)) + min; return resultado;

    js
    var vp = document.getElementById('villa_platzi'); var papel =
    vp.getContext('2d'); var ruta = "img/";
    document.addEventListener("keydown", moverLobo); var lobo = { url:
    ruta + "lobo.png", cargaOK: false }; var xLobo = 0; var yLobo = 0; var
    fondo = { url: ruta + "tile.png", cargaOK: false } var vaca = { url:
    ruta + "vaca.png", cargaOK: false }; var xVaca = new Array(); var
    yVaca = new Array(); var pollo = { url: ruta + "pollo.png", cargaOK:
    false }; var xPollo = new Array(); var yPollo = new Array(); var cerdo
    = { url: ruta + "cerdo.png", cargaOK: false }; var xCerdo = new
    Array(); var yCerdo = new Array(); fondo.imagen = new Image();
    fondo.imagen.src = fondo.url; fondo.imagen.addEventListener("load",
    cargarFondo); vaca.imagen = new Image(); vaca.imagen.src = vaca.url;
    vaca.imagen.addEventListener("load", cargarVaca); pollo.imagen = new
    Image(); pollo.imagen.src = pollo.url;
    pollo.imagen.addEventListener("load", cargarPollo); cerdo.imagen = new
    Image(); cerdo.imagen.src = cerdo.url;
    cerdo.imagen.addEventListener("load", cargarCerdo); lobo.imagen = new
    Image(); lobo.imagen.src = lobo.url;
    lobo.imagen.addEventListener("load", cargarLobo); var cantidad_vacas =
    aleatorio(0, 5); var cantidad_pollos = aleatorio(0, 5); var
    cantidad_cerdos = aleatorio(0, 5); console.log("Cantidad de Vacas: " +
    cantidad_vacas); console.log("Cantidad de Pollos: " +
    cantidad_pollos); console.log("Cantidad de Cerdos: " +
    cantidad_cerdos); function moverLobo(evento) { var movimiento = 50;
    var teclas = { UP: 38, DOWN: 40, LEFT: 37, RIGHT: 39 }; switch
    (evento.keyCode) { case teclas.UP: if (yLobo > 0) { yLobo = yLobo -
    movimiento; dibujar(); } break; case teclas.DOWN: if (yLobo < 450)
    { yLobo = yLobo + movimiento; dibujar(); } break; case teclas.LEFT: if
    (xLobo > 0) { xLobo = xLobo - movimiento; dibujar(); } break; case
    teclas.RIGHT: if(xLobo < 450) { xLobo = xLobo + movimiento; dibujar();
    } break; default: console.log("Otra tecla : " + evento.key);
    break; } } function cargarFondo() { fondo.cargaOK = true; dibujar(); }
    function cargarVaca() { vaca.cargaOK = true; mantenerPosicion(); }
    function cargarPollo() { pollo.cargaOK = true; mantenerPosicion(); }
    function cargarCerdo() { cerdo.cargaOK = true; mantenerPosicion(); }
    function cargarLobo() { lobo.cargaOK = true; dibujar(); } function
    mantenerPosicion() { if (vaca.cargaOK) { for (var i = 0; i <
    cantidad_vacas; i++) { var x = aleatorio(0, 6); var y = aleatorio(0,
    6); var x = x * 70; var y = y * 70; xVaca[i] = x; yVaca[i] = y; } } if
    (pollo.cargaOK) { for (var i = 0; i < cantidad_pollos; i++) { var x =
    aleatorio(0, 6); var y = aleatorio(0, 6); var x = x * 70; var y = y *
    70; xPollo[i] = x; yPollo[i] = y; } } if (cerdo.cargaOK) { for (var i
    = 0; i < cantidad_cerdos; i++) { var x = aleatorio(0, 6); var y =
    aleatorio(0, 6); var x = x * 70; var y = y * 70; xCerdo[i] = x;
    yCerdo[i] = y; } } dibujar(); } function dibujar() { if
    (fondo.cargaOK) { papel.drawImage(fondo.imagen, 0, 0); } if
    (vaca.cargaOK) { for (var i = 0; i < cantidad_vacas; i++)
    { papel.drawImage(vaca.imagen, xVaca[i], yVaca[i]); } } if
    (pollo.cargaOK) { for (var i = 0; i < cantidad_pollos; i++)
    { papel.drawImage(pollo.imagen, xPollo[i], yPollo[i]); } } if
    (cerdo.cargaOK) { for (var i = 0; i < cantidad_cerdos; i++)
    { papel.drawImage(cerdo.imagen, xCerdo[i], yCerdo[i]); } } if
    (lobo.cargaOK) { papel.drawImage(lobo.imagen, xLobo, yLobo); } }
    function aleatorio(min, max) { var resultado; resultado =
    Math.floor(Math.random() * (max - min + 1)) + min; return resultado; }

    También podría gustarte