Spelprogrammering med HTML5 och JavaScript

Presentation för SITSNET, 2013-05-13
Mikael Tylmad / @mtylmad

Detta har hänt

  • HT 2010, spelprogrammering på Södertörns friskola
  • HT 2011, 5:e seminariet för SITSNET
  • Detta är som att stoppa hostmedicin i gelehallon
  • VT 2012, utgåva 1 av boken
  • VT 2013, utgåva 2 av boken

Grundidé, varför JavaScript?

  • Riktig kod
  • Ultrasnabba resultat
  • Roliga resultat
  • Inget IDE
  • Viktigt språk för framtiden

Utgåva 1

spel.html

<html>
   <head>
     <script src="http://spelprogrammering.nu/library.js"></script>
     <script src="kod.js"></script>
   </head>
   <body>
     <canvas id="canvas" width="800" height="400"></canvas>
   </body>
</html>

kod.js

function start()
{
  circle(100, 100, 20, "red");
}

Utgåva 2

Lättare för nybörjare

spel.html

<script src="http://spelprogrammering.nu/simple.js">
function start()
{
  circle(100, 100, 20, "red");
}
</script>

Fler och bättre uppgifter

Kompletta exempel på spel

  • Katt och råtta
  • Tron/masken
  • Pong
  • Peka-träffa

Bättre stöd för ljud och petskärm

Mycket mer matematik och fysik

Matematik och fysik har varsitt kapitel, totalt ca 100 sidor

Kombinera med webbteknik

<!DOCTYPE html>
<html lang="sv">
  <head>
    <meta charset="utf-8" />
    <title>Min fina hemsida</title>
    <link rel="stylesheet" type="text/css" href="stilmall.css" />
  </head>
  <body>
    <canvas id="minCanvas" width="500" height="400"></canvas>
    <script src="http://spelprogrammering.nu/advanced.js"></script>
    <script>
      rityta = new RoboroCanvas('minCanvas');
      rityta.circle(100, 100, 50, "red");
    </script>
  </body>
</html>

Mycket exempelkod

Över 4000 rader JavaScript, och allt finns tillgängligt gratis online

http://www.spelprogrammering.nu/

Framtiden

Online-editering

http://www.spelprogrammering.nu/koda/

Komplett facit med lösningsförslag

http://www.spelprogrammering.nu/facit/

Lektionspaket för matematik och fysik

Genom ett samarbete med .SE ska vi utveckla ett antal färdiga lektionspaket där man kombinerar programmering med matematik och fysik.

Projektet utförs tillsammans med en matematik- och fysiklärare, och vi kommer testa alla lektioner på riktiga klasser i olika årskurser.

Spelprogrammering med seniorer

Utgåva 3?

Vi vill att fler ska använda JavaScript i sin undervisning! Kom gärna med åsikter och önskemål.

Slut

E-post: mikael@tylmad.com
Twitter: @mtylmad
Blogg: http://mikael.tylmad.com