1 / 23

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

verlee
Download Presentation

Programming Games

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

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

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

  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/tictactoe.html • Exercise in patience and arrays

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

More Related