Hoe maak je een..Schuifpuzzel
Gepubliceerd op 1 augustus 2006
Een schuifpuzzel is een simpel spelletje dat de speler laat oefenen met een afbeelding.
Werking: Onafhankelijk van de techniek (Flash of bijvoorbeeld Java) wordt een afbeelding in stukken verdeeld, deze stukken worden dan gehusseld en opnieuw geplaatst. Daarna wordt een stuk weggenomen en kan het puzzelen beginnen!
Met Macromedia Flash [aangeraden]
Macromedia Flash is vanwege zijn grafische mogelijkheden en de grote aanwezigheid op computers de beste manier om een spelletje te maken.
Dit flashbestand is simpelweg te gebruiken voor allerlei achtergrondafbeeldingen. Je hoeft slechts 3 instellingen te doen, die zich in het eerste frame bevinden:
aantal_stukjes_breedte = {aantal}; (bijvoorbeeld: 3)
aantal_stukjes_hoogte = {aantal}; (bijvoorbeeld: 3)
achtergrond_afbeelding = "{bestandsnaam.extensie}"; (bijvoorbeeld: "hart.jpg")
Daarnaast moet je even de lengte en breedte van het flashbestand aanpassen aan de grootte van je afbeelding.
Bekijk hier de schuifpuzzel
Download de broncode (FLA) van de schuifpuzzel
[Flash
32 Kb
]
Gerelateerde kennis
Spelelementen: Snel een spelletje met Flash
Een korte uitleg van de belangrijkste Actionscript code
frame 1 - Hier wordt voor het eerst de achtergrondafbeelding ingeladen (in movieclip afb). Belangrijk is het weten van de hoogte (afb_hoogte) en breedte (afb_breedte). Als de afbeelding is ingeladen gaat de speler naar frame 2. frame 2 - In dit frame worden de losse stukjes gemaakt. Per stuk wordt de achtergrondafbeelding ingeladen (maar hoeft niet opnieuw te worden gedownload omdat deze inmiddels in de cache is opgeslagen). Als alle stukken de achtergrondafbeelding bevatten gaat de speler door naar frame 3.
frame 3 - In dit frame worden de delen van de achtergrondafbeelding die buiten het stuk vallen uit het zicht verwijderd doormiddel van een mask (movieclip mask). Vervolgens wordt het stuk op zijn juiste positie geplaatst.
frame 4 - Zodra er op de startknop gedrukt wordt komt de speler in frame 4 terecht. Hier wordt de puzzel gehusseld en kan het schuiven beginnen. Dit husselen gebeurt door de nummers van de stukken met daarvoor een willekeurig cijfer en een scheidingsteken in een array te stoppen. Als je deze array nu sorteert (hussel_array.sort()) en de nummer van stukken weer uitleest krijg je een willekeurige plaatsing van de stukken. Na het husselen van de stukken wordt een willekeurig stuk eruit genomen en kan het schuiven beginnen. Het schuiven gebeurt door een onPress eventhandler toe te wijzen aan ieder stuk. Bij iedere klik op een stuk wordt gekeken of dit stuk grenst aan het lege stuk. Zo ja wisselt dit stuk van positie met het lege stuk.
Alternatieve technieken
Een schuifpuzzel zie je af en toe ook met andere technieken uitgevoerd:
met Java
met Javascript
|
ThinkQuest Lounge