Rozdíly
Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.
Následující verze | Předchozí verzePoslední revizeObě strany příští revize | ||
krouzek:bludiste2 [2022/04/13 13:32] – vytvořeno admin | krouzek:bludiste2 [2022/04/20 15:41] – admin | ||
---|---|---|---|
Řádek 1: | Řádek 1: | ||
Výchozí stav | Výchozí stav | ||
{{ : | {{ : | ||
+ | |||
+ | * 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 = [ | ||
+ | [' | ||
+ | [' | ||
+ | [' | ||
+ | [' | ||
+ | [' | ||
+ | [' | ||
+ | [' | ||
+ | [' | ||
+ | [' | ||
+ | [' | ||
+ | ] | ||
+ | // 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: ' | ||
+ | {pohyb: ' | ||
+ | ] | ||
+ | |||
+ | let player = start | ||
+ | |||
+ | // | ||
+ | function vykresli(){ | ||
+ | const hraciDeska = document.getElementById(' | ||
+ | // vnejsi cyklus: po jednotlivych radkach | ||
+ | for (let y = 0; y < mapa.length; | ||
+ | const radka = mapa[y]; | ||
+ | let radkaElement = document.getElementById(`radka_${y}`) | ||
+ | if(!radkaElement){ | ||
+ | radkaElement = document.createElement(' | ||
+ | radkaElement.classList.add(' | ||
+ | radkaElement.id = `radka_${y}` | ||
+ | hraciDeska.appendChild(radkaElement) | ||
+ | } | ||
+ | |||
+ | // vnitrni cyklus: po polickach v ramci jedne radky | ||
+ | for(let x = 0; x< radka.length; | ||
+ | let policko = document.getElementById(`policko_${x}_${y}`) | ||
+ | if(!policko){ | ||
+ | policko = document.createElement(' | ||
+ | policko.classList.add(' | ||
+ | policko.id = `policko_${x}_${y}` | ||
+ | radkaElement.appendChild(policko) | ||
+ | } | ||
+ | if(mapa[y][x] == ' | ||
+ | | ||
+ | } else if(player.x == x && player.y == y) { | ||
+ | // hrac | ||
+ | policko.style.backgroundImage = " | ||
+ | } else if(prisery[0].x == x && prisery[0].y == y) { | ||
+ | // prisera 1 | ||
+ | policko.style.backgroundImage = " | ||
+ | } else if(prisery[1].x == x && prisery[1].y == y) { | ||
+ | // prisera 2 | ||
+ | policko.style.backgroundImage = " | ||
+ | } | ||
+ | else { | ||
+ | // prazdno | ||
+ | policko.style.backgroundImage = " | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function pohybHrace(event){ | ||
+ | let cilovaX = player.x | ||
+ | let cilovaY = player.y | ||
+ | if(!bylPohyb && event.code == " | ||
+ | // ukazkovy pohyb panacka dolu | ||
+ | cilovaY = player.y + 1 | ||
+ | cilovaX = player.x | ||
+ | } | ||
+ | if(!bylPohyb && event.code == " | ||
+ | // pohyb vlevo | ||
+ | cilovaY = player.y | ||
+ | cilovaX = player.x - 1 | ||
+ | } | ||
+ | if(!bylPohyb && event.code == " | ||
+ | // pohyb vpravo | ||
+ | cilovaY = player.y | ||
+ | cilovaX = player.x + 1 | ||
+ | } | ||
+ | if(!bylPohyb && event.code == " | ||
+ | // pohyb nahoru | ||
+ | cilovaY = player.y - 1 | ||
+ | cilovaX = player.x | ||
+ | } | ||
+ | if(mapa[cilovaY][cilovaX] == ' '){ | ||
+ | player.x = cilovaX | ||
+ | player.y = cilovaY | ||
+ | bylPohyb = true | ||
+ | } | ||
+ | } | ||
+ | |||
+ | document.addEventListener(" | ||
+ | |||
+ | // objekt musi mit x a y | ||
+ | function jeVolnoNa(cilovaPozice){ | ||
+ | return (mapa[cilovaPozice.y][cilovaPozice.x] != ' | ||
+ | } | ||
+ | |||
+ | function vyberNahodne(pole){ | ||
+ | | ||
+ | } | ||
+ | |||
+ | /* Zde pracujeme na pohybu priser*/ | ||
+ | function pohniPriseru(cisloPrisery){ | ||
+ | if(prisery[cisloPrisery].pohyb == " | ||
+ | // Random prisera | ||
+ | mozneCile = [ | ||
+ | {x: prisery[cisloPrisery].x, | ||
+ | {x: prisery[cisloPrisery].x, | ||
+ | {x: prisery[cisloPrisery].x+1, | ||
+ | {x: prisery[cisloPrisery].x-1, | ||
+ | ].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 == " | ||
+ | // 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/ | ||
+ | if(diffX > 0){ | ||
+ | //prisera je napravo od hrace | ||
+ | cil = {x: | ||
+ | }else{ | ||
+ | cil = {x: | ||
+ | } | ||
+ | }else{ | ||
+ | console.log(" | ||
+ | // nahoru/dolu | ||
+ | if(diffY > 0){ | ||
+ | //prisera je dole od hrace | ||
+ | cil = {x: | ||
+ | } else{ | ||
+ | cil = {x: | ||
+ | } | ||
+ | } | ||
+ | // Jdu pouze pokud mohu | ||
+ | if(jeVolnoNa(cil)){ | ||
+ | prisery[cisloPrisery].x = cil.x | ||
+ | prisery[cisloPrisery].y = cil.y | ||
+ | } | ||
+ | |||
+ | } else { | ||
+ | throw " | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | setInterval( function(){ | ||
+ | // pridal jsem funkci na pohnuti priser | ||
+ | for(let i=0; i< | ||
+ | pohniPriseru(i) | ||
+ | } | ||
+ | vykresli() | ||
+ | bylPohyb = false | ||
+ | }, 1000) | ||
+ | |||
+ | })() | ||
+ | |||
+ | </ |