[Løst] Bondesjakk ved hjelp av CSS, HTML og Javascript

Teknolog-1 · 28. august 2013

Hei, jeg har litt problemer med en oppgave vi er gitt på skolen. Vi har akkurat begynt med en innføring i HTML, CSS og Javascript og i den forbindelse har vi fått en oppgave der man skal lage en lett variant av bondesjakk. Noe kode er gitt fra før, slik at det eneste jeg har lagt til her er et javascript samt onclick på td-tag'en. Poenget her er at et enkeltklikk skal gi rød farge, et dobbeltklikk (ondblclick) skal gi grønn farge og et enkeltklikk (etter at man har trykt på en farge, i tilfelle man gjør feil) skal sette fargen tilbake igjen til grå.

Koden min fungerer ikke for den første oppgaven og jeg lurer på om noen har noen formening om hva jeg gjør galt? Å ordne ondblclick om man får til førstnevnte er ikke noe problem, men lurer også på en fremgangsmåte for å sjekke om onclick/ondblclick er aktivert (hvis det er slik man vil gå frem for å løse den siste oppgaven).

Her er koden:

<html>
<head>
<title>Bondesjakk</title>
<style type="text/css">
	#bondesjakkbrett { width:300px;
                           height:300px;
                           border: 3px solid black;
         }
         .tabellrute{ background-color: #ccc;
         }
</style>
<script language="javascript">
function byttFarge(farge) {
	document.getElementById("rute1").style.backgroundcolor=farge;
}	
</script>
</head>
 
<body>
<h1>Spill bondesjakk!</h1>
<p>
Her kan to personer spille bondesjakk. Når
førstemann (rødt) velger rute, klikker han en gang, og
når andremann (grønt) velger rute, dobbeltklikker han.
</p>
 
<table id="bondesjakkbrett">
	<tr>   
	       <td class="tabellrute" id="rute1" onclick="byttFarge('red')"></td>
	       <td class="tabellrute" id="rute2" onclick="byttFarge('red')"></td>
	       <td class="tabellrute" id="rute3" onclick="byttFarge('red')"></td>
	</tr>
	<tr>   
	       <td class="tabellrute" id="rute4" onclick="byttFarge('red')"></td>
	       <td class="tabellrute" id="rute5" onclick="byttFarge('red')"></td>
	       <td class="tabellrute" id="rute6" onclick="byttFarge('red')"></td>
	</tr>
	<tr>   
	       <td class="tabellrute" id="rute7" onclick="byttFarge('red')"></td>
	       <td class="tabellrute" id="rute8" onclick="byttFarge('red')"></td>
	       <td class="tabellrute" id="rute9" onclick="byttFarge('red')"></td>
	</tr>
<table>
 
<p>Du må laste inn siden på nytt for å starte et nytt spill.</p>
</body>
</html>

Thomas. · 28. august 2013

Bruk background istedenfor backgroundcolor

Har lite å gjøre nå så laget til dette kjapt for deg. tur holder styr på hvem sin tur det er, 0 = rød, 1 = grønn.

<html>
    <head>
        <title>Bondesjakk</title>
        <style type="text/css">
            #bondesjakkbrett { width:300px;
                               height:300px;
                               border: 3px solid black;
            }
            .tabellrute{ background-color: #ccc;
            }
        </style>
        <script language="javascript">
            var tur = 0;
            function trekk(id, i) {
                // Hvis tur = grønn OG i ikke er oppgitt, returner (ikke gjør noe)
                // ELLER hvis bakgrunsfargen er blitt byttet (ruten har allerede blitt trykket på), returner
                if (tur === 1 && !i || document.getElementById("rute" + id).style.background != '')
                    return;
                // Det er grønn sin tur
                // i indikerer dobbeltklikk
                if (tur === 1 && i === 1) {
                    document.getElementById("rute" + id).style.background = 'green';
                    // Sett tur til RØD        
                    tur = 0;
                }
                // Det er rød sin tur        
                else {
                    document.getElementById("rute" + id).style.background = 'red';
                    // Sett tur til GRØNN        
                    tur = 1;
                }
            }
        </script>
    </head>

    <body>
        <h1>Spill bondesjakk!</h1>
        <p>
            Her kan to personer spille bondesjakk. Når
            førstemann (rødt) velger rute, klikker han en gang, og
            når andremann (grønt) velger rute, dobbeltklikker han.
        </p>

        <table id="bondesjakkbrett">
            <tr>   
                <td class="tabellrute" id="rute1" onclick="trekk(1)" ondblclick="trekk(1, 1)"></td>
                <td class="tabellrute" id="rute2" onclick="trekk(2)" ondblclick="trekk(2, 1)"></td>
                <td class="tabellrute" id="rute3" onclick="trekk(3)" ondblclick="trekk(3, 1)"></td>
            </tr>
            <tr>   
                <td class="tabellrute" id="rute4" onclick="trekk(4)" ondblclick="trekk(4, 1)"></td>
                <td class="tabellrute" id="rute5" onclick="trekk(5)" ondblclick="trekk(5, 1)"></td>
                <td class="tabellrute" id="rute6" onclick="trekk(6)" ondblclick="trekk(6, 1)"></td>
            </tr>
            <tr>   
                <td class="tabellrute" id="rute7" onclick="trekk(7)" ondblclick="trekk(7, 1)"></td>
                <td class="tabellrute" id="rute8" onclick="trekk(8)" ondblclick="trekk(8, 1)"></td>
                <td class="tabellrute" id="rute9" onclick="trekk(9)" ondblclick="trekk(9, 1)"></td>
            </tr>
            <table>

                <p>Du må laste inn siden på nytt for å starte et nytt spill.</p>
                </body>
                </html>

Teknolog-1 · 28. august 2013

Aha, tusen takk for hjelpen. Da er jeg kommet et godt stykke på vei. Da er det bare en ting igjen. Hvis en av spillerne har trykket på feil plass, skal det være mulig å klikke en gang ekstra for å gjøre den ruten grå igjen. Jeg har prøvd litt forskjellig med tellere, if-setninger osv men for meg ser det ut som man må gjøre om på strukturen. Noen som har noen tips? Trenger ikke et løsningsforslag, men et dytt i riktig retning hadde vært fint.

Endret 28. august 2013 av unbreakable163

jonny · 28. august 2013

Før "return" i koden til Thomas kan du legge til "if (i) document.getElementById("rute" + id).style.background = '#ccc';" (ikke glem krøllparanteser...) (dette forutsetter at "i" blir satt til 0 ved enkeltklikk-tilfellene)

Endret 28. august 2013 av jonny

Teknolog-1 · 29. august 2013

Jeg har prøvd meg litt frem og la inn kodebiten din, problemet nå er at jeg ikke får brukt de rutene som er satt til grå igjen ved et senere trekk. Noen forslag? Kommer til å prøve selv så sier ifra om jeg får det til.

jonny · 29. august 2013

Her er et forslag til hvordan det kan gjøres (jeg har nær sagt null erfaring med javascript, så mulig at dette er dårlig kode):

  var tur = 0;
  var sisteRute = null;

  function trekk(id, dblklikk) {
    rute = document.getElementById("rute" + id);
    tomRute = rute.style.background != 'red' && rute.style.background != 'green';
    if (tomRute) {
      if ((tur === 0 && !dblklikk) || (tur === 1 && dblklikk)) {
        rute.style.background = (dblklikk ? 'green' : 'red');
        sisteRute = rute;
        tur = (tur === 1 ? 0 : 1);
      }
    } else if (!dblklikk && rute === sisteRute) {
      rute.style.background = '#ccc';
      sisteRute = null;
      tur = (tur === 1 ? 0 : 1);
    }
  }

Kaptein Snus · 4. september 2013

Ser at denne tråden er noen dager gammel, men tenkte kanskje jeg skulle poste mitt bidrag alikevell.

Nå vet ikke jeg eksakt kravene til oppgaven (f. eks om dere MÅ bruke dobbeltclick eller om dere må bruke onclick på elemtene osv), men her er slik jeg ville ha gjort det.

Jeg har valgt å gå bort i fra dobbeltclick og heller basere det på annethvert klikk. Du kan klikke på en allerede brukt rute for å fjerne den, og da vil den fargen som var på ruten få et nytt trekk.

http://jsfiddle.net/2rMJy/

UPDATE:

Kun siste trekk kan endres (Takk til jonny)

http://jsfiddle.net/2rMJy/2/

Endret 4. september 2013 av Lek1

jonny · 4. september 2013

Hmm... det var en litt merkelig løsning - man kan jo fjerne den første brikken man la når man er langt ut i spillet. Det er også mulig å få urettferdig mange brikker av den ene fargen. Når du har lagt noen brikker, kan du fjerne alle av motspillerens brikker, deretter en av dine egne, og så plassere en ny brikke...

Løsningen jeg postet over gjorde det kun mulig å fjerne den brikken som ble lagt sist, som jeg synes gir mye mer mening.

Kaptein Snus · 4. september 2013

Ja, det er jo sant!

3 linjer med kode til, og det er ordnet!

http://jsfiddle.net/2rMJy/2/

Logg inn

[Løst] Bondesjakk ved hjelp av CSS, HTML og Javascript

Anbefalte innlegg

Teknolog-1

Lenke til kommentar

Videoannonse

Thomas.

Lenke til kommentar

Teknolog-1

Lenke til kommentar

jonny

Lenke til kommentar

Teknolog-1

Lenke til kommentar

jonny

Lenke til kommentar

Kaptein Snus

Lenke til kommentar

jonny

Lenke til kommentar

Kaptein Snus

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Krigen mellom Israel og Hamas 1 2 3 4 704

Hvem er aktive 0 medlemmer