Date post: | 01-Jan-2016 |
Category: |
Documents |
Upload: | brittany-palmer |
View: | 219 times |
Download: | 0 times |
Programming Games
Show project. Refresher on coordinates. Scaling, translation. HTML5 logo. Refresher
on animation. Bouncing ball.Homework: Do your own bouncing
something.
Midterm project
Due today! Will accept next class and then we move on!
There will be another chance to do a project totally of your own design.
Coordinates
Recall for canvas or for screen
• horizontal values: from the left
• vertical values: from the top
• pixel unit: very small!
Canvas path• Set variable (any name your want, I chose ctx)
to be ctx = document.getElementById("canvas").getContext('2d');
• Paths used to be drawn in outline (stroke) or filled in (fill)
• ctx.moveTo(x,y) moves to position• ctx.lineTo(x,y) sets up line drawn• ctx.arc(center_x, center_y, radius,
starting_angle, ending_angle, true or false);Angles given in radians, NOT degrees. 90 degrees
is Math.PI/2. A circle is 2*Math.PI.
Note
• Drawing a complete circle is easy:
• ctx.arc(centerx,centery,radius,0,2*Math.PI,true); OR
• ctx.arc(centerx,centery,radius,0,2*Math.PI,false); OR
• ???
Paths
ctx.beginPath();
sequence of moveTo, lineTo, arc statements
ctx.closePath();
NOTHING happens until:
ctx.fill(); and/or ctx.stroke();
HTML5 logoExample of• drawing on canvas• input type="range"
– May appear as text in older browsers• Called graceful degradation
• changing coordinate system using translate and scale
• semantic tags• http://faculty.purchase.edu/
jeanine.meyer/html5/html5logoscale.html
range input
• AKA slider
Scale percentage: <input id="slide" type="range" min="0" max="100" value="100" onChange="changescale(this.value)" step="10"/>
• Does form validation.
• Note the event handler
event handler
function changescale(val) {
factorvalue = val / 100;
dologo();
}
• So…. You can guess that dologo uses the variable factorvalue in its code and you would be correct!
Note
• This is yet another way to specify an event (changing the slider) and the event handler.
• Flash ActionScript is more consistent:– All events specified using addEventListener
Transformations
• …. change origin of coordinate system or scale of coordinate system or both. – ctx.translate(x,y);– ctx.scale(xfactor, yfactor);
• ctx.save(); saves current system so that your code can ctx.restore();
• This is done using a stack– last in, first out– restore pops the stack
Use of transformations for logo
• use <input type="range" name="slide" ….> to change scale based on input
• use translate to write out HTML and then 'move down' and draw the logo.
Recall on animation
• Produce a succession of pictures.• Produced in my virtual dog, a succession of times to
make decisions on the state of the dog.• Use setInterval(what to do, length of interval in
milliseconds)• NEW (future?) alternative:
window.requestAnimationFrame– look up and try. Standard seems to be unsettled.– fixed timed period of 60pfs
• Bouncing ball (or anything similar): re-draw canvas at the intervals– erase using clearRect( )– draw
Tea party
• [Not political reference, but reference to http://stolenchair.org/
• http://faculty.purchase.edu/jeanine.meyer/html5/teapartytest.html
• Animation (appearance of life/motion) done by continually erasing and re-drawing images on a canvas.
• Some images are positioned off of the canvas: not an error (in this case)
Performance issues
• duty cycle– Think of night watchman. Are there too many
tasks to do before doing next round?
• battery life
• One approach– use second (alternate/buffer/prerender)
canvas– Look up and post on moodle.
Bouncing ball
• Circle: http://faculty.purchase.edu/jeanine.meyer/html5/bouncingballinputs.html
• Image: http://faculty.purchase.edu/jeanine.meyer/html5/bouncingballinputsimg.html
How do I/you program bouncing something?
• You actually know how to do this!
• What are the tasks (subtasks) that your code needs to do?
[sub]Tasks
• Set up to do the drawing at intervals of time. How?
• Draw at a specific place on the canvas.
• Do a calculation (check a condition) to determine if the ball needs to bounce, namely if it is outside the box.
Speed of ball
• Horizontal and vertical speed set using a form.
• Note: some validation is done by browser.– try putting in letters
• The movement of the ball is done using the variables ballvx and ballvy set (changed) if and when the form is submitted.
Study source code
• (can also look at chapter 3 in The Essential Guide to HTML5 book)
• In this example, I don’t want ball to go outside of box drawn on canvas.
• functions are– init: initialization, invocation set by onLoad in
body– moveball: invoked by init and by action of
setInterval– moveandcheck: invoked by moveball– change: invocation set by onSubmit in the form
Did I need?
• to extract the moveandcheck code from the moveball code?– No. However, several small functions
generally works better than fewer larger functions.
Drawn circle versus image
• Code is nearly the same.• Drawing the image uses:
var img = new Image();img.src = "pearl.jpg"; //use your image….In moveball function:ctx.drawImage(img,ballx-ballrad,bally-ballrad,2*ballrad,2*ballrad)
• NOTE: image needs to be positioned at its upper left corner, not the center of the ball.
Repeat: Events and Event Handling
• You (your code) sets up an event for which you specify an event handler.
• HTML & JavaScript does this in multiple ways!– HTML tags contain onLoad, onClick, onSubmit,
onChange, …– JavaScript has setInterval and setTimeout– JavaScript has object.addEventListener
• Note: other languages, for example Flash ActionScript, has most consistent approach
balltimer.addEventListener(TIMER,…)
Advice
• Mentally step back and think about concepts…– including realizing when things are
inconsistent
• This will enable you to build your own projects as opposed to just remembering specific coding.
Classwork/homework
• Stop everything else and work on a final project. It can be a more elaborate virtual something or some elaboration on past work.– Post proposal!!!
• Finish your project. Last date is next class.• Today's assignment is bouncing something.
It can be a decorated drawn object and/or an image. Make other changes as you wish.