Kmom10: Projekt och examination

Detta kursmoment avslutar och examinerar kursen.

Du jobbar enskilt och tar inte hjälp av någon. Det du lämnar in är ditt eget arbete och du har inte låtit en Ai-bot göra ditt jobb.

Upplägget är enligt följande:

Projektet och redovisning (20-60h)

Totalt omfattar kursmomentet (07/10) ca 20+20+20 studietimmar. Du kan själv styra din arbetsinsats genom att välja vilka optionella delar du utför.

Förutsättning

Du har jobbat igenom kmom01-kmom06 (och redovisat dem). Det finns ingen anledning att påbörja projektet innan du är klar med kmom06.

Bedömning och betygsättning

Det finns ett dokument som beskriver grunderna för bedömning och betygsättning av projektet och kursen som helhet.

Projektidé och upplägg

Du skall bygga en responsiv webbplats och en webbapplikation som innehåller HTML, CSS och JavaScript.

Ungefär hälften av kraven är kopplade till HTML/CSS och hälften till JavaScript.

Det finns optionella delar som du kan välja att göra för att öka dina chanser till ett högre betyg.

Projektspecifikation

Det är dags att marknadsföra dig själv och dina kunskaper. Spelet Duckhunt blev en succé världen över och marknaden skriker efter en uppföljare. Du funderar på om det ska bli “Duckhunt 2” eller ett helt nytt tema.

Du skall alltså utveckla Duckhunt 2, eller ett liknande spel där du själv kan bestämma temat för det spelet.

Du skall göra en onepage som marknadsför spelet och som innehåller information om spelet.

Generell struktur

Du jobbar i mappen public/.

Skapa filen public/project.html och lägg till menyvalet i navbaren likt tidigare.
Skapa filen public/js/project.js och läs in den i project.html. Det är “startfilen” för din JavaScript.
Skapa filen public/css/project.css som sköter stylen för uppgiften.
Lägg till i navbaren så att det finns en länk till project.html.

När du är klar bör du ha följande filer, tillsammans med dina tidigare:

Directorypublic
- Directoryjs
  - project.js
- Directorycss
  - project.css
- project.html

När man går till project.html så kommer man till din onepage som visar upp och makrnadsför ditt spel.

Själva spelet kan du göra spelbart antingen direkt i din onepage eller i en separat fil. Om du gör spelet spelbart direkt i din onepage så skall spelet täcka hela webbsidans utrymme.

Krav 1: Landningssida för spelet, onepage

Du ska lansera spelet och skapa en presentations- och marknadsföringssida som inkluderar möjligheten att testa spelet. Detta skapar du i form av en onepage.

I den säljande texten ska du berätta om de olika kraven som är implementerade och vad man kan göra i spelet.

Visualisera spelet med skärmdumpar och/eller bilder. Du kan även skapa en kort video som visar spelet i aktion (video får betrakts som ren överkurs, men ett trevligt inslag).

Gör vad du kan för att sälja in spelet och skapa intresse för det. Tänk:

“Make it look good.”

Din onepage skall ha en liknande struktur som i kmom03 och vara indelad i sektioner, rader, kolumner. Du väljer själv hur du presenterar spelet och hur du organiserar dina olika sektioner.
Din onepage skall vara stylad med CSS så att den har ett rimligt och attraktivt utseende.
Din onepage skall vara vara responsiv.
Din onepage skall innehålla en header med en navbar. I inledningen av din onepage skall det finnas bilder som refererar till spelet.
Det skall finnas en footer som är indelad i tre delar. Informationen som presenteras skall vara relevant för projektet och spelet.

Krav 2: Spelet Duckhunt, version 2

Du ska vidareutveckla ditt spel från kursmoment 06, alternativt gör du en egen liknande spelídé där liknande krav kan uppfyllas.

Din inlämning skall uppfylla kraven från kmom06 samt nedanstående krav.

Konfigurationen som styr spelets inställningar ska flyttas till egna filer (easy.json, normal.json och hard.json). Konfigurationen som ska läsas in med fetch. Inspelningar kan gälla till exempel svårighetsgraden på spelet, hastigheten och storleken på föremålet, tid som föremål visas, med mera.
Innan man startar spelet skall man kunna välja vilken “svårighetsgrad” man vill spela på via ett formulär. Rätt JSON-fil ska då läsas in och användas i spelomgången.
Du skall ha nya bakgrundsbilder och nya bilder på ankor. Här ska du då antingen hitta eller skapa andra bilder.
Gör en sektion i din onepage där du berättar som spelet och spelidén. Lägg till en bild för att visualisera hur spelet ser ut. Förklara för användaren hur spelet fungerar och styrs.
I din onepage skall det finnas en rad/sektion som visar hur man kommer igång med spelet och spelar en spelomgång. Spelet kan startas i din onepage eller i en separata fil.

Krav 3: Highscorelista i tabell

Ditt spel skall innehålla poängberäkning och highscorelista.

Efter varje runda man spelat spelet ska poängen tillsammans med svårighetsgraden sparas i en highscorelista. När man spelat en spelomgång så visas highscorelistan i en tabell. När sidan för spelet laddas om i webbläsaren så kan highscorelistan nollställas.

Visa poängen när man spelar en spelomgång.
En spelomgång har en tidsbegränsning, t.ex. 30 sekunder. Man ser att tiden räknas ner när man spelar spelet. När tiden når 0 är spelomgången över.

Gör en sektion i din onepage där du beskriver denna “feature” och hur den fungerar. Lägg till en bild för att visualisera hur highscorelistan ser ut.

Krav 4 (optionellt): CSS animationer

Förhöj spelupplevelsen genom att lägga till animationer med CSS till ditt spel. Välj minst tre av följande förslag.

När man klickar på objektet försvinner det med en animation. Kanske exploderar/imploderar det?
Objektet ska röra sig på skärmen i godtycklig riktning. Det ska förflytta sig i sidled, uppifrån och ned eller i en slumpmässig riktning.
Gör en intro till ditt spel, precis innan spelet börjar så händer det någon form av animation eller “splash screen” som visar spelets namn.
Gör en outro till spelet, något som händer (animeras) när spelet är avslutat.
Valfri animation.

Gör en sektion i din onepage där du beskriver dessa animationer och hur de fungerar. Lägg till en bild för att visualisera hur animationerna ser ut.

Krav 5 (optionellt): Extra features

Gör ditt spel mer intressant och roligt med extra features. Välj minst tre av följande förslag.

Ljud: Lägg till ljudeffekter i spelet.
Fler objekt: Lägg till fler typer av objekt som kan dyka upp i spelet där olika typer ger olika för/nackdelar.
1. Ett objekt ger extra bonuspoäng när man klickar på det.
2. Ett objekt som inte får klickas, om man klickar får man minuspoäng.
3. Ett objekt som ger extra tid.
4. Ett objekt som förstör alla andra objekt, om man klickar på det.
Valfri likvärdig feature.

Gör en sektion i din onepage där du beskriver dessa extra features och hur de fungerar. Lägg till bilder för att visualisera.

Krav 6 (optionellt): Duckhunt spelbart på mobil/läsplatta

Du måste ha utfört krav 4 och 5, för att kunna göra detta krav.

Gör så att ditt spel går att spela på mobilen eller på en läsplatta.

Gör en sektion i din onepage som beskriver hur du gjort för att spelet ska gå att spela på mobil/läsplatta. Lägg till bilder för att visualisera hur det ser ut på mobilen/läsplattan.

ALTERNATIVT

Gör så att spelet är indelat i olika nivåer med ökande svårighetsgrad. Du kan t.ex. börja med att göra en “easy” nivå, sedan en “normal” nivå och slutligen en “hard” nivå.

För att klara en nivå måste man nå ett visst antal poäng innan tiden är slut. Klarar man det så hoppar man till nästa nivå. Annars är spelet över.

Lägg till i highscorelistan vilken pong och nivå och svårighetsgrad som spelaren nådde.

Krav inlämning

Skriv all din kod i din branch main.
Dina webbsidor skall validera i W3C HTML validator.
Dina webbsidor skall validera i W3C CSS validator (när det är rimligt).
Din webbplats skall passera npx eslint.
Din webbplats skall gå att starta via npx http-server.
När du är klar så taggar du ditt repo (v7.0.0 eller högre) och pushar till GitHub.
Din webbplats skall vara tillgänglig via en privat länk på GitHub Pages.
När allt är klart och fungerar så gör du en pullrequest (PR) mot branchen bth/submit/kmom10. Läs om hur du gör en PR för kmom10”.

Krav redovisning

Se till att följande frågor besvaras i din redovisningstext.

För varje krav du implementerat, dvs 1-6, skriver du ett textstycke om ca 5-10 meningar där du beskriver vad du gjort och hur du tänkt. Poängsättningen tar sin start i din text så se till att skriva väl för att undvika poängavdrag. Använd rubriker så din text blir lätt att läsa. Missar du att skriva/dokumentera din lösning så blir det 0 poäng. Du kan inte komplettera en inlämning för att få högre betyg.
Skriv ett allmänt stycke om hur projektet gick att genomföra. Problem/lösningar/strul/enkelt/svårt/snabbt/lång tid, etc. Var projektet lätt eller svårt? Tog det lång tid? Vad var svårt och vad gick lätt? Var det ett bra och rimligt projekt för denna kursen?
Vilken är din TIL för detta kmom?
Vilken är din TIL för kursen som helhet?
(Valfritt) Avsluta med ett sista stycke med dina tankar om kursen och vad du anser om materialet och handledningen (ca 5-10 meningar). Återkoppla till lärarteamet och förslå eventuella förbättringsförslag till kommande kurstillfällen.
(Valfritt) Är du nöjd/missnöjd? Kommer du att rekommendera kursen till dina vänner/kollegor? På en skala 1-10, vilket betyg ger du kursen?
Redovisning / redovisningsvideo
1. Du skall förbereda och utföra en slutpresentation av ditt projekt. Du kan läsa hur du kan förbereda dig i dokumentet “Planera din slutpresentation”.
2. Campus Du redovisar muntligt i klassrummet under schemalagd tid. Du förbereder en kort presentation (3-5 min) där du visar upp din lösning och berättar om hur du löst kraven. Du kan använda bilder, skärmdumpar eller liknande för att visa upp din lösning. Du kan även visa upp din kod om du vill. Efter din presentation så får du frågor från lärare och/eller dina kurskamrater.
3. Distans och kurspaket Spela in en redovisningsvideo och lägg länken till videon i din PR (redigera din PR och lägg in den tillsammans med länken till din GitHub pages). Detta kan du göra dagen efter projektets deadline. Läs mer om hur du kan spela in en redovisningsvideo med OBS.