1. Programming Games Simulated ballistic motion: cannon ball. Classwork: Final day for midterm project and all projects for first part of class. Homework: [Start and] Finish bouncing something. Start work on YOUR cannonball.

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 = ballx+ballvx; bally = bally+ballvy; 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 = ballx+ballvx; bally = bally+ballvy; ctx.drawImage(blob,ballx,bally,100,100);

5. NOTE on cannonball No tutorial…. Instead: sequence of programs: go to http://faculty.purchase.edu/jeanine.meyer/ html5/html5explain.html http://faculty.purchase.edu/jeanine.meyer/ html5/html5explain.html Study code. Copy code. Make changes to make it your own—need to carry those changes. Also: see chapter 4 in The Essential Guide to HTML5 (on reserve in Library).

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

7. Bouncing thing vs Cannonball What’s the same –Each interval of time, code erases, makes an adjustment to position values, does checks, re-draws What’s 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

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

9. function drawall() {ctx.clearRect(0,0,cwidth,cheight); var i; for (i=0;i<everything.length;i++) { var ob = everything[i]; if (ob[1]) { //need to translate and rotate ctx.save(); ctx.translate(ob[3],ob[4]); ctx.rotate(ob[2]); ctx.translate(-ob[3],-ob[4]); ob[0].draw(); ctx.restore(); } else { ob[0].draw(); }

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

11. Cannonball requirements, cont. Check for collisions –ground –target

12. fire function sets up trajectory function fire() { var angle = Number(document.f.ang.value); var outofcannon = Number(document.f.vo.value); var angleradians = angle*Math.PI/180; horvelocity = outofcannon*Math.cos(angleradians); verticalvel1 = - outofcannon*Math.sin(angleradians); everything[cannonindex][2]= - angleradians; cball.sx = cannonx + cannonlength*Math.cos(angleradians); cball.sy = cannony+cannonht*.5 - cannonlength*Math.sin(angleradians); drawall(); tid = setInterval(change,100);return false; }

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

14. 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. ((bx>=target.sx) && (bx<=(target.sx+target.swidth)) && (by>=target.sy) && (by<=(target.sy+target.sheight)))

15. change function function change() { var dx = horvelocity; verticalvel2 = verticalvel1 + gravity; var dy = (verticalvel1 + verticalvel2)*.5; verticalvel1 = verticalvel2; cball.moveit(dx,dy);

16. //check for hitting target var bx = cball.sx; var by = cball.sy; if ((bx>=target.sx)&&(bx =target.sy)&&(by<=(target.sy+target.sh eight))) { clearInterval(tid); //remove target and insert htarget everything.splice(targetindex,1,[htarget,false]); everything.splice(ballindex,1); drawall();}

17. //check for getting beyond ground level if (by>=ground.sy) { clearInterval(tid); } drawall(); }

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

19. form element in body element Set velocity, angle and fire cannonball. Velocity out of cannon Angle

20. 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)

21. Diversion Do you always win or at least tie at tic tac toe? What do you do????

22. Try http://faculty.purchase.edu/jeanine.meyer/t ictactoe.htmlhttp://faculty.purchase.edu/jeanine.meyer/t ictactoe.html Exercise in patience and arrays

23. Classwork / homework Get caught up with uploading & index.html –Do not call midterm project ‘midterm project’. Prepare bouncing something Cannonball: –Do look at each preliminary program and make it your own –Prepare your cannonball. can change look, including what is the cannon and what is the ball. When basic program is working, can alter logic.