Kmom05: HTML5 och Canvas

Du skall bygga ett enklare spel i HTML5 Canvas. Det låter både enkelt och svårt och som vanligt så väljer du en väg som passar din kunskapsnivå och ambitionsnivå.

Vi skall dels kika på hur HTML5 och Canvas fungerar och grunderna för att rita i en canvas. Vi titta på hur man gör animeringar i en canvas och hur man kan styra objekt, eller en spelare, med tangentbordet. Detta gör vi genom ett par övningar där vi skapar ett rymdskepp som vi styr.

Så fort ett projekt växer så är det viktigt med att organisera sin kod. Därför passar det bra att kika på objektmodellen i JavaScript och hur objektets prototyp fungerar.

Framfördig har du alltså en spelinfluerat övning i canvas med lite mer avancerad och organiserad programmering med JavaScript. Det är bra, men inte nödvändigt, om du fräschar upp dina gamla kunskaper i matematik med vektorberäkningar, sinus och cosinus samt känner till Newtons lagar om krafter. :-)

(Momentet omfattar totalt ca: 20 studietimmar, inklusive läsning, arbete, problemlösning och eftertanke.)

#Läsanvisningar

(ca: 2-4 studietimmar, inklusive extra läsning i referenslitteraturen efter eget val)

#Kurslitteratur

Läs följande:

1. Pro HTML5 Programming

   • Ch 2 Using the HTML5 Canvas API
   • Ch 3 Working with HTML5 Audio and Video (om du vill använda ljud i ditt spel)

2. JavaScript: The Good Parts

   • Ch 2 Objects (repetera)
   • Ch 5 Inheritance

Böckerna ger dig grunden till de övningar som du senare skall göra.

#Lektionsmaterial

Följande föreläsningsmaterial användes i samband med campus-kursen höstterminen 2013. Det kan vara av intresse att skumma igen – även för distansstudenten.

• Översikt av kursmomentet.

#Lästips

Här finns mer att läsa.

• Om prototypbaserad programmering på Wikipedia:
  http://en.wikipedia.org/wiki/Prototype-based_programming

• Artikel om prototyper och arv i JavaScript (VIKTIG):
  http://msdn.microsoft.com/en-us/magazine/ff852808.aspx

• Artikel om att skapa JavaScript objekt med ett annat objekt som mall:
  http://javascript.crockford.com/prototypal.html

• Artikel om publika, privata och privilegierade metoder i objekt:
  http://javascript.crockford.com/private.html

• Läs på MDN om Object.create, att skapa ett nytt objekt utifrån ett annat objekt, och se ett exempel på klassiskt arv i JavaScript:
  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create

• Tutorials för att komma igång med HTML5 Canvas finns på MDN:
  https://developer.mozilla.org/en-US/docs/Canvas_tutorial

Här följer lite kuriosa om matematik, fysik och krafter, överkurs för den som vill ha fräscha upp sina gamla matte och fysik-kunskaper.

• Newtons lag om rörelse:
  http://en.wikipedia.org/wiki/Newton%27s_laws_of_motion

• Krafter i form av acceleration och luftmotstånd,
  http://en.wikipedia.org/wiki/Acceleration http://en.wikipedia.org/wiki/Drag_%28physics%29

• Om Vektorer:
  http://en.wikipedia.org/wiki/Vector_space

#Övningar & Uppgifter

(ca: 14-16 studietimmar)

#Övningar

Gör följande övningar, de behövs för att klara uppgifterna.

• Häng med när Mikael försöker bygga grunderna till en klon av det klassiska gamla spelet Asteroids.
  Ett spel i HTML5 Canvas med JavaScript och prototypbaserad programmering

Jobba igenom övningen som innehåller kodningsövningar och en del läsanvisningar som du skall göra. Detta är kärnan i kursmomentet och ger dig grunden att stå på.

#Uppgifter

Följande uppgifter skall utföras och resultatet skall redovisas via me-sidan.

1. Gör ett enkelt spel i HTML5 Canvas. Du skall använda prototypbaserad programmering för att strukturera din kod. Ditt spel kan vara enkelt eller svårt. Hitta på någon egen enkel idé eller gör en klon av ett befintligt gammalt klassiskt spel. Planera så att du håller tiden för kursmomentet.

Har du ingen bra idé så kan du välja att göra en klon av Atarix Lunar Lander. Eller ett enkelt bilspel som styr runt på en bana i jakt på snabbare varvtider. Mer inspiration finner du på Wikipedias kategori om Arcade-spel.

#Extra

Lägg till ljud till spelet med HTML5 Audio.

Gör ett riktigt bra spel så kanske du till och med kan använda det som ett utgångspunkt för ett avslutningsprojekt i kursen.

#Resultat & Redovisning

(ca: 1-2 studietimmar)

1. Skriv redovisningstext på din me-sida. Skriv ett stycke (minst 15 meningar) om kursmomentet. Reflektera över svårigheter, problem, lösningar, erfarenheter, lärdomar, resultatet, etc.

2. Se till att följande frågor besvaras i texten:

   • Vilka möjligheter ser du med HTML5 Canvas?
   • Hur avancerat gjorde du din spelfysk (om du överhuvudtaget har någon i ditt spel)?
   • Beskriv och berätta om ditt spel. Förklara hur du använder objekt och prototyper.
   • Gjorde du något på extrauppgiften?

3. Kopiera texten och lämna in den på redovisningen ITs tillsammans med en länk till din me-sida. Läraren kommer snabbt kolla igenom dem. Betyg är G (godkänd) eller komplettera (komplettera -> gör om -> gör bättre). Betyget baseras på din redovisningstext samt att din me-sida fungerar.

4. Ta ytterligare en kopia av redovisningstexten och gör ett inlägg i kursforumet. Visa upp vad du gjort och berätta att du är klar. Länka till din me-sida.

Klart! Läs gärna dina med-studenters inlämningar och ställ dina frågor i forumet. Se till att du får dina frågor besvarade.

#Revision history