Javascript och spel: Skillnad mellan sidversioner

Från Wikiskola
Hoppa till navigering Hoppa till sök
 
(9 mellanliggande sidversioner av samma användare visas inte)
Rad 1: Rad 1:
== Lär dig programmering i browsern ==
{{:Introduktion till programmering på Khan Academy}}
{{:Programmering på Code Academy}}
== Javascript ==
Den här kursen använder boken och hemsidan [http://spelprogrammering.nu spelprogrammering.nu]
Den här kursen använder boken och hemsidan [http://spelprogrammering.nu spelprogrammering.nu]


Jag kommer att lägga in aktiviteter riktade mot enkla spel i fysiken och i matematiken
Jag kommer att lägga in aktiviteter riktade mot enkla spel i fysiken och i matematiken


''De nedanstående avsnitten ligger som mallsidor och finns även transkluderade javascriptsidan. Tänk på att du hamnar i en mall när du redigerar men det fungerar ungefär som vanligt''
''De nedanstående avsnitten ligger som mallsidor och finns transkluderade på sidan nedan. Mallarna används även på sidan för datorteknik. Tänk på att du hamnar i en mall när du redigerar men det fungerar ungefär som vanligt''


{{:lite javascript}}
{{:lite javascript}}
Rad 57: Rad 64:


* [http://en.wikipedia.org/wiki/JQuery jQuery] används på 55% av de största sajterna. Finns i Mediawiki. Open Source (MIT-licens).
* [http://en.wikipedia.org/wiki/JQuery jQuery] används på 55% av de största sajterna. Finns i Mediawiki. Open Source (MIT-licens).
== Testa Khan ==
[http://www.khanacademy.org/cs/welcome-to-computer-science/882454257 Här är bra att börja]  . Khan-dataövningar med grafik. Roliga figurer.
<html>
<h2><a href="http://www.khanacademy.org/cs/intro-to-coloring/844038377">Intro to Coloring</a></h2> <iframe src="http://www.khanacademy.org/cs/intro-to-coloring/844038377/embedded?editor=yes&amp;buttons=yes&amp;author=yes" style="width:940px;height:440px;border:0px;" frameborder="0" scrolling="no"></iframe> <p>Made using: <a href="http://www.khanacademy.org/cs">Khan Academy Computer Science</a>.</p>
</html>

Nuvarande version från 17 februari 2013 kl. 10.07

Lär dig programmering i browsern

Programmering på Khan Academy

Den här platsen är helt webbaserat och kräver inte några program på den egna datorn (utom en browsere). Dessutom ändrar man koden med menyer och ser resultatet direkt.

Mål för undervisningen Du ska få en känsla för hur program är uppbyggda av funktioner som har egenskaper vilka styr deras utsende
  1. Variabler
  2. Loppar
  3. Vilkorssatser


Börja koda själv!

Logga in med Facebook eller skapa ett konto på Khan på denna plats.

Figuren är uppgbyggd av rektanglar och ellipser.

De har position och storlek. Vi prövar att ändra litet i koden.

Klicka igång instruktionen med play-knappen under koden.

Alla exempel nedan kommer från Khan Academy och avsnittet Tutorials.

Alla program är i javascript. Det finns dokumentation, många förklaringar och du ka nspara dina program.

Här är ett exempel på hur det ser ut när man lär sig programmering på Khan.

Made using: Khan Academy Computer Science.

Animering

Lyssna och titta på instruktionen och testa sedan själv.

Tutorial: Intro to animation

Made using: Khan Academy Computer Science.

Interaktivitet

Interaktivitet är viktigt i spel och underhållning.

Made using: Khan Academy Computer Science.

Interaktiv animering

Detta är ett av de relaterade exemplen på avsnittet om animering ovan.

Made using: Khan Academy Computer Science.

Komplexitet

Ett till synes enkelt spel kan behöva mycket kod.

Detta spel går ut på att undvika kloten. Det är kul i sin enkelhet men det kräver en del av sin programmerare.

Keep Away From Balls

If-satser

Made using: Khan Academy Computer Science.


Enligt Terms of Use är Khan fritt att använda enligt: Creative Commons Attribution-NonCommercial-ShareAlike 3.0

Code Academy

Hur funkar Code Academy?

CodeAcademy är en sajt med interaktiva övningar där du kan lära dig flera olika programmeringsspråk. Det finns kurser i html, CSS, Python, Ruby, Javascript, APIS, mm.. Code Academy är annorlunda än Khan Academy. Den är mindre grafisk och mer inriktad på att du skriver kod.

Du loggar in på Code Academy med Facebook, Google eller Twitter. Sedan kommer CA ihåg vilka övningar du gjort så du kan fortsätta där du slutade gången innan.

I första html-övningen får man förklarat för sig hur man gör när man använder Code Academys sajt. Testa här.

Om du klickar på Me uppe till höger och My Profile kan du se vilka övningar du påbörjat och hur långt du kommit.

Vi ska lära oss javascript

Vi ska göra övningar på CodeAcademys grundkurs i javascript: Du kan börja här. Tanken är inte att hinna hela kursen på en lektion men vi kommer att göra så mycket att du förhoppningsvis vill fortsätta på egen hand.

Javascript och html

Om man vill se direkt hur koden fungerar behöver den finnas i en html-sida. Det kan man göra här. Och fler exempel här.

För lärare

  • Tips om hur man som lärare lägger upp kurser. Tips om hur man startar en datorklubb på skolan.

Javascript

Den här kursen använder boken och hemsidan spelprogrammering.nu

Jag kommer att lägga in aktiviteter riktade mot enkla spel i fysiken och i matematiken

De nedanstående avsnitten ligger som mallsidor och finns transkluderade på sidan nedan. Mallarna används även på sidan för datorteknik. Tänk på att du hamnar i en mall när du redigerar men det fungerar ungefär som vanligt

Lite Javascript

Javascript och spel Kod: CC By SA spelprogrammering.nu

En liten övning i skuggan


Html5, CSS3 och Javascript

Html5, CSS3 och Javascript är den nya standarden för hemsidor.

De stora företagen enats. W3C konsortium.

Html står för innehåll och struktur, CSS ger formen och Javascript ger interaktion och animation.

Jobba själv

Det vi ska göra nu tar omkring två lektioner men du får räkna med att jobba lite hemma också.

Vi kommer att använda TextWrangler som är gratisversionen av BBEdeit vilket är ett mycket populärt program att koda i. Fördelen med en speciell editor för kodning är bland annat att den färgmarkerar din kod så att du lättare upptäcker fel. Dessutom håller editorn koll på olika filtyper och extensions som .css, .js, .html mm.

Uppgift
  1. Skaffa editeringsprogrammet TextWrangler från App Store.
  2. Lägg alla filer i en och samma mapp på din dator. Spara rita.js, library.js och rita.html i en mapp på din dator och verifiera att det funkar. Ändra inte namn på filerna
  3. Pröva att ändra några mått och lägen för de geometriska figurerna i javascriptfilen rita.js. Spara. Titta hur det blev genom att öppna html-filen i Safari. Ha gärna Wrangler och Safari i två fönster bredvid varandra på skärmen.
  4. Rita en bakgrundsbild med cirklar, rektanglar och streck.
  5. Rita en liten figur som du kan använda i framtida animeringar och spel.
  6. Låt figuren vandra över skärmen.


Praktiska tips

  • Surfa med Safari
  • OM du använder Chrome - Spara som ren html

Javascript med animering

Javascript och spel Kod: CC By SA spelprogrammering.nu

En liten övning i skuggan

Nu ska vi göra saker som rör på sig.

Uppgift
  1. Som vanligt har vi förberett några filer. Lägg filerna i samma mapp som tidigare. Spara ner
    http://www.wikiskola.se/javascript/rita2.js
    Bild på en groda
  2. Ändra i html-filen så att du anropar rita2.js
  3. Gör så att grodan rör sig.
  4. Få den att stanna i rutan.
  5. Få bort spåret som den lämnar efter sig.
  6. Byt till en annan figur
  7. Lägg in en stor bild som bakgrund.
  8. Testa att låta figuren färdas i andra banor.


Javascript: Interaktion med användaren

Javascript och spel Kod: CC By SA spelprogrammering.nu

En liten övning i skuggan

Nu ska vi göra program där användaren kan styra händelser. På www.spelprogrammering.nu finns det exempel på program som man kan skriva. Det går att skriva alla möjliga olika program.
Vi vill även visa ett halvfärdigt pacman-spel.

Uppgift
Gör så att pac man rör sig

Idag ska ni få göra ett program som är interaktiv, det vill säga att användaren kan styra det.

Här är länkar ni behöver om ni vill titta på Pacman i er egen dator:


Julkortet

Javascript och spel Kod: CC By SA spelprogrammering.nu

Gör ett julkort!


Den gamla animeringen plus frågeboxar och ett IF-, Else-villkor ger ett enkelt julkort som du kan utveckla vidare till ditt eget

Filer att ladda ner

Lägg dem i samma mapp som tidigare för du behöver library.js

Tips: Menyn Utvecklare syns vanligtvis inte. Du visar den genom att öppna Safari-inställningarna, klicka på Avancerat och markera Visa utvecklarmenyn i menyraden.

Julkalender

Det här är en kalender som du kan titta på själv hemma om du har lust

http://www.jojoxx.net/jscript/archive/show.asp?id=146

Ett komplext exempel

Här är ett exempel på fri kod som man kan ladda ner. Att få snöflingor över sidan är mycket mer komplext än man kan tro. Gå in på sidan och kolla källan. Om du vill använda detta i något eget projekt så är koden fri att använda och den finns att ladda ner i ett paket fån GitHub.

http://www.schillmania.com/projects/snowstorm/

Dela med er av era demosar

Vi kommer alltid att behöva demonstratörer. Saker som ni gjort. Exempel på hur bra vi är. Nu är vi helt färska på javascript men det finns änd originella ideer hos er. Ladda upp vad ni har på DropBoxen (kolla att det inte redan ligger en fil med samma namn) så kanske jag visar det på Gymnasiemässan.

Rått Javascript

vi anropar funktioner i filen library.js. Dessa funktioner bygger ihop en del funktioner som är på basnivå. De finns inbyggda i browsern. Så vi har inte lärt oss att använda de inbyggda funktionerna som styr canvas-elementet.

Titta på den här sidan så ser du hur man använder javascript direkt i html-filen och därtill använder de grundläggande funktionerna utan mellanliggnade funktioner.

http://sixrevisions.com/html/bouncing-a-ball-around-with-html5-and-javascript/

Hä är ett både kul och någorlunda begripligt scripta:

http://wikiskola.se/javascript/bouncing_ball.html

El- och Energiklassen

Javascript i GeoGebra

HowTo

Bra startsida: http://wiki.geogebra.org/en/Scripting

Skapade en knapp som ger slumpade punkter

Javascript i Fysik1

Spelprogrammering och fysik- rörelse

Javascript och spel Kod: CC By SA spelprogrammering.nu

Idag gör vi kapitel 9.1 i boken Spelprogrammering och fysik. i

http://spelprogrammering.nu
Uppgift
Rörelseformler i javascript

Målet är att ni ska få ner filer i er dator och göra ändringar på dem så att ni kommer in i programmeringen och har något att jobba vidare med.

Spara ner filerna 02.html och 02.js i en mapp på din dator.

  • Pröva att göra ändringar av bollens färg och storlek.
  • Ändra värdet för g och se vad som händer
  • Vad är det för formel som styr bollens rörelse? Var känner du igen den ifrån?


Fysik och programmering - energi

Javascript och spel Kod: CC By SA spelprogrammering.nu


Hela lektionen ägnas åt programmering om du inte absolut vill göra uppgifterna i boken.


Vi ska programmera med Javascript och lära oss fysik på samma gång. Först kommer vi att använda en känd rörelseekvation och sedan kommer vi att ta med formlerna för lägesenergi och rörelseenergi i syfte att vi ska bekanta oss mer med de fysikaliska modellerna. Vi kommer därför att bli mer bekanta med energiomvandlingen som vi labbade på.

Uppgift:

Här får du tre filer med en boll som rör sig till höger. Det är en html-fil och två .js-filer. Filen energi.js är den du ska ändra koden i, library.js är ett bibliotek med funktioner för att rita bollen och Fysik.html kopplar samman energi.js och library.js och visar resultatet i en webb-sida.
Alla filer måste ligga i samma mapp på din dator för att det ska fungera, spara även filerna med samma namn som står ovan.
När du gjort en ändring i energi.js måste du spara ändringarna och sedan uppdatera webb-sidan med Fysik.html.
Du kan använda Notepad++ att redigera koden i.
Filerna:

Använde den här sidan att titta på din fysikaliska modell: http://www.wikiskola.se/javascript/Fysik.html
koden finns här: http://www.wikiskola.se/javascript/Energi.js
Detta är den biblioteksfil som används av din kodfil: http://www.wikiskola.se/javascript/library.js Du behöver inte förstå den. Den är till för att det ska vara enklare att skapa grafik.

Ändra i koden så bollen rör sig nedåt med konstant fart.

Vi vet sen tidigare att läget för ett fallande objekt ges av:

s = v0t + at2/2

Ändra nu i koden så att bollen faller med en accelererande rörelse.

Det finns textrader i koden för potentiella energin och kinetiska energin.
Lägg in formlerna för dessa i koden.

Facit: (klicka expandera till höger)

Kika inte på lösningen om du inte absolut måste!
Fysikaliska modell av energiomvandling vid fritt fall: http://www.wikiskola.se/javascript/Energi_demo.html
Koden finns här: http://www.wikiskola.se/javascript/Energi_demo.js

Höjden är fallhöjden - s därför att canvas har y-axeln nedåt. Annars skulle den potentiella energin öka under fallet.

Vi dividerar med tusen för att få hanterbara siffror. Decimalerna rundas av.


Fysik

Den sidan kan med fördel plockas in här i den mån det kopplar till javascript.

Titta gärna på Programmering_och_simulering#Fysik

Javascript och matematik

Räta linjen-övningen körs parallellt med Ma1C.

JavaScript och räta linjen

Javascript och spel Kod: CC By SA spelprogrammering.nu

En matteövning med Räta linjens ekvation


Kursen Ma1C går i ett rasande högt tempo och den här övningen syftar till att ge dig mer tid för att reflektera över matten och samtidigt nöta in några verkligt centrala begrepp. Samtidigt lär du dig mer programmering i Javascript.

Uppgift
Gör om och förbättra ett Räta linjen spel

Börja med att köra spelet som det ser ut i länkarna nedan. Se till att du kan matematiken och förstår koden. Sedan ska vi förbättra programmet. Du kan arbeta med någon av punkterna nedan. nästa lektion kan vi lägga ihop alla bra bidrag till ett suveränt spel.

  • Förbättra designen
  • Skriv tydligare förklaringar
  • Se till så att punkterna inte hamnar över varandra (på samma vertikala linje)
  • hantera vad som händer om man matar in kommatecken eller bråk
  • Ersätt pop up-rutorna med ett inmatningsformulär
  • Kontrollera om linjen hamnar rätt och ge respons på det
  • Redovisa hur många poäng man får (antal rätt och fel)
  • Animering. Låt en figur (som får ett m-värde och ett k-värde) vandra efter linjen.


eller gör ett nytt program som

  • slumpar k och m
  • rita linjen
  • gissa k och m


Filer:

Så här blev det med era förbättringar: Räta linjen by TE12A

Bilder, kontroll om man gjort rätt, etc.




Cirkelövning handlar om polära - kartesiska koordinater och passar till Ma3C.

Javascript - Cirkeln på parameterform

Det här är en digitalövning där vi ska titta på hur man ritar cirkeln på parameterform och hur det görs i javascript.

Det vi sett tidigare med cirkelns ekvation kallas att använda kartesiska koordinater. Problemet är att man inte kan lösa ut y som en funktion av x utan att ta roten ur. Roten ur ger ju som bekant två rötter, en positiv och en negativ. Det ställer till problem genom att en funktion bara ska ha ett y-värde per x-värde.

Man kan i och för sig tänka sig att rita de båda värdena samtidigt men det finns ett bättre sätt - polära koordinater

Parametrisering

Tänk på den rätvinkliga triangeln med hypotenusan r. Då kan man utgå från cirkelns mittpunkt i origo och beskriva x med cosinus och y med sinus som vi gjort tidigare. X- och y-koordnaterna uttrycks med hjälp av radien r och vinkeln t. Det kallas för parametrisering. r är parametern och t är en ny variabel, vinkeln. En parameter kan ändras från cirkel till cirkel vilket ger ändrad storlek (radie) men den ändras inte medans man ritar cirkeln. Gör man det får man helt andra former och det finns faktiskt exempel på det med på spelprogrammering.nu men det får du kolla på själv senare.

[math]\displaystyle{ x = r \cdot \cos t\, }[/math]
[math]\displaystyle{ y = r \cdot \sin t\, }[/math]

För r = 1 erhålls enhetscirkeln, det vill säga cirkeln med radie 1 och med mittpunkt i origo. t är i detta fall en vinkel som ökar från 0-360o.

Javascript

Javascript och spel Kod: CC By SA spelprogrammering.nu

titta först på funktionen cirkel. Sid 5 i boken spelprogramering.nu.

Sedan finns en del exempel hämtade från kapitel 8.


Idag ska vi äntligen jobba med Javascript!

Kartesiska koordinater

Uppgift
Prova att använda cirkelns ekvation och rita en cirkel.

Tips: du måste lösa ut y. (exemepelvis ur y2 + x2 = 400)

Ladda ner följande filer i en mapp och pröva själv genom att ändra i koden:


Polära koordinater

Titta på de här exemplen om hur enkelt man ritar cirklar med polära koordinater:

Mer: Testa funktionen att rita med polära koordinater i GGB.

Diverse

Länkar till kurser i Javascript

Öva på Khan: Oj vad mycket bra det finns här:

Khan Academy Programmering


Bibliotek

  • jQuery används på 55% av de största sajterna. Finns i Mediawiki. Open Source (MIT-licens).