Programming Games

1
Programming Games

• Refresher on coordinates. Scaling, translation.
  HTML5 logo. Refresher on animation. Bouncing
  ball. Show project.
• Classwork/Homework Finish midterm project.
  Upload. Do your own bouncing something.

2
Midterm project

• Due today! Will accept next class and then we
  move on!
• There will be another chance to do a project
  totally of your own design.

3
Coordinates

• Recall for canvas or for screen
• horizontal values from the left
• vertical values from the top
• pixel unit very small!

4
Canvas path

• Set variable (any name your want, I chose ctx) to
  be ctx document.getElementById("canvas").getCon
  text('2d')
• Paths used to be drawn in outline (stroke) or
  filled in (fill)
• ctx.moveTo(x,y) moves to position
• ctx.lineTo(x,y) sets up line drawn
• ctx.arc(center_x, center_y, radius,
  starting_angle, ending_angle, true or false)
• Angles given in radians, NOT degrees. 90 degrees
  is Math.PI/2. A circle is 2Math.PI.

5
Note

• Drawing a complete circle is easy
• ctx.arc(centerx,centery,radius,0,2Math.PI,true)
  OR
• ctx.arc(centerx,centery,radius,0,2Math.PI,false)
  OR
• ???

6
Paths

• ctx.beginPath()
• sequence of moveTo, lineTo, arc statements
• ctx.closePath()
• NOTHING happens until
• ctx.fill() and/or ctx.stroke()

7
HTML5 logo

• Example of
• drawing on canvas
• input type"range"
• May appear as text in older browsers
• Called graceful degradation
• changing coordinate system using translate and
  scale
• semantic tags
• http//faculty.purchase.edu/jeanine.meyer/html5/ht
  ml5logoscale.html

8
range input

• AKA slider
• Scale percentage ltinput id"slide" type"range"
  min"0" max"100" value"100" onChange"changescal
  e(this.value)" step"10"/gt
• Does form validation.
• Note the event handler

9
event handler

• function changescale(val)
• factorvalue val / 100
• dologo()
• So. You can guess that dologo uses the variable
  factorvalue in its code and you would be correct!

10
Note

• This is yet another way to specify an event
  (changing the slider) and the event handler.
• Flash ActionScript is more consistent
• All events specified using addEventListener

11
Shield
12
Transformations

• . change origin of coordinate system or scale of
  coordinate system or both.
• ctx.translate(x,y)
• ctx.scale(xfactor, yfactor)
• ctx.save() saves current system so that your
  code can ctx.restore()
• This is done using a stack
• last in, first out
• restore pops the stack

13
Use of transformations for logo

• use ltinput type"range" name"slide" .gt to
  change scale based on input
• use translate to write out HTML and then 'move
  down' and draw the logo.

14
Recall on animation

• Produce a succession of pictures.
• Produced in my virtual dog, a succession of times
  to make decisions on the state of the dog.
• Use setInterval(what to do, length of interval in
  milliseconds)
• NEW (future?) alternative window.requestAnimatio
  nFrame
• look up and try. Standard seems to be unsettled.
• fixed timed period of 60pfs
• Bouncing ball (or anything similar) re-draw
  canvas at the intervals
• erase using clearRect( )
• draw

15
Bouncing ball

• Circle http//faculty.purchase.edu/jeanine.meyer/
  html5/bouncingballinputs.html
• Image http//faculty.purchase.edu/jeanine.meyer/h
  tml5/bouncingballinputsimg.html

16
Tea party

• Not political reference, but reference to
  http//stolenchair.org/
• http//faculty.purchase.edu/jeanine.meyer/html5/te
  apartytest.html
• Animation (appearance of life/motion) done by
  continually erasing and re-drawing images on a
  canvas.
• Some images are positioned off of the canvas not
  an error (in this case)

17
Performance issues

• duty cycle
• Think of night watchman. Are there too many tasks
  to do before doing next round?
• battery life
• One approach
• use second (alternate/buffer/prerender) canvas
• Look up and post on moodle.

18
How do I/you program bouncing something?

• You actually know how to do this!
• What are the tasks (subtasks) that your code
  needs to do?

19
subTasks

• Set up to do the drawing at intervals of time.
  How?
• Draw at a specific place on the canvas.
• Do a calculation (check a condition) to determine
  if the ball needs to bounce, namely if it is
  outside the box.

20
Speed of ball

• Horizontal and vertical speed set using a form.
• Note some validation is done by browser.
• try putting in letters
• The movement of the ball is done using the
  variables ballvx and ballvy set (changed) if and
  when the form is submitted.

21
Study source code

• (can also look at chapter 3 in The Essential
  Guide to HTML5 book)
• In this example, I dont want ball to go outside
  of box drawn on canvas.
• functions are
• init initialization, invocation set by onLoad in
  body
• moveball invoked by init and by action of
  setInterval
• moveandcheck invoked by moveball
• change invocation set by onSubmit in the form

22
Did I need?

• to extract the moveandcheck code from the
  moveball code?
• No. However, several small functions generally
  works better than fewer larger functions.

23
Drawn circle versus image

• Code is nearly the same.
• Drawing the image usesvar img new
  Image()img.src "pearl.jpg" //use your
  image.In moveball functionctx.drawImage(img,b
  allx-ballrad,bally-ballrad,2ballrad,2ballrad)
• NOTE image needs to be positioned at its upper
  left corner, not the center of the ball.

24
Repeat Events and Event Handling

• You (your code) sets up an event for which you
  specify an event handler.
• HTML JavaScript does this in multiple ways!
• HTML tags contain onLoad, onClick, onSubmit,
  onChange,
• JavaScript has setInterval and setTimeout
• JavaScript has object.addEventListener
• Note other languages, for example Flash
  ActionScript, has most consistent
  approach balltimer.addEventListener(TIMER,)

25
Advice

• Mentally step back and think about concepts
• including realizing when things are inconsistent
• This will enable you to build your own projects
  as opposed to just remembering specific coding.

26
Classwork/homework

• Stop everything else and work on midterm project.
  It can be a more elaborate virtual something or
  some elaboration on past work.
• Post proposal!!!
• Finish your project. Last date is next class.
• Today's assignment is bouncing something. It can
  be a decorated drawn object and/or an image. Make
  other changes as you wish.