CMPS 20 – Game Design Experience · • Start quick introduc5on to Javascript/HTML5/ CSS and...
Transcript of CMPS 20 – Game Design Experience · • Start quick introduc5on to Javascript/HTML5/ CSS and...
![Page 1: CMPS 20 – Game Design Experience · • Start quick introduc5on to Javascript/HTML5/ CSS and development tools ... – Eloquent JavaScript Chapters Condi5onals, Loops, and Func5ons](https://reader031.fdocuments.us/reader031/viewer/2022022018/5b90bfc809d3f2b86e8cab36/html5/thumbnails/1.jpg)
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
![Page 2: CMPS 20 – Game Design Experience · • Start quick introduc5on to Javascript/HTML5/ CSS and development tools ... – Eloquent JavaScript Chapters Condi5onals, Loops, and Func5ons](https://reader031.fdocuments.us/reader031/viewer/2022022018/5b90bfc809d3f2b86e8cab36/html5/thumbnails/2.jpg)
Upcomingclassesandassignments
• Startquickintroduc5ontoJavascript/HTML5/CSSanddevelopmenttools
• Labsnextweek– FacethatNamegameonjsfiddle
• Individualassignment– Developmentenvironmentsetupanddrawingsprites
– Alchemygame– hKp://liKlealchemy.com
![Page 3: CMPS 20 – Game Design Experience · • Start quick introduc5on to Javascript/HTML5/ CSS and development tools ... – Eloquent JavaScript Chapters Condi5onals, Loops, and Func5ons](https://reader031.fdocuments.us/reader031/viewer/2022022018/5b90bfc809d3f2b86e8cab36/html5/thumbnails/3.jpg)
ComputerLanguages
• High-andLow-level• Compiled/Interpreted• Scrip5ng/Programming• Forweb:client-side/server-side
![Page 4: CMPS 20 – Game Design Experience · • Start quick introduc5on to Javascript/HTML5/ CSS and development tools ... – Eloquent JavaScript Chapters Condi5onals, Loops, and Func5ons](https://reader031.fdocuments.us/reader031/viewer/2022022018/5b90bfc809d3f2b86e8cab36/html5/thumbnails/4.jpg)
JavaScript(forourclass)
• Scrip5ngLanguage• Runswithinwebbrowser’scontext• OperatesonDOM(DocumentObjectModel)objects
• Provideshigh-levelinterfacetouserinterac5on
• Implementsgamelogic
![Page 5: CMPS 20 – Game Design Experience · • Start quick introduc5on to Javascript/HTML5/ CSS and development tools ... – Eloquent JavaScript Chapters Condi5onals, Loops, and Func5ons](https://reader031.fdocuments.us/reader031/viewer/2022022018/5b90bfc809d3f2b86e8cab36/html5/thumbnails/5.jpg)
DataTypesandOperators
• Basicdatatypes– Null,undefined,NaN
• Operators– Unary– Binary(comparison)– Bitwise– Precedence
![Page 6: CMPS 20 – Game Design Experience · • Start quick introduc5on to Javascript/HTML5/ CSS and development tools ... – Eloquent JavaScript Chapters Condi5onals, Loops, and Func5ons](https://reader031.fdocuments.us/reader031/viewer/2022022018/5b90bfc809d3f2b86e8cab36/html5/thumbnails/6.jpg)
Readings
• Readingsoncrea5ngadesigndocument• Readingonconstraint-drivendesign• Reading[R4]onclasswebpage
– EloquentJavaScriptChapters
![Page 7: CMPS 20 – Game Design Experience · • Start quick introduc5on to Javascript/HTML5/ CSS and development tools ... – Eloquent JavaScript Chapters Condi5onals, Loops, and Func5ons](https://reader031.fdocuments.us/reader031/viewer/2022022018/5b90bfc809d3f2b86e8cab36/html5/thumbnails/7.jpg)
Condi5onals,Loops,andFunc5ons
• If()• for()• while()• Func5ons
![Page 8: CMPS 20 – Game Design Experience · • Start quick introduc5on to Javascript/HTML5/ CSS and development tools ... – Eloquent JavaScript Chapters Condi5onals, Loops, and Func5ons](https://reader031.fdocuments.us/reader031/viewer/2022022018/5b90bfc809d3f2b86e8cab36/html5/thumbnails/8.jpg)
Events
• onAbort• onBlur• onChange• onClick• onError• onFocus• onLoad• onMouseOut• onMouseOver• onReset• onSubmit• onUnload
![Page 9: CMPS 20 – Game Design Experience · • Start quick introduc5on to Javascript/HTML5/ CSS and development tools ... – Eloquent JavaScript Chapters Condi5onals, Loops, and Func5ons](https://reader031.fdocuments.us/reader031/viewer/2022022018/5b90bfc809d3f2b86e8cab36/html5/thumbnails/9.jpg)
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.
![Page 10: CMPS 20 – Game Design Experience · • Start quick introduc5on to Javascript/HTML5/ CSS and development tools ... – Eloquent JavaScript Chapters Condi5onals, Loops, and Func5ons](https://reader031.fdocuments.us/reader031/viewer/2022022018/5b90bfc809d3f2b86e8cab36/html5/thumbnails/10.jpg)
Canvasquickreview
• Bynowyoushouldalreadyknow– Canvas– Context– Basicdrawingandupda5ngSprites– BasicTextdisplay– Runningfunc5onsrepeatedly(setInterval)– MouseandKeyboardinterac5on– Debugging
![Page 11: CMPS 20 – Game Design Experience · • Start quick introduc5on to Javascript/HTML5/ CSS and development tools ... – Eloquent JavaScript Chapters Condi5onals, Loops, and Func5ons](https://reader031.fdocuments.us/reader031/viewer/2022022018/5b90bfc809d3f2b86e8cab36/html5/thumbnails/11.jpg)
MovingSprites
![Page 12: CMPS 20 – Game Design Experience · • Start quick introduc5on to Javascript/HTML5/ CSS and development tools ... – Eloquent JavaScript Chapters Condi5onals, Loops, and Func5ons](https://reader031.fdocuments.us/reader031/viewer/2022022018/5b90bfc809d3f2b86e8cab36/html5/thumbnails/12.jpg)
Transforma5ons
• 2DCoordinatesystems• Localandglobal• Transforma5ons
– Translate– Rotate– Scale– Shear– …