07 2

Rellenar completamente un país en un juego de javascript [06]

En este tutorial vamos a rellenar completamente un país en un juego de javascript siguiendo estos pasos:

  • Math, random y floor.
  • JSfiddle.net.
  • Función do while.
  • Return.
  • Encontrar un país en nuestro mapa (buscar hasta dar en el blanco).
Rellenar completamente un país en un juego de javascript

Codigo: https://github.com/programadornovato/avionJavascript/commit/451c743d3008d09d6dd87cb4ae1db8eb8aef1b08

//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=true;
window.onload = function (event) {
    canvas.getContext('2d').drawImage(mapa, 0, 0, anchoMapa, this.altoMapa);
    document.body.appendChild(canvas);
    canvas.setAttribute('id', 'canvas');
    buscaPais();
}
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};
}
document.addEventListener('mousemove', function (event) {
    var datosDelPixel = canvas.getContext('2d').getImageData(event.offsetX, event.offsetY, 1, 1).data;
    document.getElementById('salida').innerHTML = `ROJO=${datosDelPixel[0]} VERDE=${datosDelPixel[1]} AZUL=${datosDelPixel[2]} ALFA=${datosDelPixel[3]} `
});
document.addEventListener('click', function (event) {
    llenarArea(event.offsetX, event.offsetY,1);
    llenarArea(event.offsetX, event.offsetY,-1);
    llenarTodo();
});
function llenarArea(x, y,haciaArribaAbajo) {
    /*
    var ctx=canvas.getContext('2d');
    ctx.fillStyle="rgb(255, 0, 0)";
    ctx.fillRect(posx,posy,6,6);
    */
    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;
            /*
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = "rgb(255, 0, 0)";
            ctx.fillRect(posx, posy, 1, 1);
            */
            posx = posx + haciaDerechaIzquierda;
            matriz[contador]={posx,posy};
            contador++;
        }
        posy=posy+haciaArribaAbajo;
        haciaDerechaIzquierda=haciaDerechaIzquierda*-1;
        //posx=posx+(perdida*haciaDerechaIzquierda);
        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++) {
        if(verPais==true){
            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);
}

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 >>

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Salir de la versión móvil