Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

--- krouzek:bludiste2 [2022/04/13 13:32] – admin
+++ krouzek:bludiste2 [2023/11/15 20:54] (aktuální) – upraveno mimo DokuWiki 127.0.0.1
@@ Řádek 1: / Řádek 1: @@
 Výchozí stav
 {{ :krouzek:bludiste_prisera.zip |}}
-* hráč se pohybuje klávesami
-* dvě nepohybující se příšery
+  * 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>