13 1

Que tan lejos estamos en un juego de javascript [13]

En este tutorial vamos a que tan lejos estamos en un juego de javascript siguiendo estos pasos:

  • Math.pow
  • Math.sqrt
  • Descubrir que tan lejos estamos de vender el avión.
  • Teorema de pitágoras.
Que tan lejos estamos en un juego de javascript

Codigo: https://github.com/programadornovato/avionJavascript/commit/fc7fe8741085f7247ef9269bbf6390f54a7c927c

css/css.css

body{
    margin: 0px;
    padding: 0px;
    background-color:#b4dcfc;
    cursor: crosshair;
}
#mapa{
    user-select: none;
    position: absolute;
    width: 1024px;
}
#canvas{
    position: absolute;
    left: 0px;
}
#avion{
    position: absolute;
    top: 500px;
    left: 20px;
    z-index: 100;
    width: 70px;
    display: none;
    transition: left 2s cubic-bezier(0.42, -0.3, 0.78, 1.25), top 2s cubic-bezier(0.42, -0.3, 0.78, 1.25);
}
#no{
    position: absolute;
    top: 500px;
    left: 20px;
    z-index: 100;
    width: 30px;
    display: none;
    transition: left 2s cubic-bezier(0.42, -0.3, 0.78, 1.25), top 2s cubic-bezier(0.42, -0.3, 0.78, 1.25);
}
#fuego{
    position: absolute;
    top: 500px;
    left: 20px;
    z-index: 200;
    width: 600px;
    display: none;
}
#llora{
    position: absolute;
    top: 520px;
    left: 20px;
    z-index: 200;
    width: 100px;
    display: none;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ayudame a vender mi avion!!!!</title>
    <link rel="stylesheet" href="css/css.css">
</head>
<body>
    <img src="img/mapa.png" id="mapa" >
    <img src="img/avion.png" id="avion">
    <img src="img/no.gif" id="no">
    <img src="img/fuego.gif" id="fuego">
    <img src="img/llora.png" id="llora">
    <script src="js/juego.js"></script>
</body>
</html>

js/juego.js

//alert("hola desde javascript");
var mapa = document.getElementById('mapa');
var anchoMapa = mapa.clientWidth;
var altoMapa = mapa.clientHeight;

var canvas = document.createElement('canvas');
canvas.width = anchoMapa;
canvas.height = altoMapa;

var matriz=[];
var contador=0;
var verPais=false;

var numFallos=0;
var limiteFallos=5;
var xy=null;
var oportunidadesRestantes=limiteFallos-numFallos;
window.onload = function (event) {
    var ctx=canvas.getContext('2d');
    ctx.drawImage(mapa, 0, 0, anchoMapa, this.altoMapa);
    document.body.appendChild(canvas);
    canvas.setAttribute('id', 'canvas');
    ctx.fillStyle="red";
    ctx.font="20px Arial";
    ctx.fillText(`Oportunidades ${oportunidadesRestantes}`,10,500);
    buscaPais();
    do{
        xy=buscaPais();
        if(xy==null){
            location.reload();
            break;
        }else{
            llenarUnPais(xy['posAleatoriaMapaX'],xy['posAleatoriaMapaY']);
        }
    }
    while(contador<800);
}
function llenarUnPais(x,y) {
    contador=0;
    llenarArea(x,y,1);
    llenarArea(x,y,-1);
    if(verPais==true){
        llenarTodo();
    }
}
function buscaPais(){
    var con=0;
    do{
        var posAleatoriaMapaX=numeroAleatorio(anchoMapa);
        var posAleatoriaMapaY=numeroAleatorio(altoMapa);
        var datosDelPixel=canvas.getContext('2d').getImageData(posAleatoriaMapaX,posAleatoriaMapaY,1,1).data;
        //var ctx=canvas.getContext('2d');
        //ctx.fillStyle='rgb(0, 102, 0)';
        //ctx.fillRect(posAleatoriaMapaX,posAleatoriaMapaY,8,8);
        con++;
        if(con>50)return null;
    }while(datosDelPixel[0]!=255 && datosDelPixel[1]!=255 && datosDelPixel[2]!=255);
    return {posAleatoriaMapaX,posAleatoriaMapaY};
}
function llenarArea(x, y,haciaArribaAbajo) {
    var posx = x;
    var posy = y;
    var datosDelPixel = canvas.getContext('2d').getImageData(posx, posy, 1, 1).data;
    var haciaDerechaIzquierda=1;
    var perdida=15;
    while (datosDelPixel[0] == 255 && datosDelPixel[1] == 255 && datosDelPixel[2] == 255) {
        while (datosDelPixel[0] == 255 && datosDelPixel[1] == 255 && datosDelPixel[2] == 255) {
            datosDelPixel = canvas.getContext('2d').getImageData(posx, posy, 1, 1).data;
            posx = posx + haciaDerechaIzquierda;
            matriz[contador]={posx,posy};
            contador++;
        }
        posy=posy+haciaArribaAbajo;
        haciaDerechaIzquierda=haciaDerechaIzquierda*-1;
        for (let i = 0; i < perdida; i++) {
            posx=posx+haciaDerechaIzquierda;
            matriz[contador]={posx,posy};
            contador++;
        }
        datosDelPixel = canvas.getContext('2d').getImageData(posx, posy, 1, 1).data;
    }
}
function llenarTodo() {
    for (let i = 0; i < contador; i++) {
        
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = "rgb(0, 0, 204)";
            ctx.fillRect(matriz[i]['posx'],matriz[i]['posy'],1,1);
    }
}
function numeroAleatorio(limiteMax){
    return Math.floor(Math.random()*limiteMax);
}

canvas.addEventListener('click',clickCanvas);
function clickCanvas (event) {
    var encontrado=false;
    var avion=document.getElementById('avion');
    var fuego=document.getElementById('fuego');

    var no=document.getElementById('no');
    for (let i = 0; i < contador; i++) {
        if(
            (matriz[i]['posx']==event.offsetX && matriz[i]['posy']==event.offsetY) ||
            (matriz[i]['posx']==event.offsetX && matriz[i]['posy']==event.offsetY+1) ||
            (matriz[i]['posx']==event.offsetX && matriz[i]['posy']==event.offsetY-1)
        ){
            encontrado=true;
            break;
        }
    }
    if(encontrado==true){
        avion.style.display="inline";
        fuego.style.display="inline";

        mueveElemento(event.offsetX,event.offsetY,avion);
        mueveElemento(event.offsetX,event.offsetY,fuego);
        var jet=new Audio('audio/jet.mp3');
        jet.play();
        var tiempoEspera=setInterval(function(){
            var respuesta=confirm("Felicidades has vendido el avion presidencia!!!¿Desear jugar otra partida?");
            if(respuesta==true){
                location.reload();
            }
            clearInterval(tiempoEspera);
        },3000);
    }
    else{
        //console.log('Nop aqui no queremos un avion tan lujosos');
        var pierde=new Audio('audio/pierde.mp3');
        pierde.play();
        no.style.display="inline";
        mueveElemento(event.offsetX,event.offsetY,no);
        var ctx=canvas.getContext('2d');
        ctx.fillStyle="blue";
        ctx.clearRect(10,480,230,50);
        ctx.fillStyle="red";
        ctx.font="20px Arial";
        numFallos++;
        oportunidadesRestantes=limiteFallos-numFallos;
        ctx.fillText(`Oportunidades ${oportunidadesRestantes}`,10,500);
        var distancia=distanciaEntrePuntos(event,xy);
        var mensaje=muestraDistancia(distancia);
        ctx.fillText(mensaje,10,520);
        if(oportunidadesRestantes<0){
            document.getElementById('llora').style.display='inline';
            ctx.clearRect(10,480,230,50);
            ctx.fillText(`Oportunidades 0`,10,500);
            ctx.fillText(mensaje,10,520);
            canvas.removeEventListener('click',clickCanvas);
            llenarTodo();
            var tiempoEspera=setInterval(function(){
                var respuesta=confirm("Lo siento no pudiste vender el avion presidencia!!!¿Desear jugar otra partida?");
                if(respuesta==true){
                    location.reload();
                }
                clearInterval(tiempoEspera);
            },2000);

        }
    }
}
function mueveElemento(x,y,elemento) {
    var contenedor=document.getElementsByTagName('body')[0];
    var xPosicion=x-contenedor.getBoundingClientRect().left-(elemento.clientWidth/2);
    var yPosicion=y-contenedor.getBoundingClientRect().top-(elemento.clientHeight/2);
    elemento.style.left=xPosicion+"px";
    elemento.style.top=yPosicion+"px";
}

function distanciaEntrePuntos(event,xy){
    var difX=event.offsetX-xy['posAleatoriaMapaX'];
    var difY=event.offsetY-xy['posAleatoriaMapaY'];
    var distancia=Math.sqrt(Math.pow(difX,2)+Math.pow(difY,2));
    return distancia;
}
function muestraDistancia(distancia){
    if(distancia<100){
        return "Casi te quemas";
    }
    else if(distancia<200){
        return "Muy caliente";
    }
    else if(distancia<300){
        return "Caliente";
    }
    else if(distancia<400){
        return "Templado";
    }
    else if(distancia<600){
        return "Frio";
    }
    else if(distancia<800){
        return "Muy Frio";
    }
    else{
        return "congelado";
    }

}

Colors picker: https://www.w3schools.com/colors/colors_picker.asp
[Curso] TensorFlow js en Español 🇪🇸: https://www.youtube.com/playlist?list=PLCTD_CpMeEKSEOKBFyG6PxQOAvQc7HZSB
[Curso] Machine Learning JavaScript en Español 🇪🇸 con ML5: https://www.youtube.com/playlist?list=PLCTD_CpMeEKQYuoil2uSTX19S8Mfmny6B
[Curso] Java Netbeans Completo☕: https://www.youtube.com/playlist?list=PLCTD_CpMeEKTT-qEHGqZH3fkBgXH4GOTF
Como sacar las comillas invertidas: https://platzi.com/discusiones/1339-fundamentos-javascript/52373-hola-a-todos-tengo-una-consulta-alguien-sabe-como-hacer-las-comillas-invertidas-con-el-teclado/

🎦 Esta lista de reproducción: https://www.youtube.com/playlist?list=PLCTD_CpMeEKRTg39rjg2AqNxQCTz_UiBR .
Codigos en gdrive: https://drive.google.com/drive/folders/1v6u0tPYPRm_7qSbEt6IPghdzr9A9f08a?usp=sharing

🔗 Facebook: https://facebook.com/ProgramadorNovatoOficial
🔗 Twitter: https://twitter.com/programadornova
🔗 Linkedin: https://www.linkedin.com/in/programadornovato/
🔗 Instagram: https://www.instagram.com/programadornovato/

<<Anterior tutorial Siguiente tutorial >>

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

En Programador Novato vivimos de los anuncios, hemos detectado que está utilizando extensiones para bloquear anuncios. Ayudanos deshabilitando tu bloqueador de anuncios. :)