Övning JS Interaktivitet Instruktioner

Spara din webbsida efter varje deluppgift med namn enligt modellen js_interaktivitet_1.htm, js__interaktivitet_2.htm, osv.
Du kan gärna bygga vidare på uppgiften innan men det är alltid bra att säkra tidigare fungerande kod med att byta namn på filen.

  1. Skapa en webbsida med en canvas. Se till att en liten ruta åker fram och tillbaks horisontellt i din canvas med hjälp av en timer.

  2. Lägg till en start/paus/stopp knapp på din sida.

  3. Skapa en webbsida med en canvas. Se till att en liten ruta styrs och flyttar beroende på vilken piltangent du trycker på.

  4. Skapa en webbsida med en canvas. Kombinera de 3 första uppgifterna. Se till att en liten ruta åker horisontellt i din canvas. Riktningen beror på vilken piltangent du tryckt på senast. Det vill säga en tangenttryckning ändrar hur den ska förflytta sig. Slälvklart ska man kunna pausa, osv.

  5. Utöka så det går att få rutan att åka åt alla fyra hållen.

  6. Vad händer vid canvaskanterna, gör en som kommer in på motsatta sidan.

  7. Slumpa ut en lika stor ruta i en annan färg. Kolla om de träffar varandra. Fundera över steglängder, figurstorlekar, koordinater för slumpade platser, osv. En bra logik förenklar programmerandet väsentligt.

  8. När den träffar slumpa ut en ny.

  9. Räkna träffar, lägg till en timer.

  10. Bygg vidare efter egen fantasi.

    När ni är klara ska ni publicera sidorna på ert webbkonto.


    Lycka till!