Výchozí stav
{{ :krouzek:bludiste_prisera.zip |}}

  * hráč se pohybuje klávesami
  * dvě nepohybující se příšery



<code javascript>

/* Javascript */

// obalová funkce zajistí, že se vše spustí až po načtení dokumentu
(function() {

const mapa = [
    ['X','X','X','X','X','X','X','X','X','X','X'], // y=0
    ['X',' ',' ','X',' ',' ',' ',' ','X',' ','X'], // y=1
    ['X',' ',' ','X','X',' ','X',' ','X',' ','X'], // y=2
    ['X',' ','X','X',' ',' ','X',' ','X',' ','X'], // y=3
    ['X',' ','X',' ',' ','X','X',' ',' ',' ','X'], // y=4
    ['X',' ',' ',' ',' ','X','X','X','X',' ','X'], // y=5
    ['X',' ',' ','X',' ','X',' ',' ',' ',' ','X'], // y=6
    ['X',' ','X','X',' ','X',' ','X','X','X','X'], // y=7
    ['X',' ',' ','X',' ','X',' ',' ',' ',' ','X'], // y=8
    ['X','X','X','X','X','X','X','X','X','X','X']  // y=9
]
// uvodni pozice hrace
const start = {x: 1, y: 1}
// kam se chce dostat
const end = {x: 9, y: 1}

// pole uvodnich pozic prekazek
const prisery = [
    {pohyb: 'random', x: 4, y: 3},
    {pohyb: 'greedy', x: 7, y: 4}
]

    let player = start

    //
function vykresli(){
    const hraciDeska = document.getElementById('hraci-deska')
    // vnejsi cyklus: po jednotlivych radkach
    for (let y = 0; y < mapa.length; y++){
        const radka = mapa[y];
        let radkaElement = document.getElementById(`radka_${y}`)
        if(!radkaElement){
            radkaElement = document.createElement('div')
            radkaElement.classList.add('radka') // v CSS: .radka { ... }
            radkaElement.id = `radka_${y}`
            hraciDeska.appendChild(radkaElement)
        }

        // vnitrni cyklus: po polickach v ramci jedne radky
        for(let x = 0; x< radka.length; x++){
            let policko = document.getElementById(`policko_${x}_${y}`)
            if(!policko){
                policko = document.createElement('div')
                policko.classList.add('policko') // v CSS: .policko { ... }
                policko.id = `policko_${x}_${y}`
                radkaElement.appendChild(policko)
            }
            if(mapa[y][x] == 'X'){
               policko.style.backgroundImage = "url('yoshi-32/yoshi-32-wall.png')"
            } else if(player.x == x && player.y == y) {
                // hrac 
                policko.style.backgroundImage = "url('yoshi-32/yoshi-32-worker.png')"
            } else if(prisery[0].x == x && prisery[0].y == y) {
                // prisera 1
                policko.style.backgroundImage = "url('yoshi-32/monster.png')"
            } else if(prisery[1].x == x && prisery[1].y == y) {
                // prisera 2
                policko.style.backgroundImage = "url('yoshi-32/monster.png')"
            }
            else {
                // prazdno
                policko.style.backgroundImage = "url('yoshi-32/yoshi-32-floor.png')"
            }
        }
    }
}

function pohybHrace(event){
    let cilovaX = player.x
    let cilovaY = player.y
    if(!bylPohyb && event.code == "ArrowDown"){
        // ukazkovy pohyb panacka dolu
        cilovaY = player.y + 1
        cilovaX = player.x
    }
    if(!bylPohyb && event.code == "ArrowLeft"){
        // pohyb vlevo
        cilovaY = player.y
        cilovaX = player.x - 1
    }
    if(!bylPohyb && event.code == "ArrowRight"){
        // pohyb vpravo
        cilovaY = player.y
        cilovaX = player.x + 1
    }
    if(!bylPohyb && event.code == "ArrowUp"){
        // pohyb nahoru
        cilovaY = player.y - 1
        cilovaX = player.x
    }        
    if(mapa[cilovaY][cilovaX] == ' '){
        player.x = cilovaX
        player.y = cilovaY
        bylPohyb = true
    }
}
 
document.addEventListener("keydown", pohybHrace);

// objekt musi mit x a y
function jeVolnoNa(cilovaPozice){
    return (mapa[cilovaPozice.y][cilovaPozice.x] != 'X')
}

function vyberNahodne(pole){
   return pole[Math.floor(Math.random()*pole.length)]
}

/* Zde pracujeme na pohybu priser*/
function pohniPriseru(cisloPrisery){
    if(prisery[cisloPrisery].pohyb == "random"){
        // Random prisera
        mozneCile = [
            {x: prisery[cisloPrisery].x, y:prisery[cisloPrisery].y+1}, 
            {x: prisery[cisloPrisery].x, y:prisery[cisloPrisery].y-1},
            {x: prisery[cisloPrisery].x+1, y:prisery[cisloPrisery].y},
            {x: prisery[cisloPrisery].x-1, y:prisery[cisloPrisery].y},
        ].filter(cil => jeVolnoNa(cil))
        // Vyber nahodne z moznych cilu
        cil = vyberNahodne(mozneCile)
        // presun se na nej
        prisery[cisloPrisery].x = cil.x
        prisery[cisloPrisery].y = cil.y
    } else if(prisery[cisloPrisery].pohyb == "greedy"){
        // zkracuje nejdelsi vzdalenost k hraci
        const diffX = prisery[cisloPrisery].x - player.x
        const diffY = prisery[cisloPrisery].y - player.y
        let cil
        if(diffX > diffY){
            console.log("<>")
            // vpravo/vlevo
            if(diffX > 0){
                //prisera je napravo od hrace
                cil = {x:prisery[cisloPrisery].x-1, y:prisery[cisloPrisery].y}
            }else{
                cil = {x:prisery[cisloPrisery].x+1, y:prisery[cisloPrisery].y}
            }
        }else{
            console.log("^")
            // nahoru/dolu
            if(diffY > 0){
                //prisera je dole od hrace
                cil = {x:prisery[cisloPrisery].x, y:prisery[cisloPrisery].y-1}
            } else{
                cil = {x:prisery[cisloPrisery].x, y:prisery[cisloPrisery].y+1}
            }
        }
        // Jdu pouze pokud mohu
        if(jeVolnoNa(cil)){
            prisery[cisloPrisery].x = cil.x
            prisery[cisloPrisery].y = cil.y
        }

    } else {
        throw "Neznamy typ pohybu prisery " + cisloPrisery
    }
}


setInterval( function(){
    // pridal jsem funkci na pohnuti priser
    for(let i=0; i<prisery.length; i++){
        pohniPriseru(i)
    }
    vykresli()
    bylPohyb = false
}, 1000)

})()

</code>