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– …