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

Shield

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.