Webbteknik 2

Sifferspel med drag-and-drop

Detta är den avslutande uppgiften, där du arbetar mer självständigt med ett program. Betygsskalan är denna gång U, G, VG, så beskrivningen och därmed även kraven och bedömningen är uppdelad i G och VG. Det program som ska skapas är ett litet spel med olika brickor, där interaktionen sker genom “drag-and-drop”. Följande film demonstrerar hur det färdiga programmet ska fungera:

9 min

Du arbetar med uppgiften under kursens fyra sista veckor. Utgå från arbetsmaterialet u2.zip, där det finns filer med HTML- och CSS-kod. Dessa filer får inte förändras, utan de ska vara som de är. Det finns också en JS-fil, men den är denna gång tom. Det är i den filen du ska lägga till din JavaScript-kod.

Funktionsbeskrivning

Du ska skapa ett program för ett litet spel. Det finns totalt 40 brickor med siffror. Spelaren får fyra brickor i taget och ska placera ut dem på en spelplan med 4x4 rutor. Målet är att få så många rader och kolumner som möjligt med stigande serier både i rader och kolumner, då spelplanen är fylld. I en stigande serie är numret på varje bricka högre än numret på föregående bricka. Poäng ges för varje korrekt rad och kolumn. Programmet och interaktionen med användaren visas i ovanstående film. Funktionaliteten beskrivs också i nedanstående punkter.

Normalt flöde i spelet

Följande punkter är obligatoriska för betyget G.

  • Då man klickar på knappen för nytt spel, ska spelet initeras samt knappen för nytt spel inaktiveras och knappen för nya brickor aktiveras.
  • Då man klickar på knappen för nya brickor, får man fyra nya brickor som väljs slumpmässigt bland brickorna 1-40. Samma nummer ska inte kunna väljas mer än en gång i en spelomgång. De nya brickorna placeras i rutorna ovanför knappen.
  • Man kan sedan dra de nya brickorna till valfri tom ruta på spelplanen. Man drar en bricka i taget i valfri ordning.
    • Man ska endast kunna släppa brickan över en tom plats i spelplanen. Medan man drar, ska de tomma platser man drar över markeras med en annan bakgrundsfärg.
  • Då man dragit en bricka till spelplanen, ska dess plats bland de fyra brickorna bli en tom ruta. Den tomma rutan ska inte kunna dras.
  • Då alla nya brickor dragits till spelplanen, ska knappen för nya brickor aktiveras igen, så att man kan klicka fram fyra nya brickor.
  • Då spelplanen är fylld ska alla rader och kolumner kontrolleras. Om det är en stigande serie, dvs numret i varje bricka är lägre än numret i efterföljande bricka, ska det markeras med en grön bock till höger om raden eller under kolumnen. I annat fall ska det markeras med ett rött kryss.
    • Använd klasserna check eller cross, för att lägga in bock eller kryss.
  • Antal korrekta serier räknas och detta antal blir poäng, som skrivs ut i elementet för meddelande.
  • Poängen för en spelomgång skall visas i rutan i det övre högra hörnet. Där finns också plats att visa “Antal spel”, men detta är inte obligatoriskt för betyget G.
  • Då spelet är klart, ska knappen för nytt spel aktiveras igen, så att man kan spela en gång till. Då man sedan klickar på knappen för nytt spel, ska spelplanen rensas och meddelanden från föregående spel tas bort, och poängen nollställas.

Tillägg för VG

Följande tillägg är inte obligatoriska för G, men måste finnas med för betyget VG.

  • Istället för att bara visa poängen för det senaste spelet skall poängen ackumuleras över flera spelomgångar. Den ackumulerade poängen ska visas i rutan i det övre högra hörnet. Du skall också visa hur många spelomgångar som spelats hittills.
  • Efter en slumpmässigt vald tid från det att spelet startas ska det dyka upp ett spöke som tar bort fyra brickor med nummer från spelplanen. Skulle det inte finnas så många brickor på spelplanen, tas alla de som finns bort. Därefter sätts en ny slumpmässigt vald tid och ett nytt spöke kan dyka upp igen. Detta fortsätter tills man fyllt hela spelplanen med nummer. Då spelet avslutas, ska inget nytt spöke kunna dyka upp. Gången för detta ska vara:
    1. Då spelet startas initieras en timer med en slumpmässigt vald tid på mellan 30 och 60 sekunder (eller annan tid som du finner lämplig).
    2. Då timerns tid gått ut visas bilden på spöket och fyra (eller så många som finns) av de brickor med nummer markeras med klassen ghostTile.
    3. Efter ytterligare 2 sekunder tas brickorna bort, genom att rutans nummer tas bort och klassen ghostTile tas bort. Brickornas nummer läggs tillbaks i mängden med nummer som kan dras för nya brickor. Samtidigt döljs också bilden på spöket.
    4. Timern för spöket initieras igen med en ny slumpmässigt vald tid.

Tips

På följande sida finns en del tips för sammansättning av programmet, och användbara CSS-klasser som redan finns definierade: Tips för Uppgift 2