Programming games Review concepts. Crooked coin toss. Drawing on canvas. Homework: Complete [static]...

Programming gamesReview concepts. Crooked coin toss.

Drawing on canvas. Homework: Complete [static] drawings.

Upload files to website.

What is…

• a function?– how is it defined?– how is it called?

• What is a variable?

JavaScript function definition

<script>

function functionname (args if there are any)

{

statements

}

</script>

Function call

• Set up to be response to the submit event—clicking on a submit button for a form

• A form is an html element.

<form action="" onSubmit="return toss();">

<input type="submit" value="TOSS">

</form>

Event handling

• Speaking in general terms about something set up a variety of ways.

• Set up the when this event happens, … do this, maybe call this function

• Terms used:– event listener– event handler– event catcher

• sometimes restricted to potential errors: try { } catch

Other Function calls

• In <a> tag as value of href<a href="javascript:fun(a, b);"> Call fun </a>

• In <a> tag as value of onClick, onMouseover or onMouseOut

<a href="" onMouseover="fun(a,b);" >• Set up to be called after time interval.

This statement will be somewhere in the code, perhaps within another function.

tid = setInterval("moveit(dx, dy)",500);

Break

• Show coin toss and crooked coin toss if you haven't done so already.

• Will then start on drawing on canvas element.

HTML5 drawing on canvas

• canvas is a new type of element

• drawing is done using what is termed the 2d context of a drawing element– This requires statement done AFTER the

body is loaded

• can draw rectangles, paths (lines and arcs), images, text, video!– can also display video directly.

Screen geometry

• Origin is upper left corner!!!!• units are pixels (very small)• Sometimes top and sometimes y is used for

vertical– vertical values increase going down the screen

• Sometimes left and sometimes x is used for horizontal– horizontal values increase going to the right.

• Screen geometry holds for Flash (and Processing)

Drawings

• Default color is black.• Drawing done for stroke versus fill.• Colors are set using

– names (for 16 specific colorshttp://www.tutorialspoint.com/html5/html5_color_names.htm.

– red-green-blue values, each as numbers 0 to 255

– hexadecimal

0,0, default color, 10 by 10, stroke

0,300,green,30 by 30, stroke

500,300, 50 by 50, fill

500,0,default color,20 by 20, fill

rgb(200,0,100)

<html> <head> <title>Four rectangles</title><script>var ctx;function init() { ctx = document.getElementById('canvas').getContext('2d'); ctx.lineWidth = 2; ctx.strokeRect(0,0,10,10); ctx.fillRect(500,0,20,20); ctx.strokeStyle = "green"; ctx.fillStyle = "rgb(200,0,100)"; ctx.strokeRect(0,300,30,30); ctx.fillRect(500,300,50,50); }</script> </head><body onLoad="init();"><canvas id="canvas" width="600" height="400"> Your browser

doesn't support the HTML5 element canvas.</canvas> </body> </html>

Next

• After you get this working, change it!

• Put rectangles of different sizes in different places.

• Change colors.

Errors

• JavaScript is scripting language: interpret statements at execution time.– NOT compiled, with error messages

• Semantic errors (errors of meaning) are more difficult to detect and fix!

• Syntactic errors are errors of form, analogous to grammatical errors– FireFox Tools/Error Console can help

• Most common: bad bracketing• ctx.fillStyle("rgb(200,0,100)"); fillStyle is attribute,not method

Comments• The drawing is done in the init function which is

called when the body element is loaded. The canvas element with id="canvas" does not exist until the body is loaded.– if there was more than one canvas element, we would

use different names for the ids.• Default color is black. Red green blue values

each are 0 to 255 (8 bits of intensity). The strokeStyle and the fillStyle are attributes, not methods.

• GO: experiment with colors (by name) and rgb (note the quotation marks) and location and width and height.

More comments

• Drawings are …paint on the canvas.• These rectangles are not objects to be

moved or referenced later.• Use ctx.clearRect method to erase. • Need to do calculations to detect hits.

– See memory game in book.

• Alternative is dynamic placement of html markup– See quiz, hangman.

Next drawing• Paths created with arcs and line segments• Arcs are portions of circles, created using

radians in place of degrees. Math.PI is available for use. A complete circle can be drawn from 0 to 2*Math.PI or –Math.PI to Math.PI, etc.

• Arcs can be stroke or fill.• http://faculty.purchase.edu/jeanine.meyer/

html5workshop/wkshopsmile.html • http://faculty.purchase.edu/jeanine.meyer/

html5workshop/wkshopfrown.html

Angles

0 (=2*PI)

PI/4

PI/2

PI

PI*3/2

true means counter-clockwise!

.80*PI

.20 * PI

arcs

• ctx.arc (x of center, y of center, radius,starting angle,

finishing angle, true for counter-clockwise)

• No drawing (ink) at the center! This is important when connecting arcs and lines.

• EXPERIMENT

4 distinct paths, each made up of 1 arc.

Default, "red" and "brown"

Strategy

• Use variables with some variable values defined in terms of others.

• Circle face and two eyes. Smile is (partial) arc. Brown eyes and red smile.

• body element same as before.– You can add the code for this to your

rectangles drawing.

var ctx;

var headx = 100; //center of face x coord.

var heady = 200; // center of face y coord.

var headrad = 50; //radius of face

var smileoffsetx=0; //smile center x is same as face

var smileoffsety = 15; //smile center y further down

var smilerad=20; // smile radius

var eyeoffsety = -10; //eyes up from center

var lefteyeoffsetx = -15; //left eye

var righteyeoffsetx = -lefteyeoffsetx; //right

var eyerad = 8; // eye radius

function init() { ctx =

document.getElementById('canvas').getContext('2d');

ctx.lineWidth = 5; ctx.beginPath(); ctx.arc(headx,heady,headrad,0,2*Math.PI,true); ctx.closePath(); ctx.stroke(); …

ctx.strokeStyle = "red";ctx.beginPath();ctx.arc(headx+smileoffsetx,heady+smileoffsety,

smilerad,.80*Math.PI,.20*Math.PI,true);ctx.stroke();

ctx.fillStyle = "brown"; ctx.beginPath();ctx.arc(headx+lefteyeoffsetx,heady+eyeoffsety,eyerad,

0,2*Math.PI,true);ctx.fill();

ctx.beginPath(); ctx.arc(headx+righteyeoffsetx,heady+eyeoffsety,eyerad,0,2*Math.PI,true);

ctx.fill();

}

Homework

• Practice [static] drawing(s). Next class we will a new version of coin toss triggered by clicking on the canvas.

• Upload work to your website– create an index file with list of projects and

upload using an ftp program– upload the html and, if required, any image

files

Programming games Review concepts. Crooked coin toss. Drawing on canvas. Homework: Complete [static]...

Documents

Transcript of Programming games Review concepts. Crooked coin toss. Drawing on canvas. Homework: Complete [static]...