Dibujo de múltiples imágenes en canvas

Clase 24 de 50 • Curso de Programación Básica 2014

Evert Díaz Buitrón

student•

Les comparto este código con evasión de los obstáculos, lienzo centrado y un castillo de meta :)

var flag = true;  
var tablero;  
var fondo = {  
    imagenURL: "img/fondo.png",  
    imagenOK: false  
};  
var tifis = {  
    x: 0,  
    y: 0,  
    frenteURL: "img/diana-frente.png",  
    frenteOK: false,  
    detrasURL: "img/diana-atras.png",  
    detrasOK: false,  
    derechaURL: "img/diana-der.png",  
    derechaOK: false,  
    izquierdaURL: "img/diana-izq.png",  
    izquierdaOK: false  
};  
var puerta = {  
    puertaURL: "http://g02.a.alicdn.com/kf/HTB16viDIXXXXXcNXpXXq6xXFXXXv/Caliente-venta-saltando-castillo-inflable-casa-de-la-despedida-castillo-hinchable-con-piscina-de-bolas.jpg_50x50.jpg",  
    puertaOK: false  
};  
function inicio(){  
     var canvas = document.getElementById("campo");  
     tablero = canvas.getContext("2d");  
     fondo.imagen = new Image();  
     fondo.imagen.src = fondo.imagenURL;  
     fondo.imagen.onload = confirmarFondo;  
     puerta.imagen = new Image();  
     puerta.imagen.src = puerta.puertaURL;  
     puerta.imagen.onload = confirmarPuerta;  
       
  
     tifis.frente = new Image();  
     tifis.frente.src = tifis.frenteURL;  
     tifis.frente.onload = confirmarTifis;  
  
     tifis.detras = new Image();  
     tifis.detras.src = tifis.detrasURL;  
  
     tifis.izquierda = new Image();  
     tifis.izquierda.src = tifis.izquierdaURL;  
  
     tifis.derecha = new Image();  
     tifis.derecha.src = tifis.derechaURL;  
  
     var mUp = document.getElementById("up");  
     mUp.addEventListener("click",moveUp);  
     var mDown = document.getElementById("down");  
     mDown.addEventListener("click",moveDown);  
     var mLeft = document.getElementById("left");  
     mLeft.addEventListener("click",moveLeft);  
     var mRight = document.getElementById("right");  
     mRight.addEventListener("click",moveRight);  
}  
  
function obstaculos(x,y){  
    //Obstaculo superior  
    var z;  
    if(x == 200){  
        for(z=0;z<=200;z+=50){  
            if (y==z) {  
                flag= false;  
                break;  
            }  
        }      
    }  
      
    //Obstaculo Izquierdo  
    if(y == 200){  
        for(z=0;z<=100;z+=50){  
            if (x==z) {  
                flag= false;  
            }  
        }      
    }  
    //Obstaculo Inferior  
    if(y == 350){  
        for(z=150;z<=450;z+=50){  
            if (x==z) {  
                flag= false;  
            }  
        }      
    }  
}  
function moveUp(){  
    flag = true;  
    if(tifis.y>=50){  
          
        obstaculos(tifis.x,tifis.y-50);  
        if (flag){  
            tifis.y-=50;  
            tifis.frenteOK = false;  
            tifis.detrasOK = true;  
            tifis.izquierdaOK = false;  
            tifis.derechaOK = false;  
            dibujar();      
        }  
    }      
}  
function moveDown(){  
    flag = true;  
    if(tifis.y<=400){  
        obstaculos(tifis.x,tifis.y+50);  
        if (flag){  
            tifis.y+=50;  
            tifis.frenteOK = true;  
            tifis.detrasOK = false;  
            tifis.izquierdaOK = false;  
            tifis.derechaOK = false;  
            dibujar();  
        }  
    }      
}  
function moveLeft(){  
    flag = true;  
    if(tifis.x>=50){  
        obstaculos(tifis.x-50,tifis.y);  
        if (flag){  
            tifis.x-=50;  
        tifis.frenteOK = false;  
        tifis.detrasOK = false;  
        tifis.izquierdaOK = true;  
        tifis.derechaOK = false;  
        dibujar();      
        }  
          
    }      
}  
function moveRight(){  
    flag = true;  
    if(tifis.x<=400){  
        obstaculos(tifis.x+50,tifis.y);  
        if (flag){  
            tifis.x+=50;  
        tifis.frenteOK = false;  
        tifis.detrasOK = false;  
        tifis.izquierdaOK = false;  
        tifis.derechaOK = true;  
        dibujar();  
        }  
              
    }      
}  
  
  
function confirmarTifis(){  
    tifis.frenteOK = true;  
    dibujar();  
}  
  
  
  
function confirmarFondo(){  
    fondo.imagenOK = true;  
    dibujar();  
}  
function confirmarPuerta(){  
    puerta.puertaOK = true;  
    dibujar();  
}  
  
function dibujar(){  
    if (fondo.imagenOK == true) {  
        tablero.drawImage(fondo.imagen,0,0);  
    }  
    if (puerta.puertaOK == true) {  
        tablero.drawImage(puerta.imagen,450,450);  
    }  
    if (tifis.frenteOK == true) {  
        tablero.drawImage(tifis.frente,tifis.x,tifis.y);  
    }  
    if (tifis.detrasOK == true) {  
        tablero.drawImage(tifis.detras,tifis.x,tifis.y);  
    }  
    if (tifis.izquierdaOK == true) {  
        tablero.drawImage(tifis.izquierda,tifis.x,tifis.y);  
    }  
    if (tifis.derechaOK == true) {  
        tablero.drawImage(tifis.derecha,tifis.x,tifis.y);  
    }  
    if(tifis.x == 450 && tifis.y == 450)  
        alert("Fuck Yeah!");  
}

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8"/>  
          
        <title>Juego!</title>  
        <style type="text/css">  
            body{  
                background-color: black;  
                text-align: center;  
                padding: 5em;  
            }  
  
        </style>  
        <script type="text/javascript" src="tifis.js">  
  
        </script>  
    </head>  
    <body>  
          
            <div>  
                <input type="button" value="Arriba" id="up"></input>      
            </div>  
            <div>  
                <input type="button" value="Izquierda" id="left"></input>  
                <input type="button" value="Abajo" id="down"></input>  
                <input type="button" value="Derecha" id="right"></input>  
            </div>  
              
              
              
          
        <canvas id="campo" width="500" height="500">  
              
        </canvas>  
        <script type="text/javascript">  
            inicio();  
        </script>  
    </body>  
</html>

Yesid Ghisays

student•

Profe, al minuto 5:35 habla de agregar ; al crear objetos, a mi se me habia olvidado y mi codigo ha estado funcionando de lo mas de bien desde el video anterior

Andrés Soria

student•

El código seguirá funcionando, pero recuerda que poner ; es una "Buena Práctica"

Farith Comas

student•

Sabemos bien que las funciones son las únicas que no llevan ; por lo que a mi punto de vista al poner ; en los objetos nos indica mas bien que no es de tipo función y es mas como una variable mas en el código que contiene elementos o mas variables del tipo que quieras, y posteriormente poder acceder a ellas.
Por lo que es absolutamente una buena practica hacerlo.

Jhon Carlos Colorado Angulo

student•

Amigos aquí les dejos una manera de hacerlo. Como dice fredy rompiendo el código.

Archivo index.html  
  
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Juego tifis</title>  
    <style type="text/css">  
        body  
        {  
            background: black;  
            text-align: center;  
        }  
    </style>  
    <script type="text/javascript" src="canvas.js">  
    </script>  
</head>  
<body>  
      
    <p>  
        <input type="button" value="izquierda" id="izquierda">  
        <input type="button" value="derecha" id="derecha">  
        <input type="button" value="arriba" id="arriba">  
        <input type="button" value="abajo" id="abajo">  
    </p>  
    <canvas width="500" height="500" id="campo"></canvas>  
    <h1>Hola esto........</h1>  
      
    <script type="text/javascript">  
        inicio();  
    </script>  
      
</body>  
</html>  
  
  
  
Ahora el archivo tifis.js  
  
var tablero;  
var fondo =   
{  
    imagenURL: "img/fondo.png",  
    imagenOk: false  
};  
var tifis =  
{  
    x: 0,  
    y: 0,  
    tifisURL: "img/diana-frente.png",  
    cofirmar: false  
};  
  
function inicio()  
{  
    var canvas = document.getElementById("campo");  
    var bIzquierdo = document.getElementById("izquierda");  
    var bDerecho = document.getElementById("derecha");  
    var bArriba = document.getElementById("arriba");  
    var bAbajo = document.getElementById("abajo");  
  
    bIzquierdo.addEventListener("click", izquierda);  
    bDerecho.addEventListener("click", derecha);  
    bArriba.addEventListener("click", arriba);  
    bAbajo.addEventListener("click", abajo);      
  
    tablero = canvas.getContext("2d");  
  
    fondo.imagen = new Image();  
    fondo.imagen.src = fondo.imagenURL;  
    fondo.imagen.onload = confirmarFondo;  
  
    tifis.frente = new Image()  
    tifis.frente.src = tifis.tifisURL;  
    tifis.frente.onload = confirmarFrente;  
  
}  
  
function confirmarFondo()  
{  
    fondo.imagenOk = true;  
    dibujar();  
      
}  
function confirmarFrente()  
{  
    tifis.confirmar = true;  
    dibujar();  
}  
  
function dibujar()  
{  
    if(fondo.imagenOk == true)  
    {  
        tablero.drawImage(fondo.imagen, 0, 0);  
    }  
    if(tifis.confirmar == true)  
    {  
        tablero.drawImage(tifis.frente, tifis.x, tifis.y);  
    }  
}  
  
function derecha()  
{  
    if(tifis.x <= 400)  
    {  
        tifis.x += 50;  
        dibujar();  
    }  
}  
function izquierda()  
{  
    if(tifis.x >= 50)  
    {  
        tifis.x -= 50;  
        dibujar();  
    }  
}  
function arriba()  
{  
    if(tifis.y >= 50)  
    {  
        tifis.y -= 50;  
        dibujar();  
    }  
}  
function abajo()  
{  
    if(tifis.y <= 400)  
    {  
        tifis.y += 50;  
        dibujar();  
    }  
}

Ivan Rojas

student•

¡Excelente! Pero... ¿te funcionó bien? Porque en la variable "tifis" declaraste "cofirmar" y mas abajo pusiste "confirmar"

Eduardo Lemus Zavala

student•

Codigo == evento.keyCode; <-- obtiene el codigo de la tecla utilizada

Erick Orlando Velasco Martínez

student•

Y es una buena práctica redibujar una y otra vez las mismas imágenes?

Enrique Torres Juárez

student•

¿Se podría crear otro canvas para albergar a las imágenes de los sprites separado del canvas donde está el fondo y así evitar el dibujado y redibujado que ocurre cada vez que se mueve la imagen?

Usuario anónimo

user•

Comparto mi código, en el cuál añadí 3 botones más que permitieran que Diana se moviera para las demás direcciones.

HTML

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>Clase 13: Insertar imágenes. La leyenda de Tifis.</title>  
    <script type="text/javascript" src="js/imagenes.js"></script>  
    <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>  
    <style type="text/css">  
    body {  
        background: #000;  
        text-align: center;  
  
    }  
    h1 {  
        color: #FFF;  
        font-family: 'Lobster', cursive;  
    }  
    </style>  
</head>  
<body>  
    <h1>La leyenda de Tifis</h1>  
    <canvas id="campo" width="500" height="500"></canvas>  
  
    <p><input type="button" value="↑" id="up"></input></p>  
    <p>  
        <input type="button" value="←" id="left">&nbsp;&nbsp;&nbsp;</input>  
        <input type="button" value="→" id="right"></input>  
    </p>  
    <p><input type="button" value="↓" id="down"></input></p>  
  
  
    <script type="text/javascript">inicio();</script>  
  
</body>  
</html>

Javascript

var tablero;  
  
//Se declaran las variables de las imágenes que vamos a colocar  
var fondo = {  
    imagenURL: "img/fondo.png",  
    imagenOK: false  
};  
  
var tifis = {  
    x: 10,  
    y: 10,  
    frenteURL: "img/diana-frente.png",  
    frenteOK: false  
};  
  
//Se crea la función inicio que llamará a cada uno de los elementos por su id y los hará cumplir la función en los parámetros del evento addEventListener  
  
function inicio () {  
    var canvas = document.getElementById('campo');  
    tablero = canvas.getContext("2d");  
   
    fondo.imagen = new Image();   
    fondo.imagen.src = fondo.imagenURL; //Estas dos líneas de código son las que se necesitan para cargar una url en un espacio de la memoria del computador  
    fondo.imagen.onload = confirmarFondo;   
  
    tifis.frente = new Image();  
    tifis.frente.src = tifis.frenteURL;  
    tifis.frente.onload = confirmarFrente;  
  
    //Se crearon las variables de los botones que permita que Diana se mueva para arriba, abajo, izquierda y derecha  
  
    var u = document.getElementById("up");  
    u.addEventListener("click", movimientoUp);  
  
    var l = document.getElementById("left");  
    l.addEventListener("click", movimientoLeft);  
  
    var r = document.getElementById("right");  
    r.addEventListener("click", movimientoRight);  
  
    var d = document.getElementById("down");  
    d.addEventListener("click", movimientoDown);  
  
  
}  
  
//Se crea la función de confirmación de la carga de las imágenes  
  
function confirmarFondo() {  
    fondo.imagenOK = true;  
    dibujar();  
}  
  
function confirmarFrente() {  
    tifis.frenteOK = true;  
    dibujar();  
}  
  
//Y aquí se dibujan cada una de las imágenes, dependiendo del resultado de la condicional  
  
function dibujar() {  
  
    if (fondo.imagenOK == true) {  
        tablero.drawImage(fondo.imagen, 0,0);  
    }  
    if (tifis.frenteOK == true) {  
        tablero.drawImage(tifis.frente, tifis.x, tifis.y)  
    }  
  
}  
  
//Se crean las funciones del movimiento de Diana  
  
function movimientoUp () {  
    tifis.y -=10;  
    dibujar();  
}  
  
function movimientoLeft () {  
    tifis.x -=10;  
    dibujar();  
}  
  
function movimientoRight () {  
    tifis.x +=10;  
    dibujar();  
}  
  
function movimientoDown () {  
    tifis.y +=10;  
    dibujar();  
}

Espero que les sirva de ayuda, ánimos :D

Javier Aguirre Roman

student•

están buenos los cursos namas faltaría enfocarse también a planeación del código,
e ir comentando que vamos haciendo

Cesar David Ramírez Dimaté

student•

Es buena la propuesta pero es mejor que el estudiante documente su propio código según lo que el profesor va diciendo en el vídeo. Así no todo se le entrega y se van creando buenas prácticas.

Juan Jzb

student•

Eso es algo opcional de cada uno!Obviamente, es una buena practica comentar el codigo, pero al momento de aprender, los que deberiamos comentarlo somos nosotros, y no solo quedarnos esperando que el profe suba el documento!... Practicar, Practicar y Practicar!

Mario Fdez

student•

podría centrar la imagen usando ,
display flex

justify-content center

Ricardo Diez

student•

Tengo una duda si el atributo onload del Objeto Image se encarga de realizar cierta acción (en este caso dibujar) solo cuando la imagen este cargada, tiene sentido que utilicemos una variable booleana para saber si la imagen cargo o no? segun lo que entiendo ya el atributo onload se encarga de controlar eso no? o estoy obviando algo?

Antonio Mendiola Farías

student•

Tienes razón. El código funciona perfectamente sin las variables booleanas. Ya que la función dibujar se ejecuta hasta que el evento "onload" ó "load" ocurra.

var tablero;  
//JSON : JavaScript Object Notation  
var fondo = {imagenURL: "fondo.png"};  
  
var tifis = {  
             x: 0,  
             y: 0,   
             frenteURL:"diana-frente.png",  
            };  
  
function inicio()  
{  
    var canvas = document.getElementById("campo");  
    tablero = canvas.getContext("2d");  
  
    fondo.imagen = new Image();  
    fondo.imagen.src = fondo.imagenURL;  
    fondo.imagen.onload = dibujar;  
  
    tifis.frente = new Image();  
    tifis.frente.src = tifis.frenteURL;  
    tifis.frente.addEventListener("load",dibujar); //Otro método  
  
    var m = document.getElementById("mover");  
    m.addEventListener("click", movimiento);  
}  
  
function dibujar()  
{  
    tablero.drawImage(fondo.imagen, 0, 0);  
    tablero.drawImage(tifis.frente, tifis.x, tifis.y);  
}  
  
function movimiento()  
{  
    tifis.x += 10;  
    dibujar();  
}

Germán Restrepo Fernández

student•

El código funciona sin las variables booleanas; sin embargo, el verdadero objetivo de esas variables es controlar cuál de las imágenes de 'tifis' (frente, atrás, derecha, izquierda) es la que se va a dibujar.

Hernando Hurtado Hoyos

student•

cual es la diferencia entre insertar una imagen en una etiqueta <canvas> y una etiqueta <img> o <figure>???

Diego Paredes Arenas

student•

Que tiene un sistema de coordenadas que puedes manejar, que es independiente al de tu página html. Para hacer este juego por ejemplo sin insertar las imágenes con canvas, tendrías que usar paddings, margins o posiciones absolutas y coordenadas en pixeles para mover los personajes, lo cual sería todo un enredo porque estos elementos deberían organizarse de manera que no afecten la maquetación de tu sitio web, mientras que con canvas no tienes que preocuparte por nada de eso, puesto que es un espacio independiente.

Jhon Carlos Colorado Angulo

student•

Muy buena la explicación y sobre todo lo que ya podemos hacer es magnifico.

Gracias a mejorando.la

Diego Lara Lara

student•

Tengo una duda, cual es la diferencia entre var inicio = function() {...} y function inicio () {...}

???

student•

Muy buena enseñanza :3 (Y)

<!DOCTYPE html>  
<html lang="es">  
<head>  
    <title>loool</title>  
</head>  
<body style="background: #333;">  
  
  
<canvas id="campo" width="500" height="500" style="position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;"></canvas>  
<input type="button" value="avanzar" id="boton"></input>  
<input type="button" value="retroceder" id="retro"></input>  
<input type="button" value="derecha" id="dere"></input>  
<input type="button" value="izquierda" id="izqui"></input>  
  
<script type="text/javascript" src="juego.js"></script>  
</body>  
</html>

var contexto;  
var fondo = {  
    imagenURL : "images/fondo.png",  
    imagenOK : false  
};  
  
var tifis = {  
    x:100,  
    y:100,  
    frenteURL:"images/diana-frente.png",  
    frenteOK:false  
};  
  
var liz = {  
    x:300,  
    y:250,  
    lizURL:"images/liz.png",  
    lizOK:false  
};  
  
  
  
  
function inicio(){  
      
    var canvas = document.getElementById("campo");  
     contexto = canvas.getContext("2d");  
     var boton = document.getElementById("boton");  
     var dere = document.getElementById("dere");  
     var izqui = document.getElementById("izqui");  
     var retro = document.getElementById("retro");  
       
     fondo.imagen = new Image();  
     fondo.imagen.src = fondo.imagenURL;  
     fondo.imagen.onload = confirmarFondo;  
       
     tifis.imagen = new Image();  
     tifis.imagen.src = tifis.frenteURL;  
     tifis.imagen.onload = confirmarFrente;  
  
     liz.imagen = new Image();  
     liz.imagen.src = liz.lizURL;  
     liz.imagen.onload = confirmarLiz;  
     boton.addEventListener("click",avanzar);  
     retro.addEventListener("click",retroceder);  
     dere.addEventListener("click",derecha);  
     izqui.addEventListener("click",izquierda);  
  
       
}  
  
function confirmarFondo(){  
    fondo.imagenOK = true;  
    dibujar();  
}  
  
function confirmarFrente(){  
    tifis.frenteOK = true;  
    dibujar();  
}  
  
function confirmarLiz(){  
    liz.lizOK = true;  
    dibujar();  
}  
  
function dibujar(){  
    if(fondo.imagenOK == true){  
        contexto.drawImage(fondo.imagen , 0, 0);  
    }  
    if(tifis.frenteOK == true){  
        contexto.drawImage(tifis.imagen , tifis.x, tifis.y);  
    }  
    if(liz.lizOK == true){  
        contexto.drawImage(liz.imagen ,liz.x, liz.y);  
    }  
}  
  
function avanzar(){  
    tifis.y += 50;  
    dibujar();  
    sobrepasa();  
}  
  
function retroceder(){  
    tifis.y -= 50;  
    dibujar();  
    sobrepasa();  
}  
  
function derecha(){  
    tifis.x +=50;  
    dibujar();  
    sobrepasa();  
}  
function izquierda(){  
    tifis.x -=50;  
    dibujar();  
    sobrepasa();  
}  
  
function sobrepasa(){  
    if(tifis.x == 500){  
        izquierda();  
    }else if(tifis.x == -50){  
        derecha();  
    }else if(tifis.y == 500){  
        retroceder();  
    }else if(tifis.y == -50){  
        avanzar();  
    }  
      
      
}  
  
inicio();

Lewis Florez Renza

student•

Donde estan las imagenes que no las veo? gracias

Luis Enrique Nava Zavala

student•

Si vas donde comparte el Freddy, dice "ARTICULO", bajas con y dice "Archivos gráficos" ahí están las imágenes

Hernán Iván

student•

Tambien puedes dar click derecho en las imágenes y descargarlas una a una

Ḁ̪̻̫̰̭̌ͅbȇ͎̭͎̾̄̄̊l Vilca Quispe

student•

GRACIAS A DIOS n_n?

Muy buena y interesante la clase

GRACIAS A DIOS n_n?

Eduardo Lemus Zavala

student•

Notas:
frenteOK: false //si es falsa no ha cargado la imagen, si es verdadero ya cargo
tablero = canvas.getContext("2d");//lienzo sobre el cual vamos a dibujar en 2 dimensiones

fondo.imagen = new Image();//objeto de imagenes del navegador
fondo.imagen.src = fondo.imagenUrl;// Carga la imagen pero no la muestra

m.addEventListener("click",movimiento);//detecta el evento click sobre el boton e incrementa la pos X por lo tanto se mueve a la derecha

Dranser DotNet

student•

@fredier: En programación y de hecho en lógica (Álgebra - Primer Semestre usualmente), colocar "Boleano == Boleano" es un error, ya que "==" solo compara cadenas y números, pues es totalmente innecesario el comparar boleanos para devolver al final un boleano :/.

Richard Álvarez

student•

Aquí esta mi codigo amigos:

/* HTML*/

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>La leyenda de tifis</title> <style> body{ background-color:black; text-align: center; } </style> <script type="text/javascript" src="tifis.js"></script> </head> <body> <p> <input type="button" value="Mover" id="mover"> </p> <canvas id="campo" width="500" height="500"></canvas> <script type="text/javascript"> inicio(); </script> </body> </html>

/*JavaScript */

var tablero;
var fondo = {
imagenURL:"imagenes/fondo.png",
imagenOK: false
};

var tifis = {
x: 100,
y: 100,
frenteURL: "imagenes/diana-frente.png",
frenteOK: false
};

function inicio() {

var canvas = document.getElementById("campo");
tablero = canvas.getContext("2d");

fondo.imagen = new Image();
fondo.imagen.src = fondo.imagenURL;
fondo.imagen.onload = confirmarFondo;

tifis.frente = new Image();
tifis.frente.src = tifis.frenteURL;
tifis.frente.onload = confirmarFrente

var m = document.getElementById("mover");
m.addEventListener ("click",movimiento);
}

function confirmarFondo() {
fondo.imagenOK= true;
dibujar();

}

function confirmarFrente() {
tifis.frenteOK= true;
dibujar();

}

function dibujar(){
if( fondo.imagenOK == true ) {
tablero.drawImage( fondo.imagen, 0,0 );
}

if( tifis.frenteOK == true ) {
tablero.drawImage( tifis.frente, tifis.x, tifis.y);
}

}

function movimiento(){
tifis.x+=10;
dibujar();
}

var flag = true;  
var tablero;  
var fondo = {  
    imagenURL: "img/fondo.png",  
    imagenOK: false  
};  
var tifis = {  
    x: 0,  
    y: 0,  
    frenteURL: "img/diana-frente.png",  
    frenteOK: false,  
    detrasURL: "img/diana-atras.png",  
    detrasOK: false,  
    derechaURL: "img/diana-der.png",  
    derechaOK: false,  
    izquierdaURL: "img/diana-izq.png",  
    izquierdaOK: false  
};  
var puerta = {  
    puertaURL: "http://g02.a.alicdn.com/kf/HTB16viDIXXXXXcNXpXXq6xXFXXXv/Caliente-venta-saltando-castillo-inflable-casa-de-la-despedida-castillo-hinchable-con-piscina-de-bolas.jpg_50x50.jpg",  
    puertaOK: false  
};  
function inicio(){  
     var canvas = document.getElementById("campo");  
     tablero = canvas.getContext("2d");  
     fondo.imagen = new Image();  
     fondo.imagen.src = fondo.imagenURL;  
     fondo.imagen.onload = confirmarFondo;  
     puerta.imagen = new Image();  
     puerta.imagen.src = puerta.puertaURL;  
     puerta.imagen.onload = confirmarPuerta;  
       
  
     tifis.frente = new Image();  
     tifis.frente.src = tifis.frenteURL;  
     tifis.frente.onload = confirmarTifis;  
  
     tifis.detras = new Image();  
     tifis.detras.src = tifis.detrasURL;  
  
     tifis.izquierda = new Image();  
     tifis.izquierda.src = tifis.izquierdaURL;  
  
     tifis.derecha = new Image();  
     tifis.derecha.src = tifis.derechaURL;  
  
     var mUp = document.getElementById("up");  
     mUp.addEventListener("click",moveUp);  
     var mDown = document.getElementById("down");  
     mDown.addEventListener("click",moveDown);  
     var mLeft = document.getElementById("left");  
     mLeft.addEventListener("click",moveLeft);  
     var mRight = document.getElementById("right");  
     mRight.addEventListener("click",moveRight);  
}  
  
function obstaculos(x,y){  
    //Obstaculo superior  
    var z;  
    if(x == 200){  
        for(z=0;z<=200;z+=50){  
            if (y==z) {  
                flag= false;  
                break;  
            }  
        }      
    }  
      
    //Obstaculo Izquierdo  
    if(y == 200){  
        for(z=0;z<=100;z+=50){  
            if (x==z) {  
                flag= false;  
            }  
        }      
    }  
    //Obstaculo Inferior  
    if(y == 350){  
        for(z=150;z<=450;z+=50){  
            if (x==z) {  
                flag= false;  
            }  
        }      
    }  
}  
function moveUp(){  
    flag = true;  
    if(tifis.y>=50){  
          
        obstaculos(tifis.x,tifis.y-50);  
        if (flag){  
            tifis.y-=50;  
            tifis.frenteOK = false;  
            tifis.detrasOK = true;  
            tifis.izquierdaOK = false;  
            tifis.derechaOK = false;  
            dibujar();      
        }  
    }      
}  
function moveDown(){  
    flag = true;  
    if(tifis.y<=400){  
        obstaculos(tifis.x,tifis.y+50);  
        if (flag){  
            tifis.y+=50;  
            tifis.frenteOK = true;  
            tifis.detrasOK = false;  
            tifis.izquierdaOK = false;  
            tifis.derechaOK = false;  
            dibujar();  
        }  
    }      
}  
function moveLeft(){  
    flag = true;  
    if(tifis.x>=50){  
        obstaculos(tifis.x-50,tifis.y);  
        if (flag){  
            tifis.x-=50;  
        tifis.frenteOK = false;  
        tifis.detrasOK = false;  
        tifis.izquierdaOK = true;  
        tifis.derechaOK = false;  
        dibujar();      
        }  
          
    }      
}  
function moveRight(){  
    flag = true;  
    if(tifis.x<=400){  
        obstaculos(tifis.x+50,tifis.y);  
        if (flag){  
            tifis.x+=50;  
        tifis.frenteOK = false;  
        tifis.detrasOK = false;  
        tifis.izquierdaOK = false;  
        tifis.derechaOK = true;  
        dibujar();  
        }  
              
    }      
}  
  
  
function confirmarTifis(){  
    tifis.frenteOK = true;  
    dibujar();  
}  
  
  
  
function confirmarFondo(){  
    fondo.imagenOK = true;  
    dibujar();  
}  
function confirmarPuerta(){  
    puerta.puertaOK = true;  
    dibujar();  
}  
  
function dibujar(){  
    if (fondo.imagenOK == true) {  
        tablero.drawImage(fondo.imagen,0,0);  
    }  
    if (puerta.puertaOK == true) {  
        tablero.drawImage(puerta.imagen,450,450);  
    }  
    if (tifis.frenteOK == true) {  
        tablero.drawImage(tifis.frente,tifis.x,tifis.y);  
    }  
    if (tifis.detrasOK == true) {  
        tablero.drawImage(tifis.detras,tifis.x,tifis.y);  
    }  
    if (tifis.izquierdaOK == true) {  
        tablero.drawImage(tifis.izquierda,tifis.x,tifis.y);  
    }  
    if (tifis.derechaOK == true) {  
        tablero.drawImage(tifis.derecha,tifis.x,tifis.y);  
    }  
    if(tifis.x == 450 && tifis.y == 450)  
        alert("Fuck Yeah!");  
}

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8"/>  
          
        <title>Juego!</title>  
        <style type="text/css">  
            body{  
                background-color: black;  
                text-align: center;  
                padding: 5em;  
            }  
  
        </style>  
        <script type="text/javascript" src="tifis.js">  
  
        </script>  
    </head>  
    <body>  
          
            <div>  
                <input type="button" value="Arriba" id="up"></input>      
            </div>  
            <div>  
                <input type="button" value="Izquierda" id="left"></input>  
                <input type="button" value="Abajo" id="down"></input>  
                <input type="button" value="Derecha" id="right"></input>  
            </div>  
              
              
              
          
        <canvas id="campo" width="500" height="500">  
              
        </canvas>  
        <script type="text/javascript">  
            inicio();  
        </script>  
    </body>  
</html>

Archivo index.html  
  
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Juego tifis</title>  
    <style type="text/css">  
        body  
        {  
            background: black;  
            text-align: center;  
        }  
    </style>  
    <script type="text/javascript" src="canvas.js">  
    </script>  
</head>  
<body>  
      
    <p>  
        <input type="button" value="izquierda" id="izquierda">  
        <input type="button" value="derecha" id="derecha">  
        <input type="button" value="arriba" id="arriba">  
        <input type="button" value="abajo" id="abajo">  
    </p>  
    <canvas width="500" height="500" id="campo"></canvas>  
    <h1>Hola esto........</h1>  
      
    <script type="text/javascript">  
        inicio();  
    </script>  
      
</body>  
</html>  
  
  
  
Ahora el archivo tifis.js  
  
var tablero;  
var fondo =   
{  
    imagenURL: "img/fondo.png",  
    imagenOk: false  
};  
var tifis =  
{  
    x: 0,  
    y: 0,  
    tifisURL: "img/diana-frente.png",  
    cofirmar: false  
};  
  
function inicio()  
{  
    var canvas = document.getElementById("campo");  
    var bIzquierdo = document.getElementById("izquierda");  
    var bDerecho = document.getElementById("derecha");  
    var bArriba = document.getElementById("arriba");  
    var bAbajo = document.getElementById("abajo");  
  
    bIzquierdo.addEventListener("click", izquierda);  
    bDerecho.addEventListener("click", derecha);  
    bArriba.addEventListener("click", arriba);  
    bAbajo.addEventListener("click", abajo);      
  
    tablero = canvas.getContext("2d");  
  
    fondo.imagen = new Image();  
    fondo.imagen.src = fondo.imagenURL;  
    fondo.imagen.onload = confirmarFondo;  
  
    tifis.frente = new Image()  
    tifis.frente.src = tifis.tifisURL;  
    tifis.frente.onload = confirmarFrente;  
  
}  
  
function confirmarFondo()  
{  
    fondo.imagenOk = true;  
    dibujar();  
      
}  
function confirmarFrente()  
{  
    tifis.confirmar = true;  
    dibujar();  
}  
  
function dibujar()  
{  
    if(fondo.imagenOk == true)  
    {  
        tablero.drawImage(fondo.imagen, 0, 0);  
    }  
    if(tifis.confirmar == true)  
    {  
        tablero.drawImage(tifis.frente, tifis.x, tifis.y);  
    }  
}  
  
function derecha()  
{  
    if(tifis.x <= 400)  
    {  
        tifis.x += 50;  
        dibujar();  
    }  
}  
function izquierda()  
{  
    if(tifis.x >= 50)  
    {  
        tifis.x -= 50;  
        dibujar();  
    }  
}  
function arriba()  
{  
    if(tifis.y >= 50)  
    {  
        tifis.y -= 50;  
        dibujar();  
    }  
}  
function abajo()  
{  
    if(tifis.y <= 400)  
    {  
        tifis.y += 50;  
        dibujar();  
    }  
}

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>Clase 13: Insertar imágenes. La leyenda de Tifis.</title>  
    <script type="text/javascript" src="js/imagenes.js"></script>  
    <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>  
    <style type="text/css">  
    body {  
        background: #000;  
        text-align: center;  
  
    }  
    h1 {  
        color: #FFF;  
        font-family: 'Lobster', cursive;  
    }  
    </style>  
</head>  
<body>  
    <h1>La leyenda de Tifis</h1>  
    <canvas id="campo" width="500" height="500"></canvas>  
  
    <p><input type="button" value="↑" id="up"></input></p>  
    <p>  
        <input type="button" value="←" id="left">&nbsp;&nbsp;&nbsp;</input>  
        <input type="button" value="→" id="right"></input>  
    </p>  
    <p><input type="button" value="↓" id="down"></input></p>  
  
  
    <script type="text/javascript">inicio();</script>  
  
</body>  
</html>

var tablero;  
  
//Se declaran las variables de las imágenes que vamos a colocar  
var fondo = {  
    imagenURL: "img/fondo.png",  
    imagenOK: false  
};  
  
var tifis = {  
    x: 10,  
    y: 10,  
    frenteURL: "img/diana-frente.png",  
    frenteOK: false  
};  
  
//Se crea la función inicio que llamará a cada uno de los elementos por su id y los hará cumplir la función en los parámetros del evento addEventListener  
  
function inicio () {  
    var canvas = document.getElementById('campo');  
    tablero = canvas.getContext("2d");  
   
    fondo.imagen = new Image();   
    fondo.imagen.src = fondo.imagenURL; //Estas dos líneas de código son las que se necesitan para cargar una url en un espacio de la memoria del computador  
    fondo.imagen.onload = confirmarFondo;   
  
    tifis.frente = new Image();  
    tifis.frente.src = tifis.frenteURL;  
    tifis.frente.onload = confirmarFrente;  
  
    //Se crearon las variables de los botones que permita que Diana se mueva para arriba, abajo, izquierda y derecha  
  
    var u = document.getElementById("up");  
    u.addEventListener("click", movimientoUp);  
  
    var l = document.getElementById("left");  
    l.addEventListener("click", movimientoLeft);  
  
    var r = document.getElementById("right");  
    r.addEventListener("click", movimientoRight);  
  
    var d = document.getElementById("down");  
    d.addEventListener("click", movimientoDown);  
  
  
}  
  
//Se crea la función de confirmación de la carga de las imágenes  
  
function confirmarFondo() {  
    fondo.imagenOK = true;  
    dibujar();  
}  
  
function confirmarFrente() {  
    tifis.frenteOK = true;  
    dibujar();  
}  
  
//Y aquí se dibujan cada una de las imágenes, dependiendo del resultado de la condicional  
  
function dibujar() {  
  
    if (fondo.imagenOK == true) {  
        tablero.drawImage(fondo.imagen, 0,0);  
    }  
    if (tifis.frenteOK == true) {  
        tablero.drawImage(tifis.frente, tifis.x, tifis.y)  
    }  
  
}  
  
//Se crean las funciones del movimiento de Diana  
  
function movimientoUp () {  
    tifis.y -=10;  
    dibujar();  
}  
  
function movimientoLeft () {  
    tifis.x -=10;  
    dibujar();  
}  
  
function movimientoRight () {  
    tifis.x +=10;  
    dibujar();  
}  
  
function movimientoDown () {  
    tifis.y +=10;  
    dibujar();  
}

var tablero;  
//JSON : JavaScript Object Notation  
var fondo = {imagenURL: "fondo.png"};  
  
var tifis = {  
             x: 0,  
             y: 0,   
             frenteURL:"diana-frente.png",  
            };  
  
function inicio()  
{  
    var canvas = document.getElementById("campo");  
    tablero = canvas.getContext("2d");  
  
    fondo.imagen = new Image();  
    fondo.imagen.src = fondo.imagenURL;  
    fondo.imagen.onload = dibujar;  
  
    tifis.frente = new Image();  
    tifis.frente.src = tifis.frenteURL;  
    tifis.frente.addEventListener("load",dibujar); //Otro método  
  
    var m = document.getElementById("mover");  
    m.addEventListener("click", movimiento);  
}  
  
function dibujar()  
{  
    tablero.drawImage(fondo.imagen, 0, 0);  
    tablero.drawImage(tifis.frente, tifis.x, tifis.y);  
}  
  
function movimiento()  
{  
    tifis.x += 10;  
    dibujar();  
}

<!DOCTYPE html>  
<html lang="es">  
<head>  
    <title>loool</title>  
</head>  
<body style="background: #333;">  
  
  
<canvas id="campo" width="500" height="500" style="position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;"></canvas>  
<input type="button" value="avanzar" id="boton"></input>  
<input type="button" value="retroceder" id="retro"></input>  
<input type="button" value="derecha" id="dere"></input>  
<input type="button" value="izquierda" id="izqui"></input>  
  
<script type="text/javascript" src="juego.js"></script>  
</body>  
</html>

var contexto;  
var fondo = {  
    imagenURL : "images/fondo.png",  
    imagenOK : false  
};  
  
var tifis = {  
    x:100,  
    y:100,  
    frenteURL:"images/diana-frente.png",  
    frenteOK:false  
};  
  
var liz = {  
    x:300,  
    y:250,  
    lizURL:"images/liz.png",  
    lizOK:false  
};  
  
  
  
  
function inicio(){  
      
    var canvas = document.getElementById("campo");  
     contexto = canvas.getContext("2d");  
     var boton = document.getElementById("boton");  
     var dere = document.getElementById("dere");  
     var izqui = document.getElementById("izqui");  
     var retro = document.getElementById("retro");  
       
     fondo.imagen = new Image();  
     fondo.imagen.src = fondo.imagenURL;  
     fondo.imagen.onload = confirmarFondo;  
       
     tifis.imagen = new Image();  
     tifis.imagen.src = tifis.frenteURL;  
     tifis.imagen.onload = confirmarFrente;  
  
     liz.imagen = new Image();  
     liz.imagen.src = liz.lizURL;  
     liz.imagen.onload = confirmarLiz;  
     boton.addEventListener("click",avanzar);  
     retro.addEventListener("click",retroceder);  
     dere.addEventListener("click",derecha);  
     izqui.addEventListener("click",izquierda);  
  
       
}  
  
function confirmarFondo(){  
    fondo.imagenOK = true;  
    dibujar();  
}  
  
function confirmarFrente(){  
    tifis.frenteOK = true;  
    dibujar();  
}  
  
function confirmarLiz(){  
    liz.lizOK = true;  
    dibujar();  
}  
  
function dibujar(){  
    if(fondo.imagenOK == true){  
        contexto.drawImage(fondo.imagen , 0, 0);  
    }  
    if(tifis.frenteOK == true){  
        contexto.drawImage(tifis.imagen , tifis.x, tifis.y);  
    }  
    if(liz.lizOK == true){  
        contexto.drawImage(liz.imagen ,liz.x, liz.y);  
    }  
}  
  
function avanzar(){  
    tifis.y += 50;  
    dibujar();  
    sobrepasa();  
}  
  
function retroceder(){  
    tifis.y -= 50;  
    dibujar();  
    sobrepasa();  
}  
  
function derecha(){  
    tifis.x +=50;  
    dibujar();  
    sobrepasa();  
}  
function izquierda(){  
    tifis.x -=50;  
    dibujar();  
    sobrepasa();  
}  
  
function sobrepasa(){  
    if(tifis.x == 500){  
        izquierda();  
    }else if(tifis.x == -50){  
        derecha();  
    }else if(tifis.y == 500){  
        retroceder();  
    }else if(tifis.y == -50){  
        avanzar();  
    }  
      
      
}  
  
inicio();

Dibujo de múltiples imágenes en canvas

Bienvenido

Aprender a programar es fácil

La Web con Visión Profesional

Aprende sobre Algoritmos

Condicionales y operadores en programación

Qué lenguaje de programación aprender primero

Material del curso / Archivos del curso

Introducción básica a HTML y Javascript para programar

Uso del sistema de vídeo y notas

Lenguajes y compiladores

HTML y Javascript

Variables y funciones

Piedra, papel y tijera con Javascript

Variables, Matrices y Objetos en Javascript

Escribir HTML desde JS (document.write)

Matrices

Juego campo minado

Objetos del navegador

Objetos en JS

Preguntas

Ciclos y Dibujos con Canvas

Ciclos

Dibujos con canvas

Dibujar con eventos

Preguntas y respuestas

Programando juegos con canvas

Tipos de imágenes

Insertar imágenes en canvas

Dibujo de múltiples imágenes en canvas

Dibujar al enemigo y controlar a Diana

Sesión de preguntas y respuestas

Uso de Objetos, Prototype y juego de ahorcado en Canvas

Objetos en JavaScript con Prototype

Creando el juego del Ahorcado

Dibujo de un ahorcado usando Canvas

Sesión de preguntas y respuestas

Cómo crear un algoritmo para el juego del ahorcado

Extendiendo la funcionalidad de los Strings

Creando nuestro algoritmo para el juego del ahorcado

Sesión de preguntas y respuestas

Pregúntale a Freddy lo que quieras ... acerca de programación ;)

Todo lo que siempre quisiste saber sobre este curso y no te atrevías a preguntar - Parte 1

Todo lo que siempre quisiste saber sobre este curso y no te atrevías a preguntar - Parte 2

Conceptos básicos de programación: Frontend-Backend

¿Qué es Frontend y Backend?

Ejemplo de un login usando POST y GET

Ejemplo de un login usando AJAX

Sesión de preguntas y respuestas

Crea tu primer servidor web con Node.JS

Instalación de Node.js

Instalación de librerías de Node con npm

Modelo cliente servidor y seguridad web básica

Servidor web con Express y Node.js

Formulario de login con Node.js

Sesión de preguntas y respuestas

Aprende a volar un dron con Javascript

Introducción a los drones

Bases de Node.js para drones

Vuela un dron con Node.js

Sesión de preguntas y respuestas

Complementos del curso

Publica tu sitio web usando GitHub Pages