Programming games Reprise: coin toss on canvas. Dice game rules. Global and local variables. Homework: [Catch up. Upload projects, including index.html.] Dice game

Request Need for note taker for this class: someone to scan the notes after each class and upload to a moodle forum I will set up. $50 at the end of the term and Something to put on resume. See me after class.

Challenge Sent using Course Announcements in moodle. html5/drawSomewhere.htmlhttp://faculty.purchase.edu/jeanine.meyer/ html5/drawSomewhere.html Devise your own pattern.

Debugging Make sure you are testing latest version –you can make a small visible change –Do View Source (may be in Developer Tools) Insert alert statements alert("at start of toss function"); alert("xxx is "+xxx); NOTE: if a function is not well-formed (for example, bracket problem), the browser does not display a message—it just doesn't work! Firefox: Tools/Web Developer/Error console Chrome: wrench symbol/Tools/JavaScript Console –Be sure and clear old errors & warnings.

Debugging In Sublime or TextWrangler (PC: TextPad) use Find command –Check if dthrow defined AND called –Check on consistent spelling of names –Can use for brackets, closing, etc. though you may need to print out and use pencil. Also use opening and closing…. You can research other debugging tools. –I choose to keep things simple for this class.

JavaScript if & if/else for logic if ( logicalexpression ) { statements } if ( logicalexpression ) { statements } else { statements }

Switch statement for logic switch (expression) { case value1: statements case value2: statements default: statements } If you do NOT want execution to continue (flow into) the next case, you need to insert a break statement. optional

Notation { and } are used to group statements together –function definition, if and else clauses, and other statements we haven't done yet: switch, for, do while. ( and ) are used –condition part of an if statement if (Math.random()>.5) –set order of operations in a calculation total = total + (total*taxrate); –specify arguments in a function definition and parameters in a function call Math.random() Single or double quotation marks can be used but MUST MATCH –NOT "smart quotes"

Alternative coin toss Replace the player move of clicking a button by clicking directly on the canvas. Place an image on the canvas at the place clicked. html5/alternativecointoss.htmlhttp://faculty.purchase.edu/jeanine.meyer/ html5/alternativecointoss.html (Put directions on the canvas.)

Remember: the context object ctx = document.getElementById('canvas').getContext('2d'); You can have multiple canvas elements and one of these for each one. This line must be executed after body element is read in (loaded).

drawing image from file HTML supports Image objects using code. Find and download new images or re-use what you used before for the coin toss: var head = new Image(); head.src = "head.gif"; … ctx.drawImage(head, 10,20,100,100); draws this image at 10,20, with width of 100 and height of 100.

drawing text You can set color, that is the style Just to show one more way to specify a color (previous ways are the set of names and using the rgb function): –you can specify an red-green-blue value using hexadecimal (base 16) values. –values go from 00 to FF ctx.fillStyle = "#dd00ff";

drawing text, cont. You specify the font: ctx.font = "bold 10px Arial"; Open up Word on your computer and see what fonts are available ON YOUR COMPUTER. ctx.fillText("Hello", 100,200); Add images and text to one of your drawings. Experiment.

Mouse click on a canvas Need to set up the event on/for the canvas object canvas1=document.getElementById('canvas'); creates an object that JavaScript can use. canvas1.addEventListener('click',flip,false); sets up JavaScript to listen for the click event and when it occurs, invoke the function named flip. The false means don't forward/bubble this event to other programs.

So… You can set up canvas1 and ctx this way: canvas1=document.getElementById( 'canvas'); ctx = canvas1.getContext('2d');

Reading code: what does this do? canvas1.addEventListener('mousedown', startdrag,false); What do you think startdrag is?

Mouse cursor position One more thing: we want the coin head or tail to be placed on the canvas where the click is made. Challenge: the browsers handle this differently. The following code works for Firefox, Chrome, Safari: if ( ev.layerX || ev.layerX == 0) { mx= ev.layerX; my = ev.layerY;} else if (ev.offsetX || ev.offsetX == 0) { mx = ev.offsetX; my = ev.offsetY; }

Alternative way (mainly to show you there are various ways) Defines a function called getcoords –Takes as argument the value set up by the event –Returns an array See html5/signhere.html html5/signhere.html

Adjustment Images are drawn starting at the upper left corner. We want the image to be centered at the position where the player clicked on the screen. Assuming the mouse coordinates are mx,my, and the image 100 x 100, then we place the image at mx-50, my-50.

Contrast I made the adjustment for an image – 5/drawing.htmlhttp://faculty.purchase.edu/jeanine.meyer/html 5/drawing.html But I didn’t for a video clip – 5/movingpictures.htmlhttp://faculty.purchase.edu/jeanine.meyer/html 5/movingpictures.html No particular reason

Dice game … aka craps. Rules: player rolls 2 dice. This is a first throw. In all cases, the value is the sum of the faces. On a first throw, 7 or 11 win and 2, 3, 12 lose. If it is neither of those (4, 5, 6, 8, 9, 10), then the status shifts to follow-up throw and the value just rolled is 'the point'. On follow throw, the point wins and 7 loses. If neither happen, play continues as followup throws. The game can keep going! Examples

Dice game logic In pseudo-code / English If it is a first throw, then we use these rules, that is, work with these cases If it isn't (not a first throw, namely a followup throw), then we use these other rules, consider these cases.

Implementation We / our code needs to know the state of the game –first throw or follow-up throw –if follow-up, what is the point value Solution: use global variables, variables defined with a var statement outside of any function. –variables used inside functions without a var statement outside are local variables. They go away when function ends.

Implementation We / our code needs to carry out the rules. Solution: use if statement to check on state (first throw or follow-up) and use switch statement in each clause to hold rules.

switch statement: mixture code and pseudo-code switch(sum) { case 7: case 11: show a win break; –case 2: case 3: case 12: show a loss break; default: … set up to be follow-up throw }

Outline of logic: DO THIS if (condition) { switch () { statements } else { switch () { statements }

General programming concepts Places to hold data Variables: Issue of scope and access –Global variables –Local variables –Properties of objects (also have issues of scope and access) Visible element on screen

JavaScript Global variables: defined outside of any one function, within the script tag. Can be accessed and modified by code within functions. var score = 0; Local variables: within a function. Only lasts during invocation of function. Only accessible within function.

Dice game mples.html Scroll down for examples and tutorial and die face images. mples.html Tutorial suggests working in stages –1 die –2 dice –full game Do this! Save each new stage with new file name. Don't just copy and paste code but put code in proper place. Note: only 1 dthrow function.

Homework Catch up: favorite sites, first coin toss, crooked coin toss, coin toss with counts, static drawings, dynamic drawing (star), coin toss on canvas Work on dice game. –Next class: Alternative dice game done using canvas: no image files, instead draws dots (pips). htmlhttp://faculty.purchase.edu/jeanine.meyer/html5/html5explain. html Review charts –Look up terms on-line and/or in my book. Start thinking about your own games…