Gå til innhold

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

Teknolog-1

Anbefalte innlegg

Teknolog-1

Teknolog-1

Skrevet
Skrevet

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>
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Thomas.

Thomas.

Skrevet
Skrevet

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>
  • Liker 1
Lenke til kommentar
Teknolog-1

Teknolog-1

Skrevet
  • Forfatter
Skrevet (endret)

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 av unbreakable163
Lenke til kommentar
jonny

jonny

Skrevet
Skrevet (endret)

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 av jonny
  • Liker 1
Lenke til kommentar
jonny

jonny

Skrevet
Skrevet

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);
    }
  }
Lenke til kommentar
Kaptein Snus

Kaptein Snus

Skrevet
Skrevet (endret)

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 av Lek1
Lenke til kommentar
jonny

jonny

Skrevet
Skrevet

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.

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...