Brugernavn:




Kodeord: Husk
Forside Forum Artikler Downloads Søg
 

At lave et rykkesystem i JavaScript


I denne artikel forklare jeg hvordan man laver et simpelt rykke system i Javascript.

Mange mennesker, og jeg siger MANGE prøver at fixe en 3Dchat. Et typisk eksempel på deres alm. måde at lave et rykkesystem på af at de bare laver fx. 25 billedere og lave linket "ryk.php?felt=1" osv. på billedet.

Men der er en meget nemmere måde at gøre det på.

Lad os så komme igang!
Start med at lave din egen bruger, det gør du via. en <div. Kunne fx. se sådan herud:

  1. <div id="mig" style="position: absolute; width: 100px; height: 100px;">
  2. <img src="http://dinside.dk/dinfigur.gif"">
  3. </div>



Jamen, hvad så med felterne?
Så skal du lave en funktion til at rykke hen på de pågældene felter.
Et eksempel (MED SKRÅ FELTER) - ja, ligesom netstationens!

  1. <script>
  2. function felter(){
  3. felt_id = 1;
  4. for (row = 0; row < 7; row++) {
  5.   top_px = row*40+2;

  6. if(row % 2){
  7. colantal = 9;
  8. leftplus=33;
  9. } else {
  10. colantal = 10;
  11. leftplus=3;
  12. }

  13. for (col = 0; col < colantal; col++) {
  14. left_px = col*60;
  15. left_px = left_px + leftplus;
  16. z = 200 + felt_id - 1;


  17. document.getElementById("chat").innerHTML = document.getElementById("chat").innerHTML+"<div id="felt"+felt_id+"" style="Z-INDEX: "+z+";POSITION: absolute;top:"+top_px+"px;left:"+left_px+"px;"><img width="60" height="80" src="felt.gif" onclick="ryk("+left_px+","+top_px+");"></div>";

  18. felt_id++;
  19.   }
  20. }
  21. }
  22. felter();
  23. </script>


Når du trykker på et felt siger den bare et opbjekt er ventet!
Det fordi du netop mangler en funktion til at rykke rundt med din "<div>" såkaldte figur.

Scriptet kunne typisk se sådan her ud:

  1. <script>
  2. function ryk(x,y)
  3. {
  4. document.getElementById("mig").style.top = y;
  5. document.getElementById("mig").style.left = x;
  6. }
  7. </script>

Sidst redigeret 19:15 - 05/06/2006
Oprettet af:

Javascript

Point modtaget: 0

Rate:
20:40 04/06/2006

Kommentarer

Giv din mening tilkende om denne artikel, eller læs andres.
Har du spørgsmål eller brug for hjælp til denne artikel henvises du til forummet.
Rigtig nice artikel, nu er jeg ikke lige den store javekoder PHP koder eller noget andet så det var en dejlig lærerig artikel ;D
Oprettet af:
  Mail
16:12 20/10/2006
JayKay, du er også teenager...
Oprettet af:
  Mail
15:14 18/12/2006
Stop det COPY-PASTE!
http://www.s2a.dk/articles_read.asp?id=267
Oprettet af:
  Mail
17:34 27/02/2008
Øh rykkersystemet virker ikk www.gnoz.dk/chattest.php
Oprettet af:
  Mail
17:18 18/04/2008
Du skal være oprettet og logget ind for at kommentere en artikel
Copyright © Rowl.dk v/ Michael Raagaard | 2005-12 | Alle rettigheder forbeholdes