Programming Games

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.

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

What does this do? blob references an Image object with src set to a picture of some roundish squishy thing. 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);

What does this do? blob references an Image object with src set to a picture of some roundish squishy thing. 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);

NOTE • No tutorial…. • Instead: sequence of programs: go to 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).

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

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 is different • CB: Form input to get input from player • BB: check against walls. CB: Check against ground and check against target

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.

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(); } } }

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

Cannonball requirements, cont. • Check for collisions • ground • target

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; }

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

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

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

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

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

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.

form element in body element <form name="f" id="f" onSubmit="return fire();"> Set velocity, angle and fire cannonball. <br/> Velocity out of cannon <input name="vo" id="vo" value="10" type="number" min="-100" max="100" /> <br/> Angle <input name="ang" id="ang" value="0" type="number" min="0" max="80"/> <input type="submit" value="FIRE"/> </form>

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)

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

Try • http://faculty.purchase.edu/jeanine.meyer/tictactoe.html • Exercise in patience and arrays

Classwork / homework • 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.

Programming Games