javascript Puslespill

[pals0910]

Jeg er ganske ny når det gjelder koding, men jeg har vært veldig interessert i det siste. Jeg fikk en oppgave som jeg ikke kommer videre med. Et slags nummer puslespill der man skal få tallene i riktig rekkefølge, men det er et området jeg ikke kan flytte nummer. Tallet 3 kan flyttes inn i den blanke ruten i midten, men den kan ikke flyttes tilbake. Jeg har prøvd en stund, men føler jeg ikke kommer noen vei. Alle andre tall kan flyttes både fram og tilbake, men jeg står fast på det ene tallet. Håper noen her kan hjelpe meg, for jeg sliter litt med å finne ut av det.

 

Untitled.html

[SahandJ]

Når du jobber med HTML og JavaScript så er konsollen et kraftig verktøy. 

Det er flere måter å få tilgang til den på, et av dem er å høyre-klikke på siden og trykke på "Inspect" (Inspiser på norsk regner jeg meg). Da får du opp utvikler-verktøyene. Et av fanene vil være "Console". 

Ha denne oppe på skjermen og prøv å spill spillet ditt. Da vil du se at det dukker opp en del feilmeldinger mens man trykker seg rundt: 

Hvorfor kommer denne feilmeldingen opp? Og hvorfor gjør den det kun noen ganger?

Vel, den sier også hvilken linje feilen oppstår i, så da kan du begynne å se litt nærmere på den linjen og logikken rundt for å fikse problemet. 

I dette tilfelle dukker feilen opp på linje 52:

if(document.getElementById(alt3).innerHTML =='') {

I hvilke tilfeller vil dette skje? I koden din bruker du `if` 3 ganger. Det er for gjort å glemme dette (eller kanskje du ikke visste dette siden du er ny på dette) er at `if`-"betingelsen" er alltid evaluert. 

Se for deg dette eksemplet:

let age = 7;

if (age >= 67) {
  alert('Honnørbillet');
}
if (age < 67) {
  alert('Voksenbillet');
}
if (age < 18) {
  alert ('Ungdomsbillet!');
}
if (age < 11) {
  alert('Barnebillet!');
}
if (age < 2) {
  alert('Gratis billett');
}

Er det noe poeng å sjekke om personen er ungdom eller barn om jeg allerede vet at de er voksen? Det er jo ikke det, men i koden over så vil alle if-betingelsene bli evaluert. Først sjekkes om personen skal ha Honnørbillet, deretter sjekks om personen skal ha voksenbillet, osv. 

Som sagt det er unødvendig. Det kan fikses lett ved å bruke `else if`. Her sjekkes ikke betingelsen om en tidligere betingelse i samme if-blokk har allerede blitt evaluert til å være sann. 

Altså om jeg hadde heller skrevet:

let age = 7;

if (age >= 67) {
  alert('Honnørbillet');
} else if (age < 67) {
  alert('Voksenbillet');
} else if (age < 18) {
  alert ('Ungdomsbillet!');
} else if (age < 11) {
  alert('Barnebillet!');
} else {
  alert('Gratis billett');
}

Så blir kun ett av utfallene eksekvert. 

La oss nå se på ditt tilfelle:

Du har en funksjon kalt "trykk". Denne tar inn 4 argumenter. `this`, `alt1`, `alt2`, og `alt3`. Sjekk f.eks linje 48:

<div id="r1k1" onclick="trykk(this, 'r2k1', 'r1k2')">7</div>

Her kaller du på funksjonen med kun 3 argumenter. Hva skjer da når hverken alt1 eller alt2 er tomme? 

Da vil alt3 bli sjekket, men alt3 ikke eksisterer så vet jo ikke programmet ditt hva den skal gjøre.

Og da kommer vi til problemet, på linje 33 definerer du elementet "r2k2". Altså ruta i midten. Hvor mange naboer har den? Hvor mange naboer godtar funksjonen din? 

Altså den siste naboen du definerer, blir aldri sendt med til funksjonen din. Hadde det vært et annet språk enn JavaScript så hadde du nok lett lagt merke til dette ettersom språk som Java, C#, Python ikke aksepterer dette såfremt du ikke eksplisitt tillater det. 

Så hva er fiksen? Vel, du kan alltids slenge på en `alt4` i funksjonen din. Det vil da kunne la den siste naboen flytte seg inn i r2k2. Men om jeg hadde vært deg hadde jeg sett på en litt mer dynamisk løsning. Kanskje du kan hente all rutene og se hvilken som er ledig? Pass på at du da kun sjekker rutene som er direkte over eller til siden for den aktuelle ruten.

Til sist, hvilket program bruker du for å skrive koden din? Jeg håper virkelig du bruker et moderne IDE som VS Code eller IntelliJ. Disse hjelper deg veldig mye og du hadde nok lagt merke til feilen på egen hånd.

Endret 17. august 2023 av SahandJ