Spelprogrammering med JavaScript och HTML5



Relevanta dokument
Tillämpad Programmering. Ekonomi + Spel + Javascript

Att styla webbsidor. Nivå. Uppgiften

Lektion 3 HTML, CSS och JavaScript

Programmeringteknik. Planering MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen

Labora&on 7 Syfte med laborationen:

En bortsprungen katt

JavaScript. Innehåll. Historia. Document object model DHTML. Varför Javascript?

Övning 1 Vi börjar med en vanlig html-fil där html används för både innehåll och utseende:

WEBDESIGN A - DTR 1210

Skissa och gissa. Individuellt Mjukvaruutvecklingsprojekt, 1DV430. Christian Nilsson, cn222gc, WP

21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html

Lektion 2 - CSS. CSS - Fortsätt så här

Programmering. Scratch - grundövningar

En grundkurs i hemsidor och hur de är uppbyggda

CSS-övningar. 1. Grunder

WEBDESIGN A - DTR 1210

Slutrapport för Internetfonden

JavaScript del 9 Dynamik och animeringar

TDDD52 CSS. Färger. Färger 1/3/13

EDA095 HTML. Per Andersson. April 26, Lund University Innehåll: HTML, CSS, DOM, JavaScript

Guide till Mynewsdesk Hosted Newsroom - Kom igång och spegla ditt pressrum!

Extramaterial till Matematik Y

Teknikprogrammet, inriktning informations- och medieteknik

Föreläsning 4. CSS Stilmallar för webben

E07 "Greased Lightning"

Appar med ryggrad. Introduktion till JavaScriptramverket Backbone

För att skriva CSS-kod använder man sig av olika kommandon. Ett exempel på hur man kan skriva kod för att ändra textfärg kan vara:

JavaScript. En Introduktion

Det ska endast finnas två bilder av samma typ på spelplanen.

Del 1 och 2 HTML/CSS. Webbutveckling Laboration 1 Nicklas Bostedt

<script src= "

Integrerad i egen cup-portal Sid 1

Repetition. Hypertext. Internet HTTP. Server och klient Text försedd med länkar till andra texter. Många sammankopplade nät

Repetition. Hypertext. Internet HTTP. Server och klient Föreläsning 2. Text försedd med länkar till andra texter. Många sammankopplade nät

Loopar och ljud 3 av 7. Lektionen handlar om att lära sig programmera loopar och använda ljudeffekter med verktyget Scratch. Loopar och ljud 3 av 7

Introducerande övningar i HTML

Loopar och ljud 3 av 7. Lektionen handlar om att lära sig programmera loopar och använda ljudeffekter med verktyget Scratch. Loopar och ljud 3 av 7

Om include-filer i PHP

Post Mortem för Get The Treasure!

Lektion 2 Del 1 Kapitel 6

Hur hänger det ihop? För att kunna kommunicera krävs ett protokoll tcp/ip, http, ftp För att veta var man skall skicka

Introduk+on +ll programmering i JavaScript

Internet och WWW Laboration 3 VT10 Högskolan Dalarna Hans Rosendahl. Laboration 3 CSS del 2. 1 av 20

Inlämningsuppgift 2. DA156A - Introduktion till webbutveckling Teknik och samhälle, Malmö högskola Oktober 2012

Den hungriga fisken. Vi ska göra ett spel om en hunrgig fisk! Styr den stora Hungriga Fisken och försök att äta upp alla kräftor som simmar omkring.

Innehålls förteckning

Carl-Oscar Hermansson WEBB DESIGN

Programmeringsappar. Av Alex

F07 Stilmallar Dagens agenda

Slump och statistik med Scratch

WEBBUTVECKLING Kursplanering

ORDLISTA WEBBDESIGN 100P

DOM (Document Object Model) är modellen efter vilken en webbläsaren är uppbyggd. Alla objekt/element i webbläsaren finns hierarkiskt ordnade i DOM.

Mattekungen åk 6-9 vers. 1.0

E13 Behind the Wild. Dagens agenda. Cookies Context/ändra context Augmentation (förstärkning) Klassiskt arv Att låna metoder Namespaces Postludium

Tepz klon. - Projektrapport. Linnéuniversitetet, Individuellt mjukvaruutvecklingsprojekt Janina Bergström, WP12 Distans

F r a m e s - r a m a r

HTML och CSS. Eric Elfving Institutionen för Datavetenskap (IDA)

En stiligare portal Laboration 3

Högskolan i Halmstad Multimedia och visuell kommunikation Övning 1 Adobe Flash, grundfunktioner & interpolering. Efter övningen förväntas du kunna:

Lär dig programmera! Prova på programmering med enkla exempel! Björn Regnell

Övning (X)HTML 2. Sidan 1 av

Instruktioner för Articulate Studio 13

Slump och statistik med Scratch. Se video

JAVASCRIPT. Beteende

Laboration med Internet och HTML

Internet A. HTML Grunder Maximilien Chiang 1

Slutrapport för JMDB.COM. Johan Wibjer

Användargränssittet (Front-end) i mobilversionen bygger i stor utsträckning på jquery Mobile-ramverket.

Att prova på en enkel Applet och att lära sig olika sätt att hämta data från tangentbordet. Du får även prova på att skapa din första riktiga klass.

Webbens grundbegrepp. Introduktion till programmering. Ytterligare exempel. Exempel på webbsida. Föreläsning 5

Grundläggande programmering, STS 1, VT Sven Sandberg. Föreläsning 20

Nallelek Lärarvägledning

JavaScript. JavaScript Ramverk (Bibliotek) jquery + jquery UI

Labora&on 5 CSS och layout samt fråga E övningar/uppgi>er

HTML och CSS. Eric Elfving Institutionen för datavetenskap. 18 augusti 2015

Skapa mappar, spara och hämta dokument

Materialspecifikationer

Tillgänglighetskrav på teknik Dessa krav baseras på WCAG 2.0,

Materialspecifikationer webb 2014

Undervisningen i ämnet webbutveckling ska ge eleverna förutsättningar att utveckla följande:

// //Constructor public function Main_Playground() { init(); }

I den här labben ska vi använda oss av en trevlig nyhet i HTML5: Local Storage, för att implementera en sorts lokal gästbok.

Teknikblock på TIS Stockholm

E13 "Behind the Wild"

Laborationsanvisning. HTML5 Laboration 6. Författare: Johan Leitet Version: 1 Datum:

On-line produktion TDDC61

Vi börjar med en penna som ritar när du drar runt den på Scenen.

Webbtillgänglighet. Webbtillgänglighet. World Wide Web Consortium. Web Accessibility Initiative, WAI WCAG 2.0 WCAG 1.0

Kommunikation. Dator med webbläsare Förfrågan: Webserver. Returnerar HTML-kod

Julskoj. Nivå. Introduktion

För att få respektive betyg krävs: 25 för godkänt, 37,5 för väl godkänt (obs betyget gäller tentan, inte kursen som helhet)

Copy Cat Laboration 4

KOM IGÅNG, UPPDRAG OCH KOMPONENTER

12/9/2010 REGLER WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS LOKALA STILMALLAR GLOBALA STILMALLAR. Selektor. Deklaration

Tisdag 50 Onsdag 50 Fredag 90

Du kan själv följa med i denna steg-för-steg guide i din texteditor.

Labora&on 1 Variabler och beräkningar övningar/uppgi9er

Övnings hemtentamen med förslag till lösning, webbprogrammering

Instruktioner för Articulate Storyline 2

Transkript:

Spelprogrammering med JavaScript och HTML5 Vad är vårt syfte? Eleverna ska komma igång fort med programmering. Det ska vara roligt från början. Resultatet ska vara enkelt att visa för kompisar och familj. Det ska vara lätt att skriva koden oavsett operativsystem. Ett enkelt exempel med library.js Så här ser kan koden se ut i utgåva ett av vår bok. litetspel.html <html> <head> <title>lek med canvas</title> <script src="http://spelprogrammering.nu/library.js"> <script src="litetspel.js"> </head> <body> <canvas id="canvas" width="800" height="400"></canvas> </body> </html> litetspel.js circle(200, 150, 70, "red"); Problem vi har stött på Nybörjare skrev av HTML-koden fel. Nybörjare hade problem med att skriva två kodfiler, speciellt när de skulle börja med nästa uppgift och skapa två nya filer. Förenklingarna för nybörjare var begränsande för avancerade elever. Vi hade gjort det hyfsat enkelt för nybörjare att sätta igång och hyfsat enkelt för duktiga elever att fortsätta. Men vi ville att det skulle vara mycket enklare för nybörjare, och samtidigt lättare att bygga vidare för de duktigaste eleverna... Vår lösning blev en uppdelning i två bibliotek. Ett som förenklar så mycket som det bara går och ett som passar in i mer avancerade lösningar. SITSNET seminarium 6, 2012-06-13, Roboro. Sida 1 av 7.

Det enkla biblioteket - simple.js Eleverna skapar bara en kodfil, t.ex. mittspel.html De kommer igång direkt med programmeringen, mängden kod som behöver skrivas av utan att förstå är minimerad. Koden följer inte nödvändigtvis god sed eller standarder, vi gör allt för att det ska bli så enkelt som möjligt. Det här är hela HTML-filen som behöver skrivas av: <script src="http://spelprogrammering.nu/simple.js"> Notera att all vanlig HTML är borta, eleven ska inte behöva ha sett HTML innan. Mellan de två sista script-taggarna skriver man sin JavaScript-kod. Exempelvis: <script src="http://spelprogrammering.nu/simple.js"> circle(100, 200, 20, 'red'); circle(mouse.x, mouse.y, 20, 'blue'); Detta ger en röd cirkel på x-koordinat 100 och y-koordinat 200, och en blå cirkel som följer muspekaren. Det enkla biblioteket gör alltså att man nästan helt slipper skriva HTML-kod och man behöver bara skapa en fil. Eleverna kommer igång i princip direkt och får automatiskt tillgång till hela webbläsarens yta. Vi använder oss av det enkla biblioteket för att lära ut grunderna i programmering, bygger enkla spel och experimenterar med fysik och avancerad matematik. I princip samma saker som redan finns i vår bok, men det blir lättare att komma igång med. Det avancerade biblioteket: advanced.js Eleven skriver hela HTML-koden själv, inklusive canvas-element. Antagligen skrivs JavaScript i separata filer. Målet är att HTML-koden ska följa standarder och god programmeringssed. Eleven kan ha flera canvas-element och experimentera med att använda konceptet för annat än spel. Exempelvis effekter på hemsidor. Man kan enkelt använda biblioteket medan man lär sig HTML och CSS. SITSNET seminarium 6, 2012-06-13, Roboro. Sida 2 av 7.

Exempel där eleven gjort allt i en HTML-fil: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>mitt spel</title> <style> #one border: 1px solid red; #two border: 1px solid blue; </style> </head> <body> <canvas id="one" width="800" height="200"></canvas> <canvas id="two" width="800" height="200"></canvas> <script src="http://spelprogrammering.nu/advanced.js"> a = new RoboroCanvas('one'); b = new RoboroCanvas('two'); a.update = function() a.circle(a.mouse.x, a.mouse.y, 10, 'brown'); ; b.update = function() b.circle(b.mouse.x, b.mouse.y, 10, 'yellow'); ; </body> </html> Med det avancerade biblioteket måste eleven själv hantera all HTML och CSS och även skapa canvas-elementen. Som exemplet ovan visar kan man skapa flera canvas-element som blir helt oberoende av varandra. Eleverna uppmuntras att utnyttja allt som är häftigt med JavaScript, och integrera det med korrekt HTML och CSS. Vi har delat upp funktionaliteten i advanced.js i flera API:er som alla bygger på objektorientering. Själva canvas-ritandet, inklusive musrörelser och pethändelser, går genom RoboroCanvas, tangentbordsinteraktion genom RoboroKeyboard och ljud genom RoboroSound. SITSNET seminarium 6, 2012-06-13, Roboro. Sida 3 av 7.

Några exempel med simple.js En röd boll <script src="http://spelprogrammering.nu/simple.js"> circle(100, 200, 20, 'red'); Styr färg och storlek med variabler <script src="http://spelprogrammering.nu/simple.js"> size = 20; color = 'red'; circle(100, 200, size, color); Fråga användaren om färg och storlek <script src="http://spelprogrammering.nu/simple.js"> size = prompt('what size?'); color = prompt('what color?'); circle(100, 200, size, color); Rita många bollar med en loop <script src="http://spelprogrammering.nu/simple.js"> size = prompt('what size?'); color = prompt('what color?'); for (i = 0; i < 100; i += 1) circle(100 + i, 200 + i, size, color); SITSNET seminarium 6, 2012-06-13, Roboro. Sida 4 av 7.

Animation <script src="http://spelprogrammering.nu/simple.js"> x = 100; circle(x, 200, 10, 'red'); x += 1; Interaktion med musen, bollen följer musen <script src="http://spelprogrammering.nu/simple.js"> circle(mouse.x, mouse.y, 10, 'red'); Interaktion med tangentbordet, ny boll styrs med pilarna <script src="http://spelprogrammering.nu/simple.js"> cat = ; cat.x = 100; cat.y = 100; cat.speed = 10; circle(mouse.x, mouse.y, 20, 'red'); circle(cat.x, cat.y, 20, 'blue'); if (keyboard.up) cat.y -= cat.speed; if (keyboard.down) cat.y += cat.speed; SITSNET seminarium 6, 2012-06-13, Roboro. Sida 5 av 7.

if (keyboard.left) cat.x -= cat.speed; if (keyboard.right) cat.x += cat.speed; Avsluta spelet om bollarna kommer nära, lägg till poängräknare, byt ut bollarna <script src="http://spelprogrammering.nu/simple.js"> cat = ; cat.x = 300; cat.y = 300; cat.speed = 10; score = 0; picture(cat.x - 200, cat.y - 150, 'tom.png'); picture(mouse.x - 50, mouse.y - 50, 'jerry.png'); text(20, 40, 20, 'Score: '+score); if (keyboard.up) cat.y -= cat.speed; if (keyboard.down) cat.y += cat.speed; if (keyboard.left) cat.x -= cat.speed; if (keyboard.right) cat.x += cat.speed; if (distance(mouse.x, mouse.y, cat.x, cat.y) < 40) stopupdate(); score++; SITSNET seminarium 6, 2012-06-13, Roboro. Sida 6 av 7.

Förkorta koden <script src="http://spelprogrammering.nu/simple.js"> cat = x: 300, y: 300, speed: 10 ; score = 0; picture(cat.x - 200, cat.y - 150, 'tom.png'); picture(mouse.x - 50, mouse.y - 50, 'jerry.png'); text(20, 40, 20, 'Score: ' + score); cat.x += (keyboard.right - keyboard.left) * cat.speed; cat.y += (keyboard.down - keyboard.up) * cat.speed; if (distance(mouse.x, mouse.y, cat.x, cat.y) < 40) stopupdate(); score++; Vad händer nu Köp gärna vår bok och ge oss tips och idéer på hur vi kan bli bättre. Vi håller på för fullt med att skriva en ny utgåva där simple.js och advanced.js används. Denna beräknas vara färdig om några månader. Vi kommer att hålla http://www.spelprogrammering.nu/ uppdaterad med mer information. SITSNET seminarium 6, 2012-06-13, Roboro. Sida 7 av 7.