Upload
clement-west
View
218
Download
0
Embed Size (px)
Citation preview
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