Programming games

1. Programming games Introductions, course, class http://moodle.purchase.edu Classwork: HTML examples. Homework: Review today's charts (examples of code). Introduce yourself (again) on moodle. Experiment more with HTML. Prepare to do Favorite Sites.

2. Introductions • Jeanine Meyer, • Full professor, Math/Computer Science & New Media • Pace UniversityIBM: research (robotics) , manufacturing staff, education • books: Multimedia in the Classroom, Programming games using Visual Basic, Creating Database Web Applications with PHP and ASP, Beginning Scripting Through Game Creation and The Essential Guide to HTML5: Using Games to Learn HTML5 and JavaScript • Son: teacher Illinois Institute of Technology, • daughter: ??? Did work for Congressman John Hall. Involved with politics, stage manager theater group Stolen Chair (visit http://www.stolenchair.org) • Hobbies/interests: politics, gardening, origami, cooking and eating, reading novels, knit & crochet, travel • Learning Assistants: Kathryn Bannon • You?

3. Course • Introduction to programming using [simple] games as the problem domain • Games are not simple. They are good examples of today’s programming: event-driven and graphical user interface. • Games force attention to testing & audience (user) • Computer games represents a big and growing industry. This course is introductory.

4. Programming Environments • Hypertext Markup Language (HTML) with JavaScript (scripting language) and CSS (formatting) • will make some use of HTML5 features (canvas, video). NOT YET SUPPORTED BY ALL BROWSERS. • Flash with ActionScript (based on JavaScript) • Adobe CS5 (can save in back level) • ActionScript 3.0 tending to be like Java: classes, objects, strong-typing Note: Logic is logic. Important to reflect on similarities and differences between these two languages and programming environments and others

5. Outline of work • HTML/JavaScript: • Produce your favorite sites, coin toss, canvas drawings, dice game, slide show, bouncing video • Design & produce your own game (or significantly enhanced version of one of ‘my’ games) • Midterm quiz • Flash/ActionScript: • coin toss, complete rock-paper-scissors, build bouncing ball, cannonball, video or audio • Design & produce your own game (or significantly enhanced version of one of ‘my’ games) • Final quiz • Pop quizzes

6. Course materials • Lecture notes, sample games, tutorials, other notes are or will be posted • faculty.purchase.edu/jeanine.meyer • On-line sources (use google) excellent for JavaScript & ActionScript • There will be pop quizzes on finding information. • Many books, including mine: • Beginning Scripting through Game Creation • Essential Guide to HTML5

7. Course topics • How to specify look, function & logic of games • Use concepts common to all programming languages • Logic, statements, compound statements • Variables, functions • Use concepts of ‘Modern’ programming systems • Design of graphical user interface • Event handling • Objects • Some devotees of OO would argue that JavaScript & ActionScript are not real programming languages and not real object-oriented…

8. Brief introduction to a few terms • A variable holds values (numbers, strings of characters, Booleans (true or false)) • Statement types include • Assignment statements • Calls to procedures • Compound statements: If, for loops • An event is something that can happen for which you specify a response (handler) • Some events are relatively easy for you to set up: for example, clicking on a button/link • Timing events • Situations you need to check for in code: for example, collisions NOW IS THE TIME TO TAKE NOTES & ASK QUESTIONS!

9. What is programming?

10. How to specify the actions for shoe tying • Typical situation: easy to do but more difficult to articulate how to do it. • Atypical: physical actions and not just data/information. • Issues of deciding level of specification. • Get in small groups and write down instructions as you would teach a child.

11. Function • Important concept in programming • All programming languages have specific way to define a function (subroutine, method, operation) • .. call the function • One type of shoe-tying: do overhand knot once with single strands and then with loops

12. Functions In JavaScript, ActionScript, and some other languages • Function header:function name_of_function(parameters) • Followed by body of function (code statements) { } Example from ActionScript function playit(clip) { flv.src = clip; }

13. Computers must be programmed • Some one, generally a collection of people, have specified the actions of ‘the computer’. • ‘Actions’ can include • Performing a calculation • Moving data around • Accepting input or producing output • Testing something and doing different things depending on the results

14. Programming involves • Problem solving (more or less independent of the programming language) • Specifying solution in terms of the programming language & environment • Program = sequence of statements (certain statements can change the flow of control, e.g., conditionals & loops) • Additional issue(s) involve the user interface: input (information & directives from the user) & output (information presented & actions taken)

15. NOTICE • If your program doesn't work, it is because of something you did, not something some alien force inside the computer is doing to annoy you. • Taking ownership is important. • Reflecting on mistakes (mis-conceptions) is important. • Creating programs requires thinking logically, systematically about sequences of steps/operations. It is not copying or memorizing text.

16. Sample statements • Assignment Note: equal sign doesn’t mean equal! • count = 0; • count = count + 1; • Note: count++ and ++count • if…else… if (class == ‘Programming Games’ ) { schedule = ‘Monday/Thursday’;} else { schedule = ‘Tuesday/Friday’; } • Looping sum = 0; for (i=0; i<=grades.length; i++) { sum = sum+grades[i]; } Average = sum/grades.length;

17. Repeat • In most programming languages, the symbol = is used in assignment statements. • It means: set the value to be ….. • One programming language, APL, used an arrow, but this did not catch on.

18. Programming • Decide what is needed to be done (logic) • different approaches can work just like there are different ways to tie shoe laces • Implement that logic in the programming language • Programming languages are not like natural language • Grammar (syntax) must be exact • Some flexibility, but much less expressive power • …. Computer systems are infinitely patient • Test, correct & enhance, re-test Divide tasks into smaller tasks.

19. To build a computer application • You must specify/program everything • Static display • Dynamic display (what changes) • Response to user/player action • Response to system events • Rules of the game • If a two-person game (if the computer is a player), the computer moves/actions • You must change roles and be tester of the application.

20. If actions must be specified completely…. • How do we put randomness into a program • For example, throw of dice, layout of mines in minesweeper • Answer: JavaScript (and other programming languages) have built in features to produce pseudo-random sequences of numbers. • They appear random, but they are calculated.

21. Pseudo-random functions • JavaScript and ActionScript have Math.random() • Typical use: dice1Value =1 +Math.floor((Math.random() * 6)) dice2Value =1+Math.floor((Math.random()* 6))

22. Strategy for course • The course is building games, not playing games. • Attend every class session. • Pay attention • Do not use the computer when I'm lecturing! • Do not use your cell phone in class. • Study materials. • Come for help • My office hours: Monday/Thursday 11am to 12:25pm, NS3003 • or by appointment on Wednesdays or Monday/Thursday after 2:10pm. • Learning assistants • Einstein's Corner • It is YOUR responsibility to ask for help. • Push yourself, but…build games in small steps. • Appreciate the fact that programming is different than … using other computer tools. Be patient with yourself BUT/AND put in the effort. • The "computer" does not have a mind of its own.

23. Advice • Pay attention! Listen when I talk • Stop working at the computer EVEN if it is work on class projects • Review and reflect and when you are doing • Do readings and repeat readings • YOU MAY BENEFIT BY TAKING NOTES ON COPIES OF THE SLIDES (can print out 2,3,6/page) • Come to office hours and to Einstein Corner tutoring It is easy to be lost in details of coding. Now to first project: favorites sites

24. Text editor That knows about html is good because it will use color coding for different types of elements This is especially helpful for things in quotation marks. Omitting a trailing quotation mark causes trouble! TextWrangler or TextPad We won't use Dreamweaver or other WYSIWYG because we are focusing on coding and sometimes these applications add in things Also, they cost money. Note: You should make contributions to shareware and I hope CTS does!

25. HyperText Markup Language • Text plus “mark up”, the mark up is in tags: specific terms in pointy brackets. • Some tags come in pairs: for example, <html> and </html>. The closing tag has / • The stuff in between is the contents of the tag element. • Tags may have other information. These are called attributes. • HTML file has head and body. The head may contain a script element containing code. (Code also can be within tags.)

26. Preparation for first script • One type of tag is the img tag <img src="bird.gif"> • Go on-line with browser and download an image: • Find image (my site, javascript examples, slide show) • RIGHT click mouse • Save Picture As • Save in folder with your name or create a folder. • DON'T COUNT ON IT BEING SAVED BETWEEN CLASSES. • Use simple names: all lower case, no blanks or punctuation. • Browser will go to same folder as the HTML file if no other information given.

27. Prepare / Edit • Open up text editor program • Copy example …. (NEXT SLIDE) • Save As • file type (extension) .html • file name: something can remember. Simple name, how about test1 • Save it in the same folder that you saved the image file.

28. First script <html> <head><title>First html script </title> <script>document.write(Date()); </script> </head> <body> Hello <img src="bird.gif"/> </body> </html>

29. My result title No line break.

30. Recap • Created an HTML file. • head element held title element and script element. • Title was First html script displayed in upper left corner • Script element contained an invocation/call to the write method of the document object. A method is a function associated with an object. The argument of the write method was the results of a call to the Date() function. The Date function was called with no parameters but the () is required. • body element held plain text and an img tag • img tag had as its source (the value of the src attribute) the file "bird.gif".

31. Make example your own Do one or more of the following: • Move the 'hello' from the body of the HTML document to something to be done by the script • Hint: document.write("Hello "); • Have the script write out something else. • Add to the body of the HTML • more text • another copy of the image • another image

32. More on functions • Functions are built-into the language OR are defined by you, the programmer. • Functions sometimes require arguments = parameters. This is extra information for the operation of the function. The argument or arguments go in parentheses. • A function requires parentheses even if there are no arguments: Date() • A special kind of function is a method. This is a function associated with an object. In this case, the name of the method is write and the name of the object is document. The method takes an argument (this thing inside the parentheses) and this is whatever Date() produces. document.write( Date() ); The . is used for methods or properties of objects.

33. Function as shorthand • Put it in my mail box instead of • go to the Natural Sciences building, 2nd floor, Natural Sciences office, room 2065, go into the room on the right where the mail boxes are, find my name, put it in the box…. • The 'it' is analogous to the argument. • Note: some purists refer to these as arguments on the caller side and parameters on the called side.

34. Formatting • HTML generally ignores white space, including line breaks. To force a line break, use • <p> or <br> You will also see <p> </p> and <p />. You will see <br />. • There is also <hr> horizontal rule • There are tags for size of fonts (h1 through h6, others), <b> for bold, <i> for italics, and much more BUT good practice is to put formatting into the style section (Cascading Style Sheets). • more on this later. • HTML generally is forgiving. For example, does not require /> in singleton tags such as img.

35. <a> • The a tag can be used to specify a hyperlink: <a href="http://faculty.purchase.edu/jeanine.meyer">Dr. Meyer's page </a> http indicates absolute addressing <a href="another.html">Next page</a> no http so this is treated as relative addressing • Assumption here is that another.html is a file in the same folder as this html file.

36. Modified example <html> <head><title>First html script </title> <script>document.write(Date());</script> </head> <body> Hello <img src="bird.gif"> <br> <a href="http://faculty.purchase.edu/jeanine.meyer"> Find materials</a> </body> </html>

37. Mouse was over the link

38. Additions • Use one of the new (semantic) elements in HTML5: <article>. It does not come with any built-in / default formatting, so… • <style> section:article {display: block; font-size:20px; } • Make a clickable image (aka icon) by putting an img element inside an a element. • Use basic formatting (italics) in argument for document.write.

39. Assignment • Read and re-read handout. Review PowerPoint charts for first lecture. • [Get into habit] review lecture charts after each lecture. Study examples and read tutorials. Check schedule. • Go to http://moodle.purchase.edu and make a post to the Introductions, extra credit, etc. forum. As appropriate, I will post information there and/or faculty.purchase.edu/jeanine.meyer

40. Web publishing space • CTS provides web space for all students. • Do sign up for it! • You will be required to upload projects—publish them—on the web.