Computational Cinematics Studio // Center for Games and Playable Media http://games.soe.ucsc.edu/ccs // http://games.soe.ucsc.edu

CMPS 20 – Game Design Experience Spring 2016 Week 2: JavaScript, HTML5, and CSS

Arnav Jhala

TA: Sarah Harmon Graders: Michael Brich, Daniel Pagharion, TBD

Upcomingclassesandassignments

•  Startquickintroduc5ontoJavascript/HTML5/CSSanddevelopmenttools

•  Labsnextweek– FacethatNamegameonjsfiddle

•  Individualassignment– Developmentenvironmentsetupanddrawingsprites

– Alchemygame– hKp://liKlealchemy.com

ComputerLanguages

•  High-andLow-level•  Compiled/Interpreted•  Scrip5ng/Programming•  Forweb:client-side/server-side

JavaScript(forourclass)

•  Scrip5ngLanguage•  Runswithinwebbrowser’scontext•  OperatesonDOM(DocumentObjectModel)objects

•  Provideshigh-levelinterfacetouserinterac5on

•  Implementsgamelogic

DataTypesandOperators

•  Basicdatatypes– Null,undefined,NaN

•  Operators– Unary– Binary(comparison)– Bitwise– Precedence

Readings

•  Readingsoncrea5ngadesigndocument•  Readingonconstraint-drivendesign•  Reading[R4]onclasswebpage

– EloquentJavaScriptChapters

Condi5onals,Loops,andFunc5ons

•  If()•  for()•  while()•  Func5ons

Events

•  onAbort•  onBlur•  onChange•  onClick•  onError•  onFocus•  onLoad•  onMouseOut•  onMouseOver•  onReset•  onSubmit•  onUnload

Assignment1Clarifica5ons

•  Mainpointsoftheassignment–  Demonstrateabilitytocreateanewprogramthatdisplays,animates,

andmanipulatessprites(mul5ple)onawebbrowserusingtheCanvasAPIsthroughJavaScript.

–  Alchemyprovidesaniceframeworkwhereyoucandoallthatands5llhaveacompletegametoshowforyourwork.

–  Asgamedesignstudentsyoushouldthinkcrea5velythatispartofyourgrade.Thisisforyourownsake,youwillpasstheclassifyoujustmeettheminimumrequirementsforassignments.

–  JSFiddleisausefultoolsthatismeanttoeaseyourprogrammingnothinderit.However,aswithanynewtool,youhavetogiveitsome5metobecomeadeptatitsuse.

–  Solongasyoumakesurethatyoucanshowmemovingandinterac,ngsprites,detailsofotherstuff(exactnumberofsprites,keyboardv/smouseinterac5on,etc.arenotimportantandwillnotaffectyourgrade).

–  Assignmentguidelinesaretomainlyprovideyouwithabareminimumofwhatisneeded.Youcantakeitasfarasyouwant(thatisthecrea5vitypartofthegrade).

–  Mainlydesignedtogetyoutoplayaroundwithyourtoolsbeforejumpingintoabiggameproject.

Canvasquickreview

•  Bynowyoushouldalreadyknow– Canvas– Context– Basicdrawingandupda5ngSprites– BasicTextdisplay– Runningfunc5onsrepeatedly(setInterval)– MouseandKeyboardinterac5on– Debugging

MovingSprites

Transforma5ons

•  2DCoordinatesystems•  Localandglobal•  Transforma5ons

– Translate– Rotate– Scale– Shear– …