Programming games

1
Programming games

• Introductions, course, class
• http//moodle.purchase.edu
• Classwork Favorite sites.
• Homework Review today's charts (examples of
  code). Prepare for taking notes. Finish favorite
  sites. Introduce yourself (again) on moodle. Sign
  up for webspace.

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, The Essential
  Guide to HTML5 Using Games to Learn HTML5 and
  JavaScript, HTML5 and JavaScript Projects,
  Elementary Number Theory With Programming
• Son teacher Illinois College. Daughter staff
  for Westchester County Legislature, stage
  manager/media theater group Stolen Chair (visit
  http//www.stolenchair.org)
• Hobbies/interests politics, origami, cooking and
  eating, reading novels, knit crochet, travel
• Learning assistants Skylar Gifford, Allen Guzman
• You?

3
Course

• Introduction to programming using simple games
  as the problem domain
• Why?

4
Course

• is NOT playing games.
• Making games and other projects
• Simple games. This is an introductory course in
  programming.
• Walk before you run!
• Your project is better more interesting to me
  and to you than copying someone else's.
• Take notes
• It is required. I will check your notebook.
• It helps!

5
Programming Environment

• Hypertext Markup Language (HTML) with JavaScript
  (scripting language) and CSS (formatting)
• will make use of HTML5 features (canvas, video)
• Some examples will run on mobile devices
• will use TextWrangler or TextPad or Sublime
• Note Logic is logic. Programming is programming.
  Important to note similarities and differences
  between HTML with JavaScript and other languages
  / development environments

6
Outline of work

• HTML/JavaScript
• Produce your versions of favorite sites, coin
  toss, canvas drawings, dice game, slide show,
  credit card, virtual something
• Design produce your own game (or significantly
  enhanced version of one of my games)
• Midterm quiz
• HTML/JavaScript
• Produce your versions of bouncing ball,
  cannonball, video, maps (using the Google Maps
  API)
• Design and produce your own game (or
  significantly enhanced version of one of 'my'
  games, including games in my books)
• Final quiz
• Pop quizzes

7
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
• http//www.codecademy.com/ Do it and keep
  doing it (and post your impressions)
• There will be pop quizzes on finding information.
• Many books, including mine
• Beginning Scripting through Game Creation
• Essential Guide to HTML5
• HTML5 and JavaScript Projects

8
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
  does not have all features of real OO language.

9
Brief introduction to a few terms

• A variable holds values (numbers, strings of
  characters, Booleans (true or false))
• A function is packaging of code, to be invoked
  later
• Statement types include
• Assignment statements
• Calls to functions (built-in or programmer
  defined)
• 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

NOW IS THE TIME TO TAKE NOTES ASK QUESTIONS!
10
Terminology

• Computer jargon
• Terms are generally English words, but the
  technical meaning is DIFFERENT and precise.
• Meaning at general computer jargon and
• More specific meaning for JavaScript, HTML, CSS
• Pay attention.
• LOOK UP terms after class.

11
What is programming?
12
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.

13
Reflection on shoe tying

• More than one way to accomplish task
• Divide task into small (very small) steps
• Actions depended on external conditions and
  events happening
• describing steps required some special use of
  language jargon
• ALL features of programming!

14
Function

• Important concept in programming
• All programming languages have specific way to
  define a function (subroutine, procedure)
• a method is a function/procedure associated with
  a class of objects
• A method handles a message send to the object.
• an operation is a procedure specified to act on
  operands
• and call the function
• ALL programming languages have built-in code,
  often in the form of class methods
• Date()
• Math.random()
• One type of shoe-tying do overhand knot once
  with single strands and then with loops. This is
  analogous to the same function or method working
  in different circumstances

15
Functions

• In JavaScript and some other languages
• Function headerfunction name_of_function(paramet
  ers)
• Followed by body of function (code statements)
  
• function area(w,h)
• return wh
• Using area as a model, how would you define a
  function called perimeter, parameters w and h,
  and returns the perimeter of a rectangle, two
  sides length w and two sides length h?

16
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

17
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)

18
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.

19
Sample statements

• Assignment Note equal sign doesnt mean equal!
• count 0
• count count 1
• Note count and count
• ifelse
• if (class Programming Games )
• schedule Monday/Thursday
• else
• schedule Tuesday/Friday
• Looping
• sum 0
• for (i0 iltgrades.length i)
• sum sumgradesi
• Average sum/grades.length

20
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 and
  the language R, used for data analysis, uses an
  arrow lt-

21
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.

22
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.

23
If all 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.

24
Pseudo-random functions

• JavaScript and ActionScript have Math.random()
• Typical use
• dice1Value 1 Math.floor((Math.random() 6))
• dice2Value 1Math.floor((Math.random() 6))
• What if I wants a random choice from among 1, 2,
  or 3?

25
Strategy for course

• The course is building games, not playing games.
• Attend every class session. Be on-time.
• Pay attention. TAKE NOTES.
• Do not use the computer when I'm lecturing!
• Do not use your cell phone in class.
• Study materials. LOOK UP TERMS.
• Come for help
• My office hours Monday/Thursday 1030am to
  1225am, NS3003
• or by appointment with me or student lab
  assistant.
• Einstein's Corner. Maybe Learning Center
• It is YOUR responsibility to ask for help.
• Push yourself, butbuild 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.
• Record ideas for projects in your notebook.

26
Advice

• Pay attention! Listen when I talk
• Stop working at the computer EVEN if it is work
  on class projects
• Attempt to answer all questions!
• Review and reflect on what you are doing.
• Programming is not memory work, just like writing
  an essay isn't remembering whole sentences.
• YOU MAY BENEFIT BY TAKING NOTES ON COPIES OF THE
  SLIDES (can print out 2,3,6/page)
• Come to my office hours, arrange time with Las,
  go to Einstein Corner tutoring
• It is easy to be lost in details of coding.
• Now on to first project favorites sites

27
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 or Sublime
• We won't use Dreamweaver or other WYSIWYG because
  we are focusing on coding and sometimes these
  applications make decisions that are wrong.
• Also, they cost money.
• Note You should make contributions to an
  shareware product and I hope CTS does!

28
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, lthtmlgt and
  lt/htmlgt. 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.)

29
Preparation for first script

• One type of tag is the img tag
• ltimg src"bird.gif"gt
• Go on-line with browser and download an image
• Find image (my site, javascript examples, slide
  show, elsewhere)
• 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.

30
Prepare / Edit

• Open up text editor program
• Copy (with changes as appropriate, for example,
  the name of your image file) example on 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.
• Open in browser
• Chrome on PC CTRL-o

31
First script
lthtmlgt ltheadgtlttitlegtFirst html script
lt/titlegt ltscriptgtdocument.write(Date()) lt/scriptgt
lt/headgt ltbodygt Hello ltimg src"bird.gif"/gt lt/bod
ygt lt/htmlgt
32
My result (years ago)
title
No line break.
33
View source

• this is the HTML (and JavaScript and CSS, if
  present) document
• Done slightly differently in each browser
• Chrome on PC
• right click (NOT ON ANY IMAGE) for menu
• CTRL-u

34
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".

35
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

36
More on functions

• Functions are built-into the language OR are
  defined by you, the programmer. Functions can
  return values.
• Functions sometimes require arguments aka
  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 (the thing inside the parentheses). In
  this case, it is whatever the function Date()
  produces.
• document.write( Date() )

The . is used for methods or properties of
objects.
37
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.

38
Formatting

• HTML generally ignores white space, including
  line breaks. To force a line break, use
• ltpgt or ltbrgt You will also see ltpgt lt/pgt and ltp
  /gt. You will see ltbr /gt.
• There is also lthrgt horizontal rule
• There are tags for size of fonts (h1 through h6,
  others), ltbgt for bold, ltigt 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 /gt in singleton tags such as img.

39
ltagt

• The a tag can be used to specify a hyperlink
• lta href"http//faculty.purchase.edu/jeanine.meyer
  "gtDr. Meyer's page lt/agt
• http indicates absolute addressing
• lta href"another.html"gtNext pagelt/agt
• 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.

40
Modified example

• lthtmlgt
• ltheadgtlttitlegtNext html script lt/titlegt
• ltscriptgtdocument.write(Date())lt/scriptgt
• lt/headgt
• ltbodygt
• Hello ltimg src"bird.gif"gt ltbrgt
• lta href"http//faculty.purchase.edu/jeanine.meye
  r"gt
• Find materialslt/agt
• lt/bodygt
• lt/htmlgt

41
Mouse was over the link
42
Additions

• Use one of the new (semantic) elements in HTML5
  ltarticlegt. It does not come with any built-in /
  default formatting, so
• ltstylegt sectionarticle display block
  font-size20px
• Make a clickable image (aka icon) by putting an
  img element inside an a element.
• Use basic formatting (italics) in argument for
  document.write.

43
secondtest.html

• ltDOCTYPE htmlgt
• lthtmlgt ltheadgtlttitlegtSecond testlt/titlegt
• ltstylegt
• article
• font-size20px
• displayblock
• img displayblock
• lt/stylegt ltscriptgt
• document.write("ltigt"Date()"lt/igt")
• lt/scriptgt lt/headgt ltbodygt
• ltarticlegtThis is the Meyer family origami page.
• lta href"http//faculty.purchase.edu/jeanine.meyer
  /origami"gtltimg src"bird.gif"/gtlt/agt
• lt/articlegt lt/bodygt lt/htmlgt

44
(No Transcript)
45
Lessons

• Notice patterns
• Things inside of things.
• Practice pop research quiz
• look up CSS font-family and see how to specify
  fonts. All fonts are not on all computers, so you
  specify your first choice, second choice, then
  type (serif, monospace)

46
Class work / Homework

• Produce an HTML file that presents 3 (favorite)
  websites
• writes out the date at the top
• Title is your name plus 'Favorite Sites'
• Describes 'favorite sites', with text and an
  image from the site, linking to the site.
• Enclose each description in an article element.

47
Assignments

• 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. Look
  up concepts. Check schedule. Write down ideas.
• 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

48
Web publishing space

• CTS provides web space for all students.
• Sign up for it
• students.purchase.edu
• You will be required to upload projectspublish
  themon the web.