Javascript och spel

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

Programmering i javascript

Övning 1

Mål

Målet är att komma igång med ett javascript som funkar. Den tröskeln kan ibland vara hög nog. Mig tog det ett par försök.

Prova att skapa en hemsida med en enkel texteditor. Ordna en canvas i sidan och länka till scripten library.js och 01.js precis som de förklarar i boken sid 1-4.

Scripten finns att hämta på Spelprogrammering.nu. Eller här:

• Javascriptet ligger på http://www.wikiskola.se/javascript/01.js
• Biblioteket ligger på http://www.wikiskola.se/javascript/library.js
• Html-sidan ser ut så här http://www.wikiskola.se/javascript/01.html

Resultat

Så här ska det se ut: Fysikövning_01:_röd_boll_åker_åt_höger

Om det inte funkar

Hämta hem mina filer från min server så får du rätt ändelser och något fungerande att jobba utifrån

Lektion 2

Några övningar på gång: testar javascript

Det här kan jag med fördel ta bort helt

Intro till Javascript i Datortekniken

Det gör det egentligen inte men vi ville gärna göra ett intro till spelprogrammering samtidigt som Diceprojektet. Det är däremot befogat med lite Javascrip i Tekniken. Därför byter vi tid så att ni får extra mycket teknikundervisning om:

• Elkompetens
• Datorns energiförsörjning, transformatorn, etc
• Kylning med fläktar, vätska, mm. Värmeledning.

De nedanstående avsnitten ligger som mallsidor och finns även transkluderade på javascriptsidan. Tänk på att du hamnar i en mall när du redigerar men det fungerar ungefär som vanligt

Lite Javascript

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

Skaffa editeringsprogrammet TextWrangler från App Store. 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 Använd den här sidan att pröva på: http://www.wikiskola.se/javascript/rita.html koden: http://www.wikiskola.se/javascript/rita.js samt en libraryfil: http://www.wikiskola.se/javascript/library.js 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. Rita en bakgrundsbild med cirklar, rektanglar och streck. Rita en liten figur som du kan använda i framtida animeringar och spel. Låt figuren vandra över skärmen.

Praktiska tips

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

Javascript med animering

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

Uppgift
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 Ändra i html-filen så att du anropar rita2.js Gör så att grodan rör sig. Få den att stanna i rutan. Få bort spåret som den lämnar efter sig. Byt till en annan figur Lägg in en stor bild som bakgrund. Testa att låta figuren färdas i andra banor.

Javascript: Interaktion med användaren

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: http://wikiskola.se/javascript/Pacman.html http://wikiskola.se/javascript/pacman.js Höger Vänster Upp Ner

Julkortet

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

• julkort.html
• julkort.js
• tomtefiguren

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

• http://wikiskola.se/javascript/vt13/biladamyazanalfonso.html
• http://wikiskola.se/javascript/vt13/BilarSebastianJochDamianoK.html
• http://wikiskola.se/javascript/vt13/FannyOchNiclasBallaBilar.html
• http://wikiskola.se/javascript/vt13/snogubbe_nathan.html

JavaScript och räta linjen

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: http://wikiskola.se/javascript/ratalinjen_K.html http://wikiskola.se/javascript/ratalinjen_K.js http://wikiskola.se/javascript/trigonometry.js Så här blev det med era förbättringar: Räta linjen by TE12A Bilder, kontroll om man gjort rätt, etc.

Länkar till kurser i Javascript

• http://www.oercommons.org/courses/web-design-at-wikiversity/view
• http://www.webdevelopersnotes.com/tutorials/javascript/index.php3 tyvärr (c)
• http://www.htmlgoodies.com/primers/jsp/ (c)
• WebMonkey (Wired) (c)
• http://www.codecademy.com/courses/getting-started-v2/1#!/exercises/3

Bibliotek

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

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

Intro to Coloring

Made using: Khan Academy Computer Science.