Programming Games Simulated ballistic motion: cannon ball. Classwork: Final day for midterm project and all projects for first part of class. Homework:

Programming GamesSimulated 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– Or something else

• 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. 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);

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

NOTE on cannonball

• 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 are 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 targetvar 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• 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.