Dibujar al enemigo y controlar a Diana

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

Denis Morales

student•

Y ahora mi Leyenda de Tifis optimizada:

var tablero;var aImagenes = [new Image(),new Image(),new Image(),new Image()];  
var matrizPosiciones = [[0,0,0,0,1,0,0,0,0,0],  
                        [0,0,0,0,1,0,0,0,0,0],  
                        [0,0,0,0,1,0,0,0,0,0],  
                        [0,0,0,0,1,0,0,0,0,0],  
                        [1,1,1,0,1,0,0,0,0,0],  
                        [0,0,0,0,0,0,0,0,0,0],  
                        [0,0,0,0,0,0,0,0,0,0],  
                        [0,0,0,1,1,1,1,1,1,1],  
                        [0,0,0,0,0,0,0,0,0,0],  
                        [0,0,0,0,0,0,0,0,0,0]];  
var fondo = {  
    imagenURL: "fondo.png",  
    imagenOK: false  
};  
var tifis = {  
    x:0,  
    y:0,  
    imagenesURL: ["diana-frente.png","diana-atras.png","diana-der.png","diana-izq.png"],  
    imagenesOK:[false,false,false,false],  
    velocidad: 10  
};  
var liz = {  
    x:300,  
    y:100,  
    lizURL:"liz.png",  
    lizOK:false  
};  
var teclas = ["Down","Up","Right","Left"];  
  
function inicio()  
{  
    var canvas = document.getElementById("campo");  
    tablero = canvas.getContext("2d");  
    fondo.imagen = new Image();  
    fondo.imagen.src = fondo.imagenURL;  
    fondo.imagen.onload = confirmarFondo;  
    for(var i = 0; i<tifis.imagenesURL.length; i++)  
    {  
        aImagenes[i].src = tifis.imagenesURL[i];  
        aImagenes[i].onload = confirmarTifis(i);  
    }  
    liz.lizy = new Image();  
    liz.lizy.src = liz.lizURL;  
    liz.lizy.onload = confirmarLiz;  
    document.addEventListener("keydown",teclado);  
}  
function confirmarFondo()  
{  
    fondo.imagenOK = true;  
    dibujar();  
}  
function confirmarTifis(d)  
{  
    tifis.imagenesOK[d] = true;  
    dibujar();  
}  
function confirmarLiz()  
{  
    liz.lizOK = true;  
    dibujar();  
}  
function dibujar(p)  
{  
    if(p == undefined) p = 0;  
    if(fondo.imagenOK) tablero.drawImage(fondo.imagen,0,0);  
    if(liz.lizOK) tablero.drawImage(liz.lizy,liz.x,liz.y);  
    if(tifis.imagenesOK[p] ) tablero.drawImage(aImagenes[p],tifis.x,tifis.y);  
}  
function teclado(datos)  
{  
    var yAux,xAux,pXAux1,pXAux2,pYAux1,pYAux2;  
    console.log(datos.keyIdentifier);  
    var direccion = datos.keyIdentifier;  
    if(direccion == teclas[0])//abajo  
    {  
        yAux = tifis.y + tifis.velocidad;  
        if(yAux <= 450)  
        {  
            pXAux1 = parseInt((tifis.x + 40 -1)/ 50);  
            pXAux2 = parseInt((tifis.x + 10) / 50);  
            pYAux1 = parseInt((yAux + 50 - 1) / 50);  
            pYAux2 = parseInt((yAux + 50 - 1) / 50);      
            if(matrizPosiciones[pYAux1][pXAux1] == 0 && matrizPosiciones[pYAux2][pXAux2] == 0) tifis.y = yAux;  
        }  
    }  
    else if(direccion == teclas[1])//arriba  
    {  
        yAux = tifis.y - tifis.velocidad;  
        if(yAux >= 0)  
        {  
            pXAux1 = parseInt((tifis.x + 40 -1)/ 50);  
            pXAux2 = parseInt((tifis.x + 10) / 50);  
            pYAux1 = parseInt(yAux / 50);  
            pYAux2 = parseInt(yAux / 50);  
            if(matrizPosiciones[pYAux1][pXAux1] == 0 && matrizPosiciones[pYAux2][pXAux2] == 0) tifis.y = yAux;  
        }  
    }  
    else if(direccion == teclas[2])//derecha  
    {  
        xAux = tifis.x + tifis.velocidad;  
        if(xAux <= 460)  
        {  
            pXAux1 = parseInt((xAux + 40 - 1) / 50);  
            pXAux2 = parseInt((xAux + 40 - 1) / 50);  
            pYAux1 = parseInt((tifis.y + 50 -1)/ 50);  
            pYAux2 = parseInt(tifis.y / 50);  
            if(matrizPosiciones[pYAux1][pXAux1] == 0 && matrizPosiciones[pYAux2][pXAux2] == 0) tifis.x = xAux;  
        }  
    }  
    else if(direccion == teclas[3])//izquierda  
    {  
        xAux = tifis.x - tifis.velocidad;  
        if(xAux >= -10)  
        {  
            pXAux1 = parseInt((xAux + 10)/ 50);  
            pXAux2 = parseInt((xAux + 10)/ 50);  
            pYAux1 = parseInt((tifis.y + 50 -1)/ 50);  
            pYAux2 = parseInt(tifis.y / 50);  
            if(matrizPosiciones[pYAux1][pXAux1] == 0 && matrizPosiciones[pYAux2][pXAux2] == 0) tifis.x = xAux;  
        }  
    }  
    if(direccion == teclas[0] || direccion == teclas[1] || direccion == teclas[2] || direccion == teclas[3]) dibujar(teclas.indexOf(direccion));  
}

Usuario anónimo

user•

Aqui mi aporte por si ven los otros muy complicados, aqui una forma facil de entender.

function teclado(datos) {  
    var codigo = datos.keyCode;  
    if(codigo == teclas.UP){  
        tifis.y -= tifis.velocidad;  
        if (tifis.y<0|| tifis.y>300 && tifis.x>110 && tifis.y<360 || tifis.y>150 && tifis.x<140 && tifis.y<210 || tifis.y<210 && tifis.x>160 && tifis.x<240) {  
            tifis.y += tifis.velocidad;  
        };  
    }  
  
    if(codigo == teclas.DOWN){  
        tifis.y += tifis.velocidad;  
         if(tifis.y>450 || tifis.y>300 && tifis.x>110 && tifis.y<360 || tifis.y>150 && tifis.x<140 && tifis.y<210) {  
            tifis.y -= tifis.velocidad;  
        }      
    }  
  
    if(codigo == teclas.LEFT){  
        tifis.x -= tifis.velocidad;  
        if (tifis.x<-10 || tifis.y>150 && tifis.x<140 && tifis.y<210 || tifis.x>160 && tifis.y<210 && tifis.x<240) {  
            tifis.x += tifis.velocidad;  
        };  
    }  
  
    if(codigo == teclas.RIGHT){  
        tifis.x += tifis.velocidad;  
        if(tifis.x>460 || tifis.y>300 && tifis.y<350 && tifis.x>110 || tifis.x>160 && tifis.y<210 && tifis.x<240) {  
            tifis.x -= tifis.velocidad;  
        }  
    }  
  
    direccion = codigo;  
    dibujar();  
}

Felipe Carrión

student•

Html:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
    <title>La leyenda de Fer</title>  
    <style type = "text/css">  
        body{  
            background: black;  
            color: white;  
            text-align: center;  
        }  
    </style>  
    <script type ="text/javascript" src="fer.js"></script>  
</head>  
<body>  
    <h1>La leyenda de Fer</h1>  
    <canvas id="campo" width="500" height="500"></canvas>  
    <p>Mueve a Fer contra Liz usando el teclado.</p>  
    <script type="text/javascript">  
        Inicio();  
    </script>  
</body>  
</html>

fer.js

var tablero, direccion;  
var teclas={  
    up: 38,  
    down: 40,  
    LEFT: 37,  
    RIGHT: 39  
};  
var fondo={  
    imagenURL: "Imagenes/fondo.png",  
    imagenOk: false  
};  
var fer={  
    x:0,  
    y:0,  
    frenteURL: "Imagenes/fer-frente.png",  
    frenteOk: false,  
    atrasURL: "Imagenes/fer-atras.png",  
    atrasOk: false,  
    derechaURL: "Imagenes/fer-der.png",  
    derechaOk: false,  
    izquierdaURL: "Imagenes/fer-izq.png",  
    izquierdaOk: false,  
    velocidad: 10  
};  
var liz = {  
    x:400,  
    y:150,  
    lizURL:"Imagenes/liz.png",  
    lizOk: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;   
    fer.frente = new Image();  
    fer.frente.src = fer.frenteURL;  
    fer.frente.onload = confirmarFrente;  
    fer.atras = new Image();  
    fer.atras.src = fer.atrasURL;  
    fer.atras.onload = confirmarAtras;  
    fer.derecha = new Image();  
    fer.derecha.src = fer.derechaURL;  
    fer.derecha.onload = confirmarDerecha;  
      
    fer.izquierda = new Image();  
    fer.izquierda.src = fer.izquierdaURL;  
    fer.izquierda.onload = confirmarIzquierda;  
    liz.enemiga = new Image();  
    liz.enemiga.src = liz.lizURL;  
    liz.enemiga.onload = confirmarLiz;  
    document.addEventListener("keydown", teclado);  
}  
function teclado(evento)  
{  
    var codigo = evento.keyCode;  
  
    if(codigo == teclas.up)  
    {  
        var antX, antY;  
        antX = fer.x;  
        antY = fer.y;          
        fer.y -= fer.velocidad;  
        if (fer.y < 0)  
        {  
            fer.y += fer.velocidad;  
        }  
        limiteUp(antX , antY);  
    }  
    if(codigo == teclas.down)  
    {  
        var antX, antY;  
        antX = fer.x;  
        antY = fer.y;  
        fer.y += fer.velocidad;  
        if(fer.y > 458)  
        {  
            fer.y -= fer.velocidad;  
        }  
        limiteDw(antX, antY);  
    }  
    if(codigo == teclas.LEFT)  
    {  
        var antXl, antYl;  
        antXl = fer.x;  
        antYl = fer.y;  
        fer.x -= fer.velocidad;  
        if(fer.x <0)  
        {  
            fer.x +=fer.velocidad;  
        }  
        limiteLf(antXl,antYl);  
    }  
    if(codigo == teclas.RIGHT)  
    {  
        var antXl, antYl;  
        antXl = fer.x;  
        antYl = fer.y;  
        fer.x += fer.velocidad;  
        if(fer.x > 462)  
        {  
            fer.x -= fer.velocidad;  
        }  
        limiteRg(antXl,antYl)  
    }  
    direccion = codigo;  
    dibujar();  
}  
function confirmarFondo(){  
    fondo.imagenOk = true;  
    dibujar();  
}  
function confirmarFrente(){  
    fer.frenteOk=true;  
    dibujar();  
}  
function confirmarAtras(){  
    fer.atrasOk=true;  
    dibujar();  
}  
function confirmarDerecha(){  
    fer.derechaOk=true;  
    dibujar();  
}  
function confirmarIzquierda(){  
    fer.izquierdaOk=true;  
    dibujar();  
}  
function confirmarLiz(){  
    liz.lizOk = true;  
    dibujar();  
}  
function dibujar(){  
    var ferOrientada = fer.frente;  
    if(fondo.imagenOk==true){  
        tablero.drawImage(fondo.imagen, 0, 0);  
    }  
    if(fer.frenteOk && fer.atrasOk && fer.derechaOk && fer.izquierdaOk)  
    {  
        if(direccion == teclas.down || direccion == undefined)  
        {  
            ferOrientada = fer.frente;  
        }  
        else if(direccion == teclas.up)  
        {  
            ferOrientada = fer.atras;  
        }  
        else if(direccion == teclas.LEFT)  
        {  
            ferOrientada = fer.izquierda;  
        }  
        else if(direccion == teclas.RIGHT)  
        {  
            ferOrientada = fer.derecha;  
        }  
    tablero.drawImage(ferOrientada, fer.x, fer.y);   
    }  
      
    if(liz.lizOk == true){  
        tablero.drawImage(liz.enemiga,liz.x, liz.y);      
    }  
}  
function limiteUp(antX,antY)  
{  
    if(fer.x < 140  && fer.y > 140 && fer.y < 242){  
        fer.x = antX;  
        fer.y = antY;  
    }  
    if(fer.x < 240 && fer.x > 167 && fer.y > 140 && fer.y < 242)  
    {  
        fer.x = antX;  
        fer.y = antY;  
    }  
    if(fer.x > 110 && fer.y < 400 && fer.y > 300)  
    {  
        fer.x = antX;  
        fer.y = antY;  
    }  
}  
function limiteDw(antX,antY)  
{  
    if(fer.y > 140 && fer.y < 242 && fer.x < 140){  
        fer.x = antX;  
        fer.y = antY;  
    }  
    if(fer.x < 240 && fer.x > 167 && fer.y > 140 && fer.y < 242)  
    {  
        fer.x = antX;  
        fer.y = antY;  
    }  
    if(fer.x > 110 && fer.y < 400 && fer.y > 300)  
    {  
        fer.x = antX;  
        fer.y = antY;  
    }  
}  
function limiteLf(a,b)  
{  
    if(fer.y > 140 && fer.y < 242 && fer.x < 140){  
        fer.x = a;  
        fer.y = b;  
    }  
    if(fer.x < 240 && fer.x > 167 && fer.y > -10 && fer.y < 242)  
    {  
        fer.x = a;  
        fer.y = b;  
    }  
}  
function limiteRg(antX, antY)  
{  
    if(fer.x < 240 && fer.x > 167 && fer.y > -10 && fer.y < 242)  
    {  
        fer.x = antX;  
        fer.y = antY;  
    }  
    if(fer.x > 110 && fer.y < 400 && fer.y > 300)  
    {  
        fer.x = antX;  
        fer.y = antY;  
    }  
}

Jhon Carlos Colorado Angulo

student•

Comparto mi tarea con bloqueo de obstáculos: Archivo html:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Juego tifis</title>  
    <style type="text/css">  
        body  
        {  
            background: black;  
            color: white;  
            text-align: center;  
        }  
    </style>  
    <script type="text/javascript" src="canvas.js">  
    </script>  
</head>  
<body>  
      
    <p>  
        <strong>Ayudanos a mover a Diana con la flechas del teclado.</strong>  
    </p>  
    <p id="coordenadas"></p>  
  
    <canvas width="500" height="500" id="campo"></canvas>  
    <h1>Hola esto........</h1>  
      
    <script type="text/javascript">  
        inicio();  
    </script>  
      
</body>  
</html>

Ahora el archivo Javascript:

var tablero, direccion, ejes;  
var fondo =   
{  
    imagenURL: "img/fondo.png",  
    imagenOk: false  
};  
var tifis =  
{  
    x: 0,  
    y: 0,  
    tifisURL: "img/diana-frente.png",  
    cofirmar: false,  
    atrasOk: false,  
    derOk: false,  
    izqOk: false,  
    velocidad: 50  
};  
  
var teclas =  
{  
    UP: 38,  
    DOWN: 40,  
    LEFT: 37,  
    RIGHT: 39  
}  
  
var liza =   
{  
    lizaURL: "img/liz.png",  
    lizaconfir: false  
};  
  
function inicio()  
{  
    var canvas = document.getElementById("campo");  
    ejes = document.getElementById("coordenadas");  
    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;  
  
    tifis.atras = new Image();  
    tifis.atras.src = "img/diana-atras.png";  
    tifis.atras.onload = confirmarAtras;  
  
    tifis.der = new Image();  
    tifis.der.src = "img/diana-der.png";  
    tifis.der.onload = confirmarAtras;  
  
    tifis.izq = new Image();  
    tifis.izq.src = "img/diana-izq.png";  
    tifis.izq.onload = confirmarAtras;  
  
    liza.mala = new Image();  
    liza.mala.src = liza.lizaURL;  
    liza.mala.onload = confirmarLiza;  
  
    document.addEventListener("keydown", teclado);  
  
}  
  
function teclado(datos)  
{  
    var codigo = datos.keyCode;  
  
    if(codigo == teclas.UP)  
    {  
        if((tifis.x<=100 && tifis.y==250) || tifis.y==0 ||(tifis.x==200 && tifis.y==250) ||(tifis.x>=150 &&tifis.x<=450 && tifis.y==400))  
        {  
              
            tifis.y += tifis.velocidad;  
        }  
        tifis.y -= tifis.velocidad;  
    }  
  
    if(codigo == teclas.DOWN)  
    {  
        if((tifis.x<=100 && tifis.y==150) || tifis.y==450 ||(tifis.x>=150 &&tifis.x<=450 && tifis.y==300))  
        {  
              
            tifis.y -= tifis.velocidad;  
        }  
        tifis.y += tifis.velocidad;  
    }  
  
    if(codigo == teclas.LEFT)  
    {  
        if((tifis.x == 250 && tifis.y <=200 ) || tifis.x ==0 || (tifis.x==150 && tifis.y==200))  
        {  
            tifis.x += tifis.velocidad;  
        }  
          
        tifis.x -= tifis.velocidad;  
  
    }  
  
    if(codigo == teclas.RIGHT)  
    {  
        if((tifis.x == 150 && tifis.y <=200 ) || tifis.x ==450 || (tifis.x==100 && tifis.y==350))  
        {  
            tifis.x -= tifis.velocidad;  
        }  
          
        tifis.x += tifis.velocidad;  
          
          
    }  
    direccion = codigo;  
  
    dibujar();  
}  
  
function confirmarFondo()  
{  
    fondo.imagenOk = true;  
    dibujar();  
      
}  
function confirmarFrente()  
{  
    tifis.confirmar = true;  
    dibujar();  
}  
  
function confirmarAtras()  
{  
    tifis.atrasOk = true;  
    dibujar();  
}  
  
function confirmarLiza()  
{  
    liza.lizaconfir = true;  
    dibujar();  
}  
  
function dibujar()  
{  
    if(fondo.imagenOk == true)  
    {  
        tablero.drawImage(fondo.imagen, 0, 0);  
    }  
      
  
    var tifiDibujo = tifis.frente;  
    if(tifis.confirmar == true)  
    {  
        if(direccion == teclas.UP)  
        {  
            tifiDibujo = tifis.atras  
        }  
  
        if(direccion == teclas.LEFT)  
        {  
            tifiDibujo = tifis.izq  
        }  
  
        if(direccion == teclas.RIGHT)  
        {  
            tifiDibujo = tifis.der  
        }  
  
        tablero.drawImage(tifiDibujo, tifis.x, tifis.y);  
        ejes.innerHTML = "x: "+tifis.x+" Y:"+tifis.y;  
  
    }  
  
    if(liza.lizaconfir == true)  
    {  
        tablero.drawImage(liza.mala, 350, 400);  
    }  
  
}

John Rios

student•

en caso tal de que quieran saber directamente cual es el valor de la tecla:

Julián Fernando Amaya Díaz

student•

Buena página Jhon saludos.

Luis Esteves

student•

Para aplicar lo aprendido hice un sensor de movimiento con HTML y Javascript. Ojalá se animen a hacer videojuegos con esto! :D

Carlos Junior Ramos Vásquez

student•

function teclado(datos)  
{  
    var codigo = datos.keyCode;  
    if (codigo == teclas.UP) {  
        if (tifis.y > 0) {  
            if (125 <= tifis.x && tifis.y == 400) {  
            } else if (125 >= tifis.x && tifis.y == 250) {  
            } else if (175 <= tifis.x && tifis.x <= 225 && tifis.y == 250) {  
            } else {  
                tifis.y -= tifis.velocidad;  
            }  
        }  
    }  
    if (codigo == teclas.DOWN) {  
        if (tifis.y < 450) {  
            if (125 <= tifis.x && tifis.y == 300) {  
            } else if (125 >= tifis.x && tifis.y == 150) {  
            } else {  
                tifis.y += tifis.velocidad;  
            }  
        }  
    }  
    if (codigo == teclas.RIGHT) {  
        if (tifis.x < 450) {  
            if ( tifis.x == 100 && 325 <= tifis.y && tifis.y <= 375) {  
            } else if (150 == tifis.x && 225 >= tifis.y) {  
            } else {  
                tifis.x += tifis.velocidad;  
            }  
        }  
    }  
    if (codigo == teclas.LEFT) {  
        if (tifis.x > 0) {  
            if ( tifis.x == 150 && 225 >= tifis.y && tifis.y >= 175) {  
            } else if (250 == tifis.x && 225 >= tifis.y) {  
            } else {  
                tifis.x -= tifis.velocidad;  
            }  
        }  
    }  
    direccion = codigo;  
    dibujar();

Hamza Akiour

student•

Muy bien optimizado.

Angel Loera

student•

Tarea "Bloqueo de obstáculos "

javascript- codigo
____________________________
var tablero, direccion;

var teclas={
UP: 38,
DOWN: 40,
LEFT: 37,
RIGHT: 39
};

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

var tifis={
x: 100,
y: 100,
frenteURL: "diana-frente.png",
frenteOK:false,
atrasURL: "diana-atras.png",
atrasOK: false,
derURL: "diana-der.png",
derOK: false,
izqURL: "diana-izq.png",
izqOK: false,
velocidad:10
};

var liz={
lizURL: "liz.png",
lizOK: false,
x: 400,
y:20
};

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;

tifis.atras= new Image();
tifis.atras.src= tifis.atrasURL;
tifis.atras.onload= confirmarAtras;

tifis.derecha= new Image();
tifis.derecha.src= tifis.derURL;
tifis.derecha.onload= confirmarDerecha;

tifis.izquierda= new Image();
tifis.izquierda.src= tifis.izqURL;
tifis.izquierda.onload= confirmarIzquierda;

liz.enemiga = new Image();
liz.enemiga.src = liz.lizURL;
liz.enemiga.onload = confirmarLiz;

document.addEventListener("keydown", teclado);

}

function teclado(datos)
{
var codigo= datos.keyCode;

if(codigo== teclas.UP){
tifis.y -= tifis.velocidad;
if(tifis.y < 0){
tifis.y = 0;
}
limiteA();

}
if(codigo== teclas.DOWN){
tifis.y +=tifis.velocidad;
if(tifis.y >= 450){
tifis.y = 450;
}
limiteB();

}
if(codigo== teclas.RIGHT){
tifis.x += tifis.velocidad;
if(tifis.x >= 462){
tifis.x = 462;
}
limites();

}
if(codigo== teclas.LEFT){
tifis.x -= tifis.velocidad;
if(tifis.x < 0){
tifis.x = -13;
}
limiteI();

}

direccion = codigo;
dibujar();
}

function dibujar()
{

//capa 1: fondo
if(fondo.imagenOK == true)
{
tablero.drawImage(fondo.imagen, 0, 0);
}

//capa 2: tifis

var tifisDibujo= tifis.frente;

if(tifis.frenteOK && tifis.atrasOK && tifis.derOK && tifis.izqOK)
{
if(direccion == teclas.UP){
tifisDibujo= tifis.atras;
}
if(direccion == teclas.DOWN){
tifisDibujo= tifis.frente;
}
if(direccion == teclas.RIGHT){
tifisDibujo= tifis.derecha;
}
if(direccion == teclas.LEFT){
tifisDibujo= tifis.izquierda;
}

tablero.drawImage(tifisDibujo, tifis.x, tifis.y);
}

//capa 3: liz
if(liz.lizOK )
{
tablero.drawImage(liz.enemiga, liz.x, liz.y);
}

posicion.innerText="pocision X:"+ tifis.x +"___,___ "+"posicion Y:"+ tifis.y;

}

if (tifis.x > 210 && tifis.x < 240 && tifis.y < 250){
tifis.x = 240;
tifis.y;
}
if(tifis.x < 137 && tifis.y > 150 && tifis.y < 250){
tifis.x =137;
tifis.y;

}
}
function limiteA(){

if (tifis.x > 170 && tifis.x < 238 && tifis.y < 250){
tifis.y = 250;
tifis.x;
}
if(tifis.x >= -13 && tifis.x < 137 && tifis.y < 250){
tifis.y = 250;
tifis.x;
}
if(tifis.x > 110 && tifis.x < 500 && tifis.y < 400 && tifis.y > 370){
tifis.y=400;
tifis.x;
}
}
function limiteB(){

if (tifis.x > 110 && tifis.x < 500 && tifis.y > 300 && tifis.y < 360){
tifis.y = 300;
tifis.x;
}
if(tifis.x >= -13 && tifis.x < 137 && tifis.y > 150 && tifis.y < 200){
tifis.y = 150;
tifis.x;
}
}

_______________________
HTML - codigo

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>La leyenda de thifis</title> <style type="text/css"> body { background: black; text-align: center; color:#f7f7f7; } </style> <script type="text/javascript" src="thifis.js"></script> </head> <body> <h5 id="posicion"></h5>

<canvas width="500" height="500" id="campo"></canvas>
<p>
Mueve a diana contra liz usando las flechas
de tu TECLADO.
</p>

inicio();

</script>

</body> </html>

Javier Andrés Collazos Gómez

student•

Hay un error !

"<title>La leyenda de thifis</title>"

Solucion

"<title>La leyenda de tifis</title>"*

De nada! xd okno

Germán Restrepo Fernández

student•

//La tarea con matrices y control de obstáculos

var tablero;  
var teclas =  
{  
    UP: 38,  
    DOWN: 40,  
    LEFT: 37,  
    RIGHT: 39  
};  
  
var fondo =   
{  
    imagen: new Image(),  
    imagenURL: "fondo.png",  
    imagenOK: true  
};    
  
var tifis =   
{  
    url: ["diana-frente.png", "diana-atras.png", "diana-izq.png", "diana-der.png"],  
    img: [new Image(), new Image(), new Image(), new Image()],  
    oK:  [true, false, false, false],  
    velocidad: 20,  
    x: 0,  
    y: 0  
};  
  
var liz =   
{  
    imagen: new Image(),  
    imagenOK: true,  
    x: 400,  
    y: 200  
};  
  
var obstaculos = [[0,180],[20,180],[40,180],[60,180],[80,180],[100,180],[120,180],[120,200],  
                  [0,220],[20,220],[40,220],[60,220],[80,220],[100,220],[120,220],  
                  [180,0],[180,20],[180,40],[180,60],[180,80],[180,100],[180,120],  
                  [180,140],[180,160],[180,180],[180,200],[180,220],[200,220],[220,0],  
                  [220,20],[220,40],[220,60],[220,80],[220,100],[220,120],[220,140],  
                  [220,160],[220,180],[220,200],[220,220],[140,320],[160,320],[180,320],  
                  [200,320],[220,320],[240,320],[260,320],[280,320],[300,320],[320,320],  
                  [340,320],[360,320],[380,320],[400,320],[420,320],[440,320],[460,320],[140,340],[140,360],  
                  [140,380],[160,380],[180,380],[200,380],[220,380],[240,380],[260,380],  
                  [280,380],[300,380],[320,380],[340,380],[360,380],[380,380],[400,380],[420,380],[440,380],[460,380]];  
  
function inicio()  
{  
    var canvas = document.getElementById("campo");  
    tablero = canvas.getContext("2d");  
  
    fondo.imagen.src = fondo.imagenURL;  
    fondo.imagen.onload = confirmarImagen;  
  
    for (var i=0; i<=3; i++)  
    {  
        tifis.img[i].src = tifis.url[i];  
        tifis.img[i].onload = confirmarImagen;  
    }  
  
    liz.imagen.src = "liz.png";  
    liz.imagen.onload = confirmarImagen;  
  
    document.addEventListener("keydown", teclado);  
}  
  
function teclado(evento)  
{  
    var codigo = evento.keyCode;  
    var xAnt = tifis.x;  
    var yAnt = tifis.y;  
  
    if(codigo == teclas.UP)  
    {  
        tifis.y -= tifis.velocidad;  
        if(tifis.y <= 0)  
        {  
            tifis.y = 0;  
        }  
    }  
   
    if(codigo == teclas.DOWN)  
    {  
        tifis.y += tifis.velocidad;  
        if(tifis.y >= 460)  
        {  
            tifis.y -= tifis.velocidad;  
        }  
    }  
   
    if(codigo == teclas.LEFT)  
    {  
        tifis.x -= tifis.velocidad;  
        if(tifis.x <= 0)  
        {  
            tifis.x = 0;  
        }  
    }  
    if(codigo == teclas.RIGHT)  
    {  
        tifis.x += tifis.velocidad;  
        if(tifis.x >= 480)  
        {  
            tifis.x -= tifis.velocidad;  
        }  
    }  
  
    // Verificamos si llegó a un obstáculo  
    for (var i = 0; i < 76; i++)  
    {  
        if (tifis.x == obstaculos[i][0] && tifis.y == obstaculos[i][1])  
        {  
            tifis.x = xAnt;  
            tifis.y = yAnt;  
        }  
    }  
  
    dibujar(codigo);  
}  
  
function confirmarImagen()  
{  
    dibujar();  
}  
  
function dibujar(direccion)  
{  
    var tifisOrientada;  
    tablero.drawImage(fondo.imagen, 0, 0);      
  
    // Colcamos todos los indicadores de imagen de tifis en falso  
    for (var i=0; i<=3; i++)  
    {  
        tifis.oK[i] = false;  
    }  
  
    // Colcamos solo el indicadores de imagen de tifis en verdadero  
    // de acuerdo a la tecla de dirección oprimida  
    if(direccion == teclas.DOWN || direccion == undefined)  
    {  
        tifis.oK[0] = true;  
    }  
    else if(direccion == teclas.UP)  
    {  
        tifis.oK[1] = true;  
    }  
    else if(direccion == teclas.LEFT)  
    {  
        tifis.oK[2] = true;  
    }  
    else if(direccion == teclas.RIGHT)  
    {  
        tifis.oK[3] = true;  
    }  
  
    for (var i=0; i<=3; i++)  
    {  
        if (tifis.oK[i])  
        {  
            tifisOrientada = tifis.img[i];  
        }  
    }  
  
    tablero.drawImage(tifisOrientada, tifis.x, tifis.y);  
  
    if(liz.imagenOK)  
    {  
        tablero.drawImage(liz.imagen, liz.x, liz.y);  
    }  
}

Cesar Garzon

student•

Hola compañero aca pueden ver el mismo juego con 3 mundos y ps diferente dificultad gracias a tu

var helado, direccion;  
var teclas =  
{  
    UP: 38,  
    DOWN: 40,  
    LEFT: 37,  
    RIGTH: 39  
};  
//opstaculos del nivel 2 [x,y]  
  
var obstaculos = [[0,180],[20,180],[40,180],[60,180],[80,180],[100,180],[120,180],[120,200],  
                  [0,220],[20,220],[40,220],[60,220],[80,220],[100,220],[120,220],  
                  [180,0],[180,20],[180,40],[180,60],[180,80],[180,100],[180,120],  
                  [180,140],[180,160],[180,180],[180,200],[180,220],[200,220],[220,0],  
                  [220,20],[220,40],[220,60],[220,80],[220,100],[220,120],[220,140],  
                  [220,160],[220,180],[220,200],[220,220],[140,320],[160,320],[180,320],  
                  [200,320],[220,320],[240,320],[260,320],[280,320],[300,320],[320,320],  
                  [340,320],[360,320],[380,320],[400,320],[420,320],[440,320],[460,320],[140,340],[140,360],  
                  [140,380],[160,380],[180,380],[200,380],[220,380],[240,380],[260,380],  
                  [280,380],[300,380],[320,380],[340,380],[360,380],[380,380],[400,380],[420,380],[440,380],[460,380]];  
  
//opstaculos del nivel 3[x,y]  
var obstaculosa = [[0,380],[20,380],[40,380],[60,380],[80,380],[100,380],[120,380],[120,380],  
                  [0,420],[20,420],[40,420],[60,420],[80,420],[100,420],[120,420],  
  
                  [60,0],[60,20],[60,40],[60,60],[60,80],[60,100],[60,120],  
                  [60,140],[60,160],[60,180],[60,200],[60,220],[60,240],[60,260],[60,280],[60,300],[60,320],[80,320],[100,320],  
  
                  [120,50],[120,20],[120,40],[120,60],[120,80],[120,100],[120,120],[120,140],  
                  [120,160],[120,180],[120,200],[120,220],[120,240],[120,260],[120,280],[120,300],[120,320],];  
  
//varialbs carga de imagenes  
var fondo ={  
    imagenOK: false  
};  
var hh = {  
    hhh: false  
};  
var jj = {  
    jjj: false  
};  
var imagen = {  
    ggg: false  
};  
var andrea = {  
    freOK: false,  
    atrOK: false,  
    derOK: false,  
    izOK: false,  
    velocidad: 20,  
    x: 0,  
    y: 0,  
};  
var mala = {  
    malaOK: false,  
    x:450,  
    y:449,  
};  
  
  
function inicio()  
{  
    var canvas = document.getElementById("dibujito");  
    helado = canvas.getContext("2d");  
  
    fondo.imagen = new Image();  
    fondo.imagen.src = "fondo1.jpg";  
    fondo.imagen.onload = confirmarfondo;  
  
    jj.imagen = new Image();  
    jj.imagen.src = "fondo3.gif";  
    jj.imagen.onload =confirmarfondo3;  
  
    hh.imagen = new Image();  
    hh.imagen.src = "fondo.png";  
    hh.imagen.onload =confirmarfondo2;  
  
    mala.malas = new Image();  
    mala.malas.src = "liz.png";  
    mala.malas.onload = confirmarmaldad;  
  
    andrea.frente = new Image();  
    andrea.frente.src = "dianafrente4.png";  
    andrea.frente.onload = confirmarfrente;  
  
    andrea.atrass = new Image();  
    andrea.atrass.src = "dianaatras.png";  
    andrea.atrass.onload = confirmaratrass;  
  
    andrea.der = new Image();  
    andrea.der.src = "dianade4.png";  
    andrea.der.onload = confirmarder;  
  
    andrea.izq = new Image();  
    andrea.izq.src = "dianaiz4.png";  
    andrea.izq.onload = confirmarizq;  
  
    var m = document.getElementById("mover");  
    //m.addEventListener("click", movimiento)  
    document.addEventListener("keydown", teclado);  
}  
//function add(){num++; if(num==5) {dibujar()}}  
function teclado(datos)  
{   
    var codigo = datos.keyCode;  
  
    var xAnt = andrea.x;  
    var yAnt = andrea.y;  
    var xAnta = andrea.x;  
    var yAnta = andrea.y;  
//codigo de movimiento de andrea   
  
    if(codigo==teclas.DOWN){andrea.y += andrea.velocidad;if(andrea.y>455) //|| andrea.x<140 && andrea.y>155 && andrea.y<190 || andrea.y>300 && andrea.x<350 && andrea.x>110 && andrea.x<200)  
        {andrea.y -= andrea.velocidad;}}  
    if(codigo == teclas.UP){andrea.y -= andrea.velocidad;if(andrea.y<0)// || andrea.x<140 && andrea.y<250 && andrea.x<145 || andrea.x>175 && andrea.y<245  && andrea.x<225)// ||   andrea.y> 425 && andrea.y<400 && andrea.x<130)  
        {andrea.y += andrea.velocidad;}}  
    if(codigo == teclas.RIGTH){andrea.x += andrea.velocidad;if(andrea.x>475) //|| andrea.y<260 && andrea.x>160 && andrea.x<210)  
        {andrea.x -= andrea.velocidad;}}  
    if(codigo == teclas.LEFT){andrea.x -= andrea.velocidad;if(andrea.x<0)  
        {andrea.x += andrea.velocidad;}}  
  
       if (andrea.x >= 430 && andrea.y >= 400){  
           hh =  confirmarfondo2();  
           }  
        if (andrea.x >= 430 && andrea.y <= 40) {  
               jj =  confirmarfondo3();  
            }  
        if (andrea.x >= 430 && andrea.y <= 40) {  
               jj =  confirmarfondo3();  
            }  
          
    //consi¿¿dicional de carga de optaculos mundo 2  
           
  
              
    if (mala.x >=450 && mala.y <= 0) {  
            for (var v = 0; v < 76; v++)  
            {if (andrea.x == obstaculos[v][0] && andrea.y == obstaculos[v][1] )  
            {andrea.x = xAnt;  
            andrea.y = yAnt;}}  
        }  
   if (mala.x >=70 && mala.x <=90 && mala.y <= 0) {  
            for (var v = 0; v < 51; v++)  
            {if (andrea.x == obstaculosa[v][0] && andrea.y == obstaculosa[v][1] )  
            {andrea.x = xAnta;  
            andrea.y = yAnta;}}}  
  
  
            direccion = codigo;  
            dibujar();}  
              
  
//consi¿¿dicional de carga de optaculos mundo 3  
          
  
          
function confirmarfondo()  
    {  
        fondo.imagenOK = true;  
        dibujar();  
    }  
    //carga dondos del mundo 2 y activa condicional de obstaculos  
function confirmarfondo2()  
    {          
          
        if (andrea.x >= 430 && andrea.y >= 400){  
        alert("haz ganado");  
        fondo.imagen = hh.imagen;  
        andrea.x = 0;  
        andrea.y = 0;  
        mala.x =450;  
        mala.y = 0;  
        dibujar();              
        }  
    }  
    //carga dondos del mundo 3 y activa condicional de obstaculos  
function confirmarfondo3()  
    {  
          
        if ( andrea.x >= 430 && andrea.y <= 40  ) {  
        alert("haz ganado");  
        fondo.imagen = jj.imagen;  
        andrea.x = 0;  
        andrea.y = 0;  
        mala.x =70;  
        mala.y = 0;  
        dibujar();}  
    }  
function confirmarfrente()  
    {  
        andrea.freOK = true;  
        dibujar();  
    }  
function confirmaratrass()  
    {  
        andrea.atrOK = true;  
        dibujar();  
    }  
function confirmarmaldad()  
    {  
        mala.malaOK = true;  
        dibujar();  
    }  
function confirmarder()  
    {  
        andrea.derOK = true;  
        dibujar();  
    }  
function confirmarizq()  
    {  
        andrea.izOK = true;  
        dibujar();  
    }  
function dibujar()  
{ if(fondo.imagenOK)   
    {  
    helado.drawImage(fondo.imagen, 0, 0);  
    }  
    var andreaDibujo = andrea.frente;  
    if (andrea.freOK && andrea.atrOK && andrea.derOK && andrea.izOK)   
        {  
            if (direccion == teclas.UP)  
            {  
            andreaDibujo = andrea.atrass;  
            }  
            if (direccion == teclas.DOWN)  
            {  
                andreaDibujo = andrea.frente;  
            }  
            if (direccion == teclas.RIGTH)  
            {  
                andreaDibujo = andrea.der;  
            }  
            if (direccion == teclas.LEFT)  
            {  
                andreaDibujo = andrea.izq;  
            }  
        }  
        helado.drawImage(andreaDibujo, andrea.x, andrea.y);      
if(mala.malaOK)   
    {  
    helado.drawImage(mala.malas, mala.x, mala.y);  
    }  
    }

Cesar David Ramírez Dimaté

student•

Tarea "Bloqueo de obstáculos." (Documentado)

HTML

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
        <title>La Leyenda de Tifis</title>  
        <style type="text/css">  
            body {  
                background: black;  
                color: white;  
                text-align: center;  
            }  
        </style>  
        <script type="text/javascript" src="js/tifis.js"></script>  
    </head>  
    <body>  
        <h5 id="posicion"></h5>  
        <canvas id="campo" width="500" height="500"></canvas>  
        <p>Mueve a Diana contra Liz usando las flechas del teclado</p>  
        <script type="text/javascript">  
            inicio();  
        </script>  
    </body>  
</html>

var tablero;  
  
var teclas = { // Valores por defecto para las flechas del teclado.  
    UP: 38,  
    DOWN: 40,  
    LEFT: 37,  
    RIGHT: 39  
};  
  
var fondo = {  
    imagenURL: "img/fondo.png",  
    imagenOK: false  
};  
  
var tifis = {  
    x: 100,  
    y: 100,  
    frenteURL: "img/diana-frente.png", // Nombre del archivo que declara a Diana de Frente  
    frenteOK: false, // Si la imagen ya cargó o no.  
    atrasURL: "img/diana-atras.png",  
    atrasOK: false,  
    izqURL: "img/diana-izq.png",  
    izqOK: false,  
    derURL: "img/diana-der.png",  
    derOK: false,  
    velocidad: 50 // Cantidad de pixeles que se va a mover Diana al oprimir las fechas del teclado.  
};  
  
var liz = {  
    x: 400,  
    y: 400,  
    imgURL: "img/liz.png",  
    imgOK: false  
};  
  
function inicio() {  
    var canvas = document.getElementById("campo");  
    tablero = canvas.getContext("2d");  
    fondo.imagen = new Image(); // Se crea un objeto de tipo Imagen.  
    fondo.imagen.src = fondo.imagenURL; // Se agrega la foto fondo.png  
    fondo.imagen.onload = confirmarFondo; // Cuando se cargue la imagen dispara la función confirmarFondo()  
  
    tifis.frente = new Image();  
    tifis.frente.src = tifis.frenteURL;  
    tifis.frente.onload = confirmarFrente;  
  
    tifis.atras = new Image();  
    tifis.atras.src = tifis.atrasURL;  
    tifis.atras.onload = confirmarAtras;  
  
    tifis.izquierda = new Image();  
    tifis.izquierda.src = tifis.izqURL;  
    tifis.izquierda.onload = confirmarIzquierda;  
  
    tifis.derecha = new Image();  
    tifis.derecha.src = tifis.derURL;  
    tifis.derecha.onload = confirmarDerecha;  
  
    liz.imagen = new Image();  
    liz.imagen.src = liz.imgURL;  
    liz.imagen.onload = confirmarLiz;  
  
    document.addEventListener("keydown", teclado);  
}  
  
function confirmarFondo() {  
    fondo.imagenOK = true;  
    //dibujar();  
}  
  
function confirmarFrente() {  
    tifis.frenteOK = true;  
    //dibujar();  
}  
  
function confirmarAtras() {  
    tifis.atrasOK = true;  
    console.log("Dibuja");  
    //dibujar();  
}  
  
function confirmarIzquierda() {  
    tifis.izqOK = true;  
    //dibujar();  
}  
  
function confirmarDerecha() {  
    tifis.derOK = true;  
    //dibujar();  
}  
  
function confirmarLiz() {  
    liz.imgOK = true;  
    dibujar(); // Se coloca para que dibuje el fondo, tifis de frente y a liz sin necesidad de oprimir una tecla. Es la última que se define en inicio()  
}  
  
function dibujar(direccion) {  
    // El orden define la forma en cómo será dibujado cada elemento de forma lineal.  
    // Capa 1: Fondo  
    if(fondo.imagenOK == true)   
        tablero.drawImage(fondo.imagen, 0, 0); // Dibuja la imagen en la posición (0,0)  
  
    // Capa 2: Tifis  
    var tifisOrientada = tifis.frente;  
  
    if(tifis.frenteOK && tifis.atrasOK && tifis.derOK && tifis.izqOK) {  
        if(direccion == teclas.DOWN)  
            tifisOrientada = tifis.frente;  
        if(direccion == teclas.UP)  
            tifisOrientada = tifis.atras;  
        if(direccion == teclas.LEFT)  
            tifisOrientada = tifis.izquierda;  
        if(direccion == teclas.RIGHT)  
            tifisOrientada = tifis.derecha;  
    }  
  
    tablero.drawImage(tifisOrientada, tifis.x, tifis.y); // Dibuja la imagen.  
  
    // Capa 3: Liz  
    if(liz.imgOK) // Como este valor es booleano, no es necesario el == true ya que el if hace la validación.  
        tablero.drawImage(liz.imagen, liz.x, liz.y);  
  
    posicion.innerText = "(X, Y): (" + tifis.x + " , " + tifis.y + ")";  
}  
  
function teclado(evento) { // ¿Qué tecla fue la que se oprimió?  
    var codigo_tecla = evento.keyCode;  
    if(codigo_tecla == teclas.UP) {  
        tifis.y -= tifis.velocidad;  
        if(tifis.y < 0) // Define el extremo del tablero hacia arriba.  
            tifis.y = 0;  
        bloquearArr();  
    }  
          
    if(codigo_tecla == teclas.DOWN) {  
        tifis.y += tifis.velocidad;  
        if(tifis.y >= 450) // Define el extremo del tablero hacia abajo.  
            tifis.y = 450;  
        //bloqueA();  
        bloquearAbj();  
    }  
          
    if(codigo_tecla == teclas.RIGHT) {  
        tifis.x += tifis.velocidad;  
        if(tifis.x >= 450) // Define el extremo del tablero hacia la derecha.  
            tifis.x = 450;  
        bloquearDer();  
    }  
  
    if(codigo_tecla == teclas.LEFT) {  
        tifis.x -= tifis.velocidad;  
        if(tifis.x < 0) // Define el extremo del tablero hacia la izquierda.  
            tifis.x = 0;  
        bloquearIzq();  
    }  
  
    dibujar(codigo_tecla);  
}  
  
function bloquearDer() {  
    // Bloquear primer obstaculo al moverse a la derecha.  
    if(tifis.x > 150 && tifis.x < 250 && tifis.y < 250) {  
        tifis.x = 150;  
        tifis.y;  
    }  
    // Bloquear tercer obstaculo al moverse a la derecha.  
    if(tifis.y > 300 && tifis.y < 400) {  
        tifis.x = 100;  
        tifis.y;  
    }  
}  
  
function bloquearIzq() {  
    // Bloquear primer obstaculo al moverse a la izquierda.  
    if(tifis.x > 150 && tifis.x < 250 && tifis.y < 250) {  
        tifis.x = 250;  
        tifis.y;  
    }  
    // Bloquear segundo obstaculo al moverse a la izquierda.  
    if(tifis.x < 150 && tifis.y > 150 && tifis.y < 250) {  
        tifis.x = 150;  
        tifis.y;  
    }  
}  
  
function bloquearArr() {  
    // Bloquear primer obstaculo al moverse hacia arriba.  
    if(tifis.x > 150 && tifis.x < 250 && tifis.y > 150 && tifis.y < 250) {  
        tifis.x;  
        tifis.y = 250;  
    }  
    // Bloquear segundo obstaculo al moverse hacia arriba.  
    if(tifis.y > 150 && tifis.y < 250 && tifis.x < 150) {  
        tifis.x;  
        tifis.y = 250;  
    }  
    // Bloquear tercer obstaculo al moverse hacia arriba.  
    if(tifis.x > 100 && tifis.y > 300 && tifis.y < 400) {  
        tifis.x;  
        tifis.y = 400;  
    }  
}  
  
function bloquearAbj() {  
    // Bloquear segundo obstaculo al moverse hacia arriba.  
    if(tifis.x < 150 && tifis.y > 150 && tifis.y < 250) {  
        tifis.x;  
        tifis.y = 150;  
    }  
    // Bloquear tercer obstaculo al moverse hacia abajo.  
    if(tifis.x > 100 && tifis.y > 300 && tifis.y < 400) {  
        tifis.x;  
        tifis.y = 300;  
    }  
}

Daniel Carrasco

student•

//DECLARACION DE VARIABLES  
var tablero;  
var direccion;  
var teclas= {  
    up:38,  
    down:40,  
    left:37,  
    right: 39  
};  
var fondo = {  
    imagenURL: "fondo.png",  
    imagenOK: false  
};  
var tifis = {  
    x:100,  
    y:100,  
    frenteURL: "diana-frente.png",  
    frenteOK: false,  
    atrasURL: "diana-atras.png",  
    atrasOK: false,  
    derURL: "diana-der.png",  
    derOK: false,  
    izqURL: "diana-izq.png",  
    izqOK: false,  
    velocidad: 50  
};  
var liz = {  
    lizURL: "liz.png",  
    lizOK: false,  
    x:400,  
    y:400  
};  
//DECLARACION DE FUNCIONES  
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;  
    tifis.atras = new Image();  
    tifis.atras.src = tifis.atrasURL;  
    tifis.atras.onload = confirmarAtras;  
    tifis.der = new Image();  
    tifis.der.src = tifis.derURL;  
    tifis.der.onload = confirmarDer;  
    tifis.izq = new Image();  
    tifis.izq.src = tifis.izqURL;  
    tifis.izq.onload = confirmarIzq;  
    liz.lizy = new Image();  
    liz.lizy.src = liz.lizURL;  
    liz.lizy.onload = confirmarLiz;  
    document.addEventListener("keydown", teclado);  
}  
//MOVIMIENTOS CON EL TECLADO Y LOCALIZACION DE OBSTACULOS  
function teclado (datos)  
{  
    var codigo = datos.keyCode;  
if(codigo==teclas.up)  
    {  
        tifis.y-=tifis.velocidad;  
          
    if(tifis.y<= -1)  
        {  
            tifis.y +=tifis.velocidad;  
        }  
    if(tifis.y ==350&& tifis.x>=150 && tifis.x>0)  
        {  
            tifis.y +=tifis.velocidad;  
        }  
    if(tifis.y <=200 && tifis.x==200)  
        {  
            tifis.y +=tifis.velocidad;  
        }  
    if(tifis.y ==200 && tifis.x <150)  
        {  
            tifis.y +=tifis.velocidad;  
        }  
    }  
if(codigo==teclas.down)  
    {  
        tifis.y +=tifis.velocidad;  
    if(tifis.y>=499)  
        {  
            tifis.y -=tifis.velocidad;  
        }  
    if(tifis.y==350 && tifis.x>=150 && tifis.x>0)  
        {  
            tifis.y -=tifis.velocidad;  
        }  
    if(tifis.y ==200 && tifis.x <150)  
        {  
            tifis.y -=tifis.velocidad;  
        }  
    }  
if(codigo==teclas.right)  
    {  
        tifis.x += tifis.velocidad;  
    if(tifis.x>=500)  
        {  
            tifis.x -= tifis.velocidad;  
        }  
    if(tifis.y==350 && tifis.x>=150 && tifis.x>0)  
        {  
            tifis.x -= tifis.velocidad;  
        }  
    if(tifis.x==200 && tifis.y>=0 && tifis.y<=200)  
        {  
            tifis.x -= tifis.velocidad;  
        }  
    }  
if(codigo==teclas.left)  
        {  
            tifis.x -= tifis.velocidad;  
    if(tifis.x<=-1)  
        {  
            tifis.x += tifis.velocidad;  
        }  
    if(tifis.x==200 && tifis.y>=0 && tifis.y<=200)  
        {  
            tifis.x += tifis.velocidad;  
        }  
    if (tifis.x<=200 && tifis.y==200)  
        {  
            tifis.x += tifis.velocidad;  
        }  
    }  
      
    direccion=codigo;  
    dibujar();  
}  
function confirmarFondo()  
{  
    fondo.imagenOK =true;  
    dibujar();  
}  
function confirmarAtras()  
{  
    tifis.atrasOK =true;  
    dibujar();  
}  
function confirmarIzq()  
{  
    tifis.izqOK =true;  
    dibujar();  
}  
function confirmarDer()  
{  
    tifis.derOK =true;  
    dibujar();  
}  
function confirmarFrente()  
{  
    tifis.frenteOK =true;  
    dibujar();  
}  
function confirmarLiz()  
{  
    liz.lizOK = true;  
    dibujar();  
}  
function dibujar()  
{  
    if(fondo.imagenOK==true)  
    {  
        tablero.drawImage(fondo.imagen,0,0);  
    }  
var tifiDibujo= tifis.frente;  
    if(tifis.frenteOK && tifis.atrasOK && tifis.derOK && tifis.izqOK)  
    {  
        if(direccion==teclas.up)  
        {  
            tifiDibujo = tifis.atras;  
              
        }  
        if(direccion==teclas.down)  
        {  
            tifiDibujo = tifis.frente;  
        }  
        if(direccion==teclas.left)  
        {  
            tifiDibujo = tifis.izq;  
        }  
        if(direccion==teclas.right)  
        {  
            tifiDibujo = tifis.der;  
        }  
        tablero.drawImage(tifiDibujo,tifis.x,tifis.y);  
    }  
if(liz.lizOK ==true)  
    {  
        tablero.drawImage(liz.lizy,liz.x,liz.y);  
    }  
}

Carlos Loureda Parrado

student•

Es importante destacar que la propia clase de js keyEvent trae definidas las constantes para las teclas, así no tenemos que duplicar y crear nuestras propias variables. Para arriba podríamos usar "KeyEvent.DOM_VK_UP"

Christian roas

student•

Limites a las cajas y bordes del canvas

function teclado(datos){  
    var codigo= datos.keyCode;  
    if(codigo== teclas.UP){  
        tifis.y -=tifis.velocidad;  
        LimitesAA();  
          
    }else if (codigo == teclas.DOWN) {  
        tifis.y +=tifis.velocidad;  
        LimitesAA();  
          
    }else if (codigo == teclas.LEFT) {  
        tifis.x -=tifis.velocidad;  
        limitesDI();  
          
    }else if (codigo == teclas.RIGHT) {  
          
        tifis.x +=tifis.velocidad;  
        limitesDI();  
    }  
      
    dibujar(codigo);  
}  
function limitesDI(){ //limitis izquierda y derecha  
    if(tifis.x +=tifis.velocidad){ //limite derecha  
        if(tifis.x > 160 && tifis.x < 250 &&tifis.y < 250 )  
        {  
                tifis.x = 170;  
            }  
            if(tifis.y > 300 && tifis.y < 400 && tifis.x > 120){  
        tifis.x= 120;  
            }  
        if (tifis.x>=470) {  
                tifis.x=470  
        }   
    }  
    if(tifis.x -=tifis.velocidad){ // limite izquierda  
        if(tifis.x > 160 && tifis.x < 250 &&tifis.y < 250 )  
        {  
                tifis.x = 250;  
            }  
            if(tifis.y>159 && tifis.x<135 && tifis.y<250){  
            tifis.x = 136;  
        }  
        if (tifis.x<=0) {  
                tifis.x=0  
        }   
    }    
}  
function LimitesAA(){ //limites arriba y abajo  
    if(tifis.y +=tifis.velocidad){ //limites abajo  
        if(tifis.y>159 && tifis.x<135 && tifis.y<250){  
            tifis.y = 160;  
        }  
        if(tifis.y>300 && tifis.x>115 && tifis.y < 400){  
            tifis.y=310;  
        }  
        if(tifis.y>=460){  
            tifis.y=460  
        }      
    }  
    if(tifis.y -=tifis.velocidad){//limites arriba  
        if(tifis.y>151 && tifis.x<135 && tifis.y<250){  
            tifis.y = 250;  
        }  
        if(tifis.y>300 && tifis.x>115 && tifis.y < 400){  
            tifis.y=400;  
        }  
        if(tifis.x > 160 && tifis.x < 235 &&tifis.y < 250 )  
        {  
        tifis.y = 250;  
        }  
        if(tifis.y<=0){  
            tifis.y=0  
        }      
    }  
}

Frank ReyCo

student•

por favor, alguien podría decirme cual es la diferencia de declarar una función con parámetro y una sin parámetro pero declaras la variable dentro, un ejemplo para que me entiendan mejor:
ejemplo:
function tecla(estado) ó function tecla()
{} { var estado; }

Danelia Sanchez

student•

Creo que te refieres al ámbito de variables: variables globales y locales. Una variable global se puede definir y utilizar en cualquier parte del código, incluso en funciones. Una o varias funciones pueden emplear una misma variable global. En el otro caso, donde se declara una variable dentro de una función (como en tu segundo ejemplo), dicha variable es local, lo que quiere decir que sólo la propia función puede emplearla para realizar su tarea. Si intentas usarla fuera de la función, habrá error en el código.

Ricardo Diez

student•

Bueno confieso que me siento muy contento de haberme halado los cabellos hasta comprender como solucionar lo de las colisiones, en fin les dejo mi solución ya optimizada con la implementación de prototype
HTML:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Juego Canvas</title> <style> body{ background-color: #000; color: #fff; } h2{ text-align: center; } #campo{ margin-top: 2%; margin-left: 32%; } #mover{ margin-left: 47%; } </style> </head> <body> <h2>Desarrollando Juego con Canvas</h2> <canvas id="campo" width="500" height="500" data-lineas-grilla="30"></canvas> </body> </html> <script type="text/javascript" src="js/canvas.js"></script> <script type="text/javascript" src="js/juego_canvas.js"></script> ``` ```

1er. archivo JS

    for(linea = 0; linea <= this.canvasCantidadLinea(); linea++)  
    {  
        punto = (linea * this.canvasLineasGrilla) ;  
        this.canvasArea.beginPath();  
        this.canvasArea.strokeStyle = "#AAA";  
        this.canvasArea.moveTo(punto, 0);  
        this.canvasArea.lineTo(punto, this.canvasHeight);  
        this.canvasArea.stroke();  
        this.canvasArea.closePath();  
    }  

    for(linea = 0; linea <= this.canvasCantidadLinea(); linea++)  
    {  
        punto = (linea * this.canvasLineasGrilla);  
        this.canvasArea.beginPath();  
        this.canvasArea.strokeStyle = "#AAA";  
        this.canvasArea.moveTo(0, punto);  
        this.canvasArea.lineTo(this.canvasWidth , punto);  
        this.canvasArea.stroke();  
        this.canvasArea.closePath();  
    }  
};  
this.pintarGrillaDiagonal=function(){//funcion para pintar la grilla  
    var linea, punto  

    for(linea = 0; linea <= (this.canvasCantidadLinea()*2); linea++)  
    {  
        punto = (linea * this.canvasLineasGrilla) ;  
        this.canvasArea.beginPath();  
        this.canvasArea.strokeStyle = "#AAA";  
        this.canvasArea.moveTo(punto, 0);  
        this.canvasArea.lineTo(0, punto);  
        this.canvasArea.stroke();  
        this.canvasArea.closePath();  
    }  

    for(linea = 0; linea <= (this.canvasCantidadLinea()*2); linea++)  
    {  
        punto = (linea * this.canvasLineasGrilla);  
        this.canvasArea.beginPath();  
        this.canvasArea.strokeStyle = "#AAA";  
        this.canvasArea.moveTo((this.canvasWidth -punto) , 0);  
        this.canvasArea.lineTo((this.canvasWidth ), (punto));  
        this.canvasArea.stroke();  
        this.canvasArea.closePath();  
    }  
};  
this.pintarLineasEjercicio=function(){  
    this.canvasArea.strokeStyle = "red";  
    this.canvasArea.moveTo(50,150);//paso las coordenadas del punto de partida de la linea  
    this.canvasArea.lineTo(200,50);//paso las coordenadas del punto de destino de la linea  
    this.canvasArea.moveTo(200,150);  
    this.canvasArea.lineTo(50,50);  
    this.canvasArea.moveTo(50,50);  
    this.canvasArea.lineTo(50,150);  
    this.canvasArea.moveTo(200,50);  
    this.canvasArea.lineTo(200,150)  
    this.canvasArea.moveTo(50,50);  
    this.canvasArea.lineTo(200,50);  
    this.canvasArea.moveTo(50,150);  
    this.canvasArea.lineTo(200,150);  
    this.canvasArea.moveTo(125,50);  
    this.canvasArea.lineTo(125,150);  
    this.canvasArea.moveTo(50,100);  
    this.canvasArea.lineTo(200,100);  
};  
this.pintarCirculo=function(parametros){  
    this.canvasArea.strokeStyle = parametros.borderColor;  
    this.canvasArea.arc(parametros.ejeX,parametros.ejeY,parametros.radio,parametros.radian,parametros.direccionContraReloj);  
    this.canvasArea.fillStyle=parametros.backgroundColor;  
    this.canvasArea.fill();  
};  
this.pintarImg=function(parametros){  
    var img = new Image();  
    img.src = parametros.src;  
    var canvasArea = this.canvasArea;  
    img.onload = function () {  
        parametros.imgOnload=true;  
        if(parametros.imgOnload){  
            canvasArea.drawImage(img,parametros.ejeX,parametros.ejeY);  
        }  
    }  
};

}

2do Archivo JS

},  
colisiones_down:{//cuando diana va hacia abajo solo tiene posibilidad de colision con el obstaculo b y c  
    colision_obstaculo_b: function (img,obj) {  
        /*aca no puedo hacer referencia a obstaculos con el this debido a que  colisiones es un objeto entonces si aplico this dentro de el solo llamara a los elementos del objeto  
         * colisiones y no del objeto canvas por eso mi solucion fue pasarle el objeto Canvas como parametro a la funcion*/  
        if(img.ejeY!=obj.obstaculos.obstaculo_b.ejeY || img.ejeX > obj.obstaculos.obstaculo_b.width){  
            return false;  
        }else{  
            return true;  
        }  
    },  
    colision_obstaculo_c: function (img,obj) {  
        if(img.ejeY != obj.obstaculos.obstaculo_c.ejeY || img.ejeX < (obj.obstaculos.obstaculo_c.ejeX-obj.obstaculos.obstaculo_c.width)){  
            return false;  
        }else{  
            return true;  
        }  
    }  

},  
colisiones_left:{//cuando diana va hacia la izquierda solo tiene posibilidad de colision con el obstaculo a y b  
    colision_obstaculo_a: function (img,obj) {  
        /*aca no puedo hacer referencia a obstaculos con el this debido a que  colisiones es un objeto entonces si aplico this dentro de el solo llamara a los elementos del objeto  
         * colisiones y no del objeto canvas por eso mi solucion fue pasarle el objeto Canvas como parametro a la funcion*/  
        if(img.ejeX !=obj.obstaculos.obstaculo_a.ejeXLeft() || img.ejeY > obj.obstaculos.obstaculo_a.height){  
            return false;  
        }else{  
            return true;  
        }  
    },  
    colision_obstaculo_b: function (img,obj) {  
        if(img.ejeY != (obj.obstaculos.obstaculo_b.ejeY+obj.imagenes.dianaIzquierda.width) ||  img.ejeX != (obj.obstaculos.obstaculo_b.width+obj.imagenes.dianaIzquierda.width)){  
            return false;  
        }else{  
            return true;  
        }  
    }  

},  
colisiones_right:{//cuando diana va hacia la derecha solo tiene posibilidad de colision con el obstaculo a y c  
    colision_obstaculo_a: function (img,obj) {  
        /*aca no puedo hacer referencia a obstaculos con el this debido a que  colisiones es un objeto entonces si aplico this dentro de el solo llamara a los elementos del objeto  
         * colisiones y no del objeto canvas por eso mi solucion fue pasarle el objeto Canvas como parametro a la funcion*/  
        if(img.ejeX !=obj.obstaculos.obstaculo_a.ejeX || img.ejeY > obj.obstaculos.obstaculo_a.height){  
            return false;  
        }else{  
            return true;  
        }  
    },  
    colision_obstaculo_c: function (img,obj) {  
        if(img.ejeY != (obj.obstaculos.obstaculo_c.ejeY+obj.obstaculos.obstaculo_c.height) || img.ejeX < (obj.obstaculos.obstaculo_c.ejeX-obj.obstaculos.obstaculo_c.width-obj.imagenes.dianaDerecha.width)){  
            return false;  
        }else{  
            return true;  
        }  
    }  

}

};
Canvas.prototype.mover=function(datos,parametros){
var img;
if(this.keyValid(datos)){//valido que solo funcione con las felchas del teclado
//si va hacia arriba
if(datos.keyCode == this.teclasMovimiento.up){
img=this.imagenes.dianaAtras;
if(img.ejeY != this.obstaculos.limiteMin){
if(!this.colisiones.colisiones_up.colision_obstaculo_a(img,this)) {
if(!this.colisiones.colisiones_up.colision_obstaculo_b(img,this)){
if(!this.colisiones.colisiones_up.colision_obstaculo_c(img,this)){
this.restarDianaEjeY();
}
}
}
}
}
//si va hacia abajo
if(datos.keyCode == this.teclasMovimiento.down){
img=this.imagenes.dianaFrente;
if(img.ejeY != this.obstaculos.limiteMax) {
if(!this.colisiones.colisiones_down.colision_obstaculo_b(img,this)){
if(!this.colisiones.colisiones_down.colision_obstaculo_c(img,this)){
this.sumarDianaEjeY();
}
}

        }  
    }  
    //si va hacia la izquierda  
    if(datos.keyCode == this.teclasMovimiento.left){  
        img=this.imagenes.dianaIzquierda;  
        if(img.ejeX != this.obstaculos.limiteMin) {  
            if(!this.colisiones.colisiones_left.colision_obstaculo_a(img,this)){  
                if(!this.colisiones.colisiones_left.colision_obstaculo_b(img,this)) {  
                    this.restarDianaEjeX();  
                }  
            }  
        }  
    }  
    //si va hacia la derecha  
    if(datos.keyCode == this.teclasMovimiento.right){  
        img=this.imagenes.dianaDerecha;  
        if(img.ejeX != this.obstaculos.limiteMax) {  
            if(!this.colisiones.colisiones_right.colision_obstaculo_a(img,this)) {  
                if(!this.colisiones.colisiones_right.colision_obstaculo_c(img,this)){  
                    this.sumarDianaEjeX();  
                }  
            }  
        }  
    }  

    this.pintarTodo(parametros,img);  

}

};
Canvas.prototype.pintarTodo=function(imagenes,who){
this.pintarImg(imagenes.fondo);
this.pintarImg(who);
this.pintarImg(imagenes.lizFrente);
};
Canvas.prototype.restarDianaEjeY=function(){
this.imagenes.dianaAtras.ejeY-=this.imagenes.dianaAtras.velocidad;
this.imagenes.dianaFrente.ejeY-=this.imagenes.dianaFrente.velocidad;
this.imagenes.dianaDerecha.ejeY-=this.imagenes.dianaDerecha.velocidad;
this.imagenes.dianaIzquierda.ejeY-=this.imagenes.dianaIzquierda.velocidad;
}
Canvas.prototype.sumarDianaEjeY=function(){
this.imagenes.dianaAtras.ejeY+=this.imagenes.dianaAtras.velocidad;
this.imagenes.dianaFrente.ejeY+=this.imagenes.dianaFrente.velocidad;
this.imagenes.dianaDerecha.ejeY+=this.imagenes.dianaDerecha.velocidad;
this.imagenes.dianaIzquierda.ejeY+=this.imagenes.dianaIzquierda.velocidad;
}
Canvas.prototype.restarDianaEjeX=function(){
this.imagenes.dianaAtras.ejeX-=this.imagenes.dianaAtras.velocidad;
this.imagenes.dianaFrente.ejeX-=this.imagenes.dianaFrente.velocidad;
this.imagenes.dianaDerecha.ejeX-=this.imagenes.dianaDerecha.velocidad;
this.imagenes.dianaIzquierda.ejeX-=this.imagenes.dianaIzquierda.velocidad;
}
Canvas.prototype.sumarDianaEjeX=function(){
this.imagenes.dianaAtras.ejeX+=this.imagenes.dianaAtras.velocidad;
this.imagenes.dianaFrente.ejeX+=this.imagenes.dianaFrente.velocidad;
this.imagenes.dianaDerecha.ejeX+=this.imagenes.dianaDerecha.velocidad;
this.imagenes.dianaIzquierda.ejeX+=this.imagenes.dianaIzquierda.velocidad;
}

canvas_juego.pintarTodo(canvas_juego.imagenes,canvas_juego.imagenes.dianaFrente);

document.addEventListener('keydown',function(datos){//datos en este caso devuelve la informacion relacionada con evento keyDown por Ejm: que tecla se marco
canvas_juego.mover(datos,canvas_juego.imagenes);
});

Ricardo Diez

student•

A la orden para cualquier comentario, explicación o sugerencia de mejora para mi código.

Roberto Esqueda

student•

Tengo un problema, no me aparece Liz. ¿Alguien sabe cuál es el error? Llevo más de 10 minutos buscando lo y no sé que es lo que le falta:

var tablero;  
var fondo = {  
    imagenURL: "fondo.png" ,  
    imagenOK: false  
};  
var tifis = {  
    x: 50,  
    y: 50,  
    frenteURL: "diana-frente.png",  
    frenteOK: false  
};  
var liz = {  
    lizURL: "liz.png",  
    lizOK: false ,  
    x: 400,  
    Y: 200  
};  
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;  
    liz.lizy = new Image();  
    liz.lizy.src = liz.lizURL;  
    liz.lizy.onload = confirmarLiz;  
}  
function confirmarFondo()  
{  
    fondo.imagenOK = true;  
    dibujar();  
}  
function confirmarFrente()  
{  
    tifis.frenteOK = true;  
    dibujar();  
}  
function confirmarLiz()  
{  
    liz.lizOK = true;  
    dibujar();  
}  
function dibujar()  
{  
    if(fondo.imagenOK)  
    {  
        tablero.drawImage(fondo.imagen, 0, 0);  
    }  
    if(tifis.frenteOK)  
    {  
        tablero.drawImage(tifis.frente, tifis.x, tifis.y)  
    }      
    //Capa 3: Liz  
    //Como LizOK es booleana (true o false), no necesito comparar  
    if(liz.lizOK)  
    {  
        tablero.drawImage(liz.lizy, liz.x, liz.y);  
    }  
}

Danelia Sanchez

student•

En esta parte:

var liz = {  
    lizURL: "liz.png",  
    lizOK: false ,  
    x: 400,  
    Y: 200  
};

la variable y está en mayúscula. Javascript es sensible a mayúsculas y minúsculas. Saludos.

Fernando López Moreno

student•

Tarea hecha, profesor. La subí a mi servidor, para que puedan ver el ejemplo ejecutándose.

Cesar Fernando Beltran Garzon

student•

Hola, esta es mi tarea.

var tablero, tifiDibujo;      
var abajo = 0, arriba = 1, derecha = 2, izquierda = 3;  
  
var teclas = {  
    UP: 38,  
    DOWN: 40,  
    LEFT: 37,  
    RIGHT: 39  
};  
  
var fondo = {  
    imagenURL: "fondo.png",  
    imagenOK: false // falso si no ha cargado, verdadero si ya cargo  
};  
  
var tifis = {  
    x: 400,  
    y: 200,  
    posicionTifis: ["diana-frente.png", "diana-atras.png", "diana-der.png", "diana-izq.png"],      
    posicion: new Array(),  
    cargaTifisOK: [false,false,false,false],  
    velocidad: 50  
}  
  
var liz = {  
    x: 100,  
    y: 100,  
    lizURL: "liz.png",  
    lizOK: false  
}  
  
var limitesCanvas = {  
    superior: 0,  
    inferior: 450,  
    derecha: 450,  
    izquierda: 0  
};  
  
var obstaculos = [    [0,200],[50,200],[100,200],[150,350],[200,0],  
                    [200,50],[200,100],[200,150],[200,200],[200,350],  
                    [250,350],[300,350],[350,350],[400,350],[450,350]  ];  
  
function inicio()  
{   
    var canvas = document.getElementById("campo");  
    tablero = canvas.getContext("2d");  
      
    // Dibujar fondo  
    fondo.imagen = new Image();   
    fondo.imagen.src = fondo.imagenURL;   
    fondo.imagen.onload = confirmarFondo;  
      
    // Dibujar Diana  
    for (var a = 0; a <= 3; a++)  
    {           
        tifis.posicion[a] = new Image();          
        tifis.posicion[a].src = tifis.posicionTifis[a];              
        tifis.posicion[a].onload = confirmarTifis(a);          
    }          
  
    // Dibujar Liz      
    liz.imagen = new Image();   
    liz.imagen.src = liz.lizURL;  
    liz.imagen.onload = confirmarLiz;             
  
    // Mover a Diana con teclado      
    document.addEventListener("keydown", teclado);  
}  
  
function confirmarFondo()  
{  
    fondo.imagenOK = true;      
    dibujar();  
}  
  
function confirmarTifis(n)  
{     
    tifis.cargaTifisOK[n] = true;  
    tifiDibujo = tifis.posicion[abajo];      
    dibujar();  
}  
  
function confirmarLiz()  
{  
    liz.lizOK = true;  
    dibujar();  
}  
  
function dibujar()  
{          
    //Capa 1: Fondo  
    if (fondo.imagenOK == true)   
    {  
        tablero.drawImage(fondo.imagen, 0, 0);      
    }  
  
    //Capa 2: Tifis      
    if (tifis.cargaTifisOK[abajo] && tifis.cargaTifisOK[arriba] && tifis.cargaTifisOK[derecha] && tifis.cargaTifisOK[izquierda])  
    {           
        tablero.drawImage(tifiDibujo, tifis.x, tifis.y);  
    }  
  
    //Capa 3: Liz  
    if (liz.lizOK)   
    {  
        tablero.drawImage(liz.imagen, liz.x, liz.y);      
    }  
}  
  
function validarObstaculos(x,y){      
    for(var i = 0; i < obstaculos.length; i++ )  
    {  
        if((tifis.x == obstaculos[i][0]) && (tifis.y == obstaculos[i][1]))  
        {  
            tifis.x = x;  
            tifis.y = y;          
        }  
    }      
}  
  
function teclado(datos)  
{  
    // Guardo en "direccion" el numero de la tecla oprimida  
    var direccion = datos.keyCode;  
  
    if (direccion == teclas.UP)  
    {  
        // Limites canvas  
        if(tifis.y > limitesCanvas.superior)  
        {      
            tifis.y   -= tifis.velocidad;          
            validarObstaculos(tifis.x, tifis.y + tifis.velocidad);    // limites obstaculos                              
            tifiDibujo = tifis.posicion[arriba];  
        }  
    }  
    if (direccion == teclas.DOWN)  
    {  
        // Limites canvas  
        if(tifis.y < limitesCanvas.inferior)  
        {  
            tifis.y   += tifis.velocidad;  
            validarObstaculos(tifis.x, tifis.y - tifis.velocidad);    // limites obstaculos      
            tifiDibujo = tifis.posicion[abajo];  
        }  
    }  
    if (direccion == teclas.RIGHT)  
    {      
        // Limites canvas  
        if(tifis.x < limitesCanvas.derecha)  
        {   
            tifis.x   += tifis.velocidad;  
            validarObstaculos(tifis.x - tifis.velocidad, tifis.y);    // limites obstaculos  
            tifiDibujo = tifis.posicion[derecha];  
        }          
    }  
    if (direccion == teclas.LEFT)  
    {  
        // Limites canvas  
        if(tifis.x > limitesCanvas.izquierda)  
        {  
            tifis.x   -= tifis.velocidad;      
            validarObstaculos(tifis.x + tifis.velocidad, tifis.y);    // limites obstaculos  
            tifiDibujo = tifis.posicion[izquierda];  
        }  
    }  
  
    dibujar();  
}

Gracias.

Jason David Cubides Fajardo

student•

EL PROBLEMA SERIA SI CAMBIAS LA VELOCIDAD DE MOVIMIENTO

Santiago Iván Almaraz Segovia

student•

Codigo HTML

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
        <title>The legend of tifis</title>  
        <link rel="stylesheet" type="text/css" href="estilo.css">  
        <script type="text/javascript" src="tifis.js"></script>  
    </head>  
    <body>  
        <canvas id="campo" width="500" height="500"></canvas>  
        <p>Mueve a Tifis contra Liz usando las flechas del teclado</p>  
        <script type="text/javascript">inicio();</script>  
    </body>  
</html>

Codigo css

body  
    {  
        background: black;  
        text-align: center;  
        color: white;  
    }

Codigo js

var tablero;  
var direccion;  
var num;  
var xRes, yRes;  
var fondo =   
{  
    imagenUrl : "fondo.png",  
    imagenOK:false  
};  
var tifis =   
{  
    x: 0,  
    y: 0,  
    velocidad: 10,  
    imgUrl: ["diana-frente.png","diana-atras.png","diana-izq.png","diana-der.png"],  
    img: [new Image(),new Image(),new Image(),new Image()],  
    imgok: [false,false,false,false]  
};  
var liz =   
{  
    x: 300,  
    y: 200,  
    lizURL : "liz.png",  
    lizOK: false  
};  
var teclas =   
{  
    UP: 38,  
    DOWN: 40,  
    LEFT: 37,  
    RIGHT: 39  
};  
function inicio()  
{  
    var canvas = document.getElementById("campo");  
    tablero = canvas.getContext("2d");  
    fondo.imagen = new Image();  
    fondo.imagen.src = fondo.imagenUrl;  
    fondo.imagen.onload = confirmarFondo;  
  
    for(num = 0;num < 4; num++)  
    {  
        tifis.img[num].src = tifis.imgUrl[num];  
        tifis.img[num].onload = confirmarImg(num);  
    }  
  
    liz.lizy = new Image();  
    liz.lizy.src = liz.lizURL;  
    liz.lizy.onload = confirmarliz;  
  
    document.addEventListener("keydown", teclado);  
}  
function teclado(datos)   
{  
    var codigo = datos.keyCode;  
    if (codigo == teclas.UP)  
    {  
        if (codigo == direccion)  
        {  
            xRes = tifis.x;  
            yRes = tifis.y;  
            tifis.y -= tifis.velocidad;  
        }  
    }  
    if (codigo == teclas.DOWN)  
    {  
        if (codigo == direccion)  
        {  
            xRes = tifis.x;  
            yRes = tifis.y;  
            tifis.y += tifis.velocidad;  
        }  
          
    }  
    if (codigo == teclas.LEFT)  
    {  
        if (codigo == direccion)  
        {  
            xRes = tifis.x;  
            yRes = tifis.y;  
            tifis.x -= tifis.velocidad;  
        }  
    }  
    if (codigo == teclas.RIGHT)  
    {  
        if (codigo == direccion)  
        {  
            xRes = tifis.x;  
            yRes = tifis.y;  
            tifis.x += tifis.velocidad;  
        }  
    }  
    direccion = codigo;  
    validarCampo();  
    validarBarreras()  
}  
function confirmarFondo()   
{  
    fondo.imagenOK = true;  
    dibujar();  
}  
function confirmarImg(num)   
{  
    tifis.imgok[num] = true;  
    dibujar();  
}  
function confirmarliz()   
{  
    liz.lizOK= true;  
    dibujar();  
}  
function dibujar()   
{  
    if (fondo.imagenOK == true)  
    {  
        tablero.drawImage(fondo.imagen,0,0);  
    }  
    if (tifis.imgok[0] && tifis.imgok[1] && tifis.imgok[2] && tifis.imgok[3])  
    {  
        if (direccion == teclas.DOWN || direccion == undefined)  
        {  
            tablero.drawImage(tifis.img[0],tifis.x,tifis.y);  
        }  
        if (direccion == teclas.UP)  
        {  
            tablero.drawImage(tifis.img[1],tifis.x,tifis.y);  
        }  
        if(direccion == teclas.LEFT)  
        {  
            tablero.drawImage(tifis.img[2],tifis.x,tifis.y);  
        }  
        if(direccion == teclas.RIGHT)  
        {  
            tablero.drawImage(tifis.img[3],tifis.x,tifis.y);  
        }  
    }  
    if (liz.lizOK == true)  
    {  
        tablero.drawImage(liz.lizy,liz.x,liz.y);  
    }  
}  
function validarCampo() {  
    if (tifis.x < 0)  
    {  
        tifis.x = 0;  
    }  
    if (tifis.x > 451)  
    {  
        tifis.x = 450;  
    }  
    if (tifis.y < 0)  
    {  
        tifis.y = 0;  
    }  
    if (tifis.y > 451)  
    {  
        tifis.y = 450;  
    }  
    dibujar();  
}  
function validarBarreras() {  
    if ((tifis.x > 150 && tifis.x < 251))  
    {  
        if (tifis.y < 251)  
        {  
            tifis.x = xRes;  
            tifis.y = yRes;  
        }  
    }  
    if ((tifis.y > 150 && tifis.y < 251))  
    {  
        if (tifis.x < 151)  
        {  
            tifis.x = xRes;  
            tifis.y = yRes;  
        }  
    }  
    if ((tifis.y > 300 && tifis.y < 401))  
    {  
        if (tifis.x > 101)  
        {  
            tifis.x = xRes;  
            tifis.y = yRes;  
        }  
    }  
    dibujar();  
}

Diego Paredes Arenas

student•

Hola a todos, les comparto una tarea que surgió de este ejercicio, no la de los obstáculos, sino la de realizar el ejercicio con arrays y ciclo for.

Lo que hice fue meter en un array cada una de las URL de las imágenes correspondientes a cada vista del personaje y creé un solo atributo de objeto para insertar la imagen, para su dirección y uno solo para confirmar la carga.

Mediante un ciclo for, se confirma la carga de todos los archivos de imagen para el personaje y se dibuja el escenario.

Posteriormente, para la parte de cambiar la vista del personaje con las teclas, simplemente se modifica el valor del atributo de objeto que contiene la URL de la imagen a graficar, asignándole el valor correspondiente almacenado en el array y se llama la función dibujar.

A continuación les dejo el código,

Posdata: gracias Freddy por compartirnos estas clases, muy claro todo lo que explicas.

var miCanva = document.getElementById("campo");  
var lienzo = miCanva.getContext("2d");  
  
var b = ["img/diana-der.png", "img/diana-izq.png","img/diana-atras.png", "img/diana-frente.png"];  
  
var teclas =  
{  
    up:38,  
    down:40,  
    ahead:39,  
    back:37  
}  
  
var fondo =   
{  
    confirm:false,  
    fondoImagen:new Image(),  
    fondoSRC:"img/fondo.png"  
};  
  
var muneco=  
{  
    vistas:new Image(),  
    x:100,  
    y:100,  
    confirm:false  
};  
  
fondo.fondoImagen.src=fondo.fondoSRC;  
fondo.fondoImagen.onload=confirmar;  
  
function confirmar()  
{  
    fondo.confirm=true;  
    muneco.confirm=true;  
    dibujar();  
}  
  
for(n=0; n<=3; n++)  
{  
    posicionURL=b[n];  
    muneco.vistasURL=posicionURL;  
    console.log(muneco);  
    muneco.vistas.src=muneco.vistasURL;  
    muneco.vistas.onload=confirmar;  
}  
  
function dibujar()  
{  
    lienzo.drawImage(fondo.fondoImagen, 0, 0);  
    lienzo.drawImage(muneco.vistas, muneco.x, muneco.y);  
}  
  
document.addEventListener("keydown", mover);  
  
function mover(tecla)  
{  
  
    if (muneco.confirm==true)  
    {  
  
        teclaPresionada=tecla.keyCode;  
  
        if(teclaPresionada==teclas.up)  
        {  
            muneco.y-=5;             
            muneco.vistas.src=b[2];  
        }  
        if(teclaPresionada==teclas.down)  
        {  
            muneco.y+=5;     
            muneco.vistas.src=b[3];  
        }  
        if(teclaPresionada==teclas.ahead)  
        {  
            muneco.x+=5;     
            muneco.vistas.src=b[0];  
        }  
        if(teclaPresionada==teclas.back)  
        {  
            muneco.x-=5;     
            muneco.vistas.src=b[1];  
        }  
            dibujar();  
    }  
  
}

Dibujar al enemigo y controlar a Diana

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