Avatar billede tobiassen Nybegynder
10. juni 2008 - 23:48 Der er 10 kommentarer og
1 løsning

4 på stribe

nogen der kan hjælpe mig med at få mit 4 på stripe spil til at virke?

(Haster!!)


<html>

<head>

<body onload="init()">

<p id="display"></p>

<script>
turn=0;

map =
Array(
  Array(0,0,0,0,0,0,0),
  Array(0,0,0,0,0,0,0),
  Array(0,0,0,0,0,0,0),
  Array(0,0,0,0,0,0,0),
  Array(0,0,0,0,0,0,0),
  Array(0,0,0,0,0,0,0)
);

function init()
{
  document.getElementById("display").innerHTML="";
  for(iy=0;iy<=5;iy++)
  {
    for(ix=0;ix<=6;ix++)
    {
      document.getElementById("display").innerHTML+="<img src='cirkel.jpg' width='75' height='75' border='1' onClick='clicked("
      document.getElementById("display").innerHTML+=ix;
      document.getElementById("display").innerHTML+=",";
      document.getElementById("display").innerHTML+=iy
      document.getElementById("display").innerHTML+=")'";
      document.getElementById("display").innerHTML+="id='";
      document.getElementById("display").innerHTML+=ix;
      document.getElementById("display").innerHTML+="-";
      document.getElementById("display").innerHTML+=iy;
      document.getElementById("display").innerHTML+="'>";
    }
    document.getElementById("display").innerHTML+="<br>";
  }

  paint()
}

function clicked(x,y)
{
  tmp=6;
  for(iy = 5; iy >= 0; iy--)
  {
    if(map[iy][x]>0)
      tmp=iy;
  }
  map[tmp-1][x]=turn+1;
  turn=!turn;
  paint();
}

function paint()
{
  for(iy=0;iy<=5;iy++)
  {
    for(ix=0;ix<=6;ix++)
    {
      if(map[iy][ix]==0)
      {
        document.getElementById(ix+"-"+iy).src="cirkel.jpg";
      }
      if(map[iy][ix]==1)
      {
        document.getElementById(ix+"-"+iy).src="cirkelr.jpg";
      }
      if(map[iy][ix]==2)
      {
        document.getElementById(ix+"-"+iy).src="cirkelb.jpg";
      }
    }
  }
}

for(iy=0;iy<=5;iy++)
  {
    for(ix=0;ix<=6;ix++)
    {
      if(map[iy][ix]==0 && map[iy][ix+1]==0)
      {
      document.getElementById(ix+"-"+iy).innerHTML="jesfdskf";
      }
    }
  }
</script>

</head>

</body>

</html>
Avatar billede roenving Novice
11. juni 2008 - 00:39 #1
-- du skal bare bytte lidt om på elementerne, for html-elementet kan have 2 slags børn, et head-element og et body-element, og de kan ikke være hinandens børn, så strukturen _skal_ være:

<!doctype ...>
<html>

  <head>
    <title>Dokumentets titel</title>
    <!-- Andet head-indhold, f.eks. meta-, link- og style-tags (og med fordel også f.eks. javascripts !-) -->
  </head>

  <body>
    <!-- Dine visbare html-tags (som ikke må være andre steder !-) -->
  </body>

</html>

-- og så er det i øvrigt tudsegammeldags at forlade sig på innerHTML, da den ting ikke har nogensomhelst fremtid, da den er ret på tværs af hele grundlaget for sgml og direkte vil crashe en evt. ægte xhtml-fortolker !o]
Avatar billede tobiassen Nybegynder
11. juni 2008 - 10:31 #2
nu har jeg prøvet at bytte lidt rundt på elementerne, men det hjalp ik rigtig.

okay, hva kan jeg så bruge i stedet, og hvor kan jeg læse om det ?:)
Avatar billede w13 Novice
11. juni 2008 - 10:44 #3
For det første, så bør du slå visning af JavaScript-fejl til, når du koder JavaScript. Jeg får 2 helt klare fejlmeddelelser samt deres linjenr. op på skærmen, når jeg kører din kode. (Også efter at jeg har placeret </head> rigtigt.)

Dernæst har jeg rettet:

      document.getElementById("display").innerHTML+="<img src='cirkel.jpg' width='75' height='75' border='1' onClick='clicked("
      document.getElementById("display").innerHTML+=ix;
      document.getElementById("display").innerHTML+=",";
      document.getElementById("display").innerHTML+=iy
      document.getElementById("display").innerHTML+=")'";
      document.getElementById("display").innerHTML+="id='";
      document.getElementById("display").innerHTML+=ix;
      document.getElementById("display").innerHTML+="-";
      document.getElementById("display").innerHTML+=iy;
      document.getElementById("display").innerHTML+="'>";

til:

      document.getElementById("display").innerHTML+="<img src='cirkel.jpg' width='75' height='75' border='1' onClick='clicked("+ix+","+iy+")' id='"+ix+"-"+iy+"'>";

Hvilket rettede én af fejlene.

Den anden fejl er her:

for(iy=0;iy<=5;iy++)
  {
    for(ix=0;ix<=6;ix++)
    {
      if(map[iy][ix]==0 && map[iy][ix+1]==0)
      {
      document.getElementById(ix+"-"+iy).innerHTML="jesfdskf";
      }
    }
  }

Du kan ikke skrive til et <img>-tags innerHTML (og som Roenving siger, er innerHTML ikke gyldigt), og derudover er billedet slet ikke lavet endnu.

Der bliver jo først lavet, når init()-funktionen kører i body's onload-event.

I stedet for innerHTML kan man bruge:
ELEMENT.appendChild(document.createTextNode("test"))
Det kan dog kun bruges til tekst. Skal du oprette elementer, må det gøres med f.eks.:
ELEMENT.appendChild(document.createElement("img"));
Avatar billede w13 Novice
11. juni 2008 - 10:45 #4
Ang.:
      document.getElementById("display").innerHTML+="<img src='cirkel.jpg' width='75' height='75' border='1' onClick='clicked("+ix+","+iy+")' id='"+ix+"-"+iy+"'>";

så tror jeg bare, du manglede et mellemrum foran id-attributten.
Avatar billede w13 Novice
11. juni 2008 - 10:51 #5
Du kan prøve at søge på google efter:
JavaScript "Document Object Model"

Document Object Model (DOM) er bl.a. appendChild-funktionen, som gør det muligt at tilføje et element inde i et andet element.
Avatar billede tobiassen Nybegynder
11. juni 2008 - 10:59 #6
okay, tak for hjælpen :)

hvordan kan jeg så sætter så at man faktisk vinder hvis man har 4 på stribe ?
og en slags spil igen knap
Avatar billede w13 Novice
11. juni 2008 - 11:07 #7
Har du rettet fejlene? I så fald så vis lige din nye kode.
Avatar billede tobiassen Nybegynder
11. juni 2008 - 11:30 #8
koden ser nu således ud:

<html>

<head>

<script>
turn=0;

map =
Array(
  Array(0,0,0,0,0,0,0),
  Array(0,0,0,0,0,0,0),
  Array(0,0,0,0,0,0,0),
  Array(0,0,0,0,0,0,0),
  Array(0,0,0,0,0,0,0),
  Array(0,0,0,0,0,0,0)
);

function init()
{
  document.getElementById("display").innerHTML="";
  for(iy=0;iy<=5;iy++)
  {
    for(ix=0;ix<=6;ix++)
    {
     
      document.getElementById("display").innerHTML+="<img style='border:0px;' src='cirkel.jpg' width='75' height='75' border='1' onClick='clicked("+ix+","+iy+")' id='"+ix+"-"+iy+"'>";

    }
    document.getElementById("display").innerHTML+="<br />";
  }

  paint()
}

function clicked(x,y)
{
  tmp=6;
  for(iy = 5; iy >= 0; iy--)
  {
    if(map[iy][x]>0)
      tmp=iy;
  }
  map[tmp-1][x]=turn+1;
  turn=!turn;
  paint();
}

function paint()
{
  for(iy=0;iy<=5;iy++)
  {
    for(ix=0;ix<=6;ix++)
    {
      if(map[iy][ix]==0)
      {
        document.getElementById(ix+"-"+iy).src="cirkel.jpg";
      }
      if(map[iy][ix]==1)
      {
        document.getElementById(ix+"-"+iy).src="cirkelr.jpg";
      }
      if(map[iy][ix]==2)
      {
        document.getElementById(ix+"-"+iy).src="cirkelb.jpg";
      }
    }
  }
}

for(iy=0;iy<=5;iy++)
  {
    for(ix=0;ix<=6;ix++)
    {
      if(map[iy][ix]==0 && map[iy][ix+1]==0)
      {
      document.getElementById(ix+"-"+iy).innerHTML="jesfdskf";
      }
    }
  }
</script>

</head>




<body onload="init()">
<h1><b>4 på stribe</b></h1>
<br />
<center>
  <table cellspacing="0">
    <tr>
      <td id="display">
      </td>
    </tr>
    <tr>
      <td>
Version 0.2
      </td>
    </tr>
  </table>
</center>
</body>

</html>
Avatar billede w13 Novice
11. juni 2008 - 12:53 #9
Nej, det ved jeg ikke, hvordan du skulle lave med den kode.
Avatar billede tobiassen Nybegynder
11. juni 2008 - 13:34 #10
okay, men smid et svar :)
Avatar billede w13 Novice
11. juni 2008 - 13:34 #11
Okidokes. =)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester





White paper
SAP: Skab værdi og minimér omkostninger med effektiv dokumenthåndtering