Programming Games

1
Programming Games

• Simulated ballistic motion cannon ball.
• Classwork/Homework Start and finish bouncing
  something. Start work on YOUR animation project.

2
Bouncing something

• in a box
• Or something else
• You can bounce many things. The variables ballx
  and bally define the location.

3
What does this do? blob references an Image
object with src set to a picture of some roundish
squishy thing. Sketch it!

• ballx 100
• bally 150
• ballvx 50
• ballvy 80
• ballx ballxballvx
• bally ballyballvy
• ctx.clearRect(0,0,1000,800)
• ctx.drawImage(blob,ballx,bally,100,100)

4
What does this do? blob references an Image
object with src set to a picture of some roundish
squishy thing. Sketch it.

• ballx 100
• bally 150
• ctx.drawImage(blob,ballx,bally,100,100)
• ballvx 50
• ballvy 80
• ballx ballxballvx
• bally ballyballvy
• ctx.drawImage(blob,ballx,bally,100,100)

5
General specifications

• How does user/player interactions set or change
  parameters for action?
• What (else) starts the action?
• What changes or stops the action?

6
NOTE on cannonball

• No tutorial.
• Instead sequence of programs go to
  http//faculty.purchase.edu/jeanine.meyer/html5/ht
  ml5explain.html
• Study code. If you decide to make this your
  project
• Copy code. Make changes to make it your ownneed
  to carry those changes.
• Also see chapter 4 in The Essential Guide to
  HTML5 (on reserve in Library).

7
Cannonball requirements

• Display objects (cannon, ball, target, ground) on
  the screen
• Every interval of time, code clears and re-draws
  on canvas
• Set up system for drawing a set of objects
• Look at the Ball, Picture, Myrectangle, and
  drawall.
• Notice way to draw rectangle at an angle.
• use paths (beginPath, arc, fill for the circle),
  fillRect, drawImage

8
Bouncing thing vs Cannonball

• Whats the same
• Each interval of time, code erases, makes an
  adjustment to position values, does checks,
  re-draws
• Whats different
• Adjustments to position are different
• CB Form input to get input from player
• BB check against walls. CB Check against ground
  and check against target

9
cannonball at angle

• I made a general facility the everything array
  holds references to each object AND information
  on translation and rotation
• Object oriented programming, aka OOP
• the fire function (see later) uses the angle
  information set by the player to change the
  rotation information in the everything array.
• CAUTION
• assumption is that the player enters angle in
  degrees.
• my code converts angle to radians.

10

• function drawall() ctx.clearRect(0,0,cwidth,cheig
  ht)
• var i
• for (i0ilteverything.lengthi)
• var ob everythingi
• if (ob1) //need to translate and
  rotate
• ctx.save()
• ctx.translate(ob3,ob4)
• ctx.rotate(ob2)
• ctx.translate(-ob3,-ob4)
• ob0.draw()
• ctx.restore()
• else
• ob0.draw()

11
Cannonball requirements, cont.

• Produce animated trajectory of ball
• animation produced similar to bouncing ball using
  setInterval
• specific path done with calculations simulating
  effects of gravity
• initial horizontal and vertical displacements
  calculated from angle of cannon
• horizontal displacements stay the same
• vertical change each interval of time

12
Cannonball requirements, cont.

• Check for collisions
• ground
• target

13
fire function sets up trajectory

• function fire()
• var angle Number(document.f.ang.value)
• var outofcannon Number(document.f.vo.value)
• var angleradians angleMath.PI/180
• horvelocity outofcannonMath.cos(angleradians)
  
• verticalvel1 - outofcannonMath.sin(angleradian
  s)
• everythingcannonindex2 - angleradians
• cball.sx cannonx cannonlengthMath.cos(angler
  adians)
• cball.sy cannonycannonht.5 -
  cannonlengthMath.sin(angleradians)
• drawall()
• tid setInterval(change,100)return false

14
change function

• do calculation to adjust vertical displacement
• move the ball
• check if ball hits target
• if so, stop animation and substitute the hit
  target picture for the original picture
• check if ball has gone beyond the ground (further
  down the screen)
• if so, stop animation
• draw everything

15
How to check if point is on/in a rectangle

• A point has x and y (horizontal and vertical)
  values.
• A rectangle has x and y of upper left corner, and
  width and height values.
• ((bxgttarget.sx)
• (bxlt(target.sxtarget.swidth))
• (bygttarget.sy)
• (bylt(target.sytarget.sheight)))

16
change function

• function change()
• var dx horvelocity
• verticalvel2 verticalvel1 gravity
• var dy (verticalvel1 verticalvel2).5
• verticalvel1 verticalvel2
• cball.moveit(dx,dy)

17

• //check for hitting target
• var bx cball.sx
• var by cball.sy
• if ((bxgttarget.sx)(bxlt(target.sxtarget.swidth
  ))(bygttarget.sy)(bylt(target.sytarget.sheigh
  t)))
• clearInterval(tid)
• //remove target and insert htarget
• everything.splice(targetindex,1,htarget,false
  )
• everything.splice(ballindex,1)
• drawall()

18

• //check for getting beyond ground level
• if (bygtground.sy)
• clearInterval(tid)
• drawall()

19
Aside

• Using compound conditions in if statements can be
  a way to avoid nested if-else statements AND can
  represent the condition you want to test for.

20
Cannonball requirements, cont.

• Way for player to input (change) velocity out of
  cannon and angle of cannon.
• form
• validation (checking) of input values. This is
  promised feature of HTML5.

21
form element in body element

• ltform name"f" id"f" onSubmit"return fire()"gt
• Set velocity, angle and fire cannonball. ltbr/gt
• Velocity out of cannon ltinput name"vo" id"vo"
  value"10" type"number" min"-100" max"100" /gt
  ltbr/gt
• Angle ltinput name"ang" id"ang" value"0"
  type"number" min"0" max"80"/gt
• ltinput type"submit" value"FIRE"/gt
• lt/formgt

22
Aside

• In programming, you need to distinguish between
  writing code to
• Do something
• define a function to do something
• Write code to invoke a function (that does
  something)
• Set up event handling (arrange to do something
  AFTER an event occurs)

23
Comment

• The way you implement something in programming
  may NOT be how you would to the comparable thing
  in the real world
• Chess playing

24
Diversion

• Do you always win or at least tie at tic tac toe?
• What do you do????

25
Try

• http//faculty.purchase.edu/jeanine.meyer/tictacto
  e.html
• Exercise in patience and arrays

26
Classwork / homework

• Get caught up with updating index.html and
  uploading it and everything else
• Do not call midterm project midterm project.
• Prepare bouncing something
• Animation done with JavaScript
• Cannonball Do look at each preliminary program
  and make it your own
• can change look, including what is the cannon and
  what is the ball.
• When basic program is working, can alter logic.
• Something else?