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.

• http://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 statementsalert("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 consoleChrome: 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 </a>, 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.

• http://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 http://faculty.purchase.edu/jeanine.meyer/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 atmx-50, my-50.

Contrast

• I made the adjustment for an image– http://faculty.purchase.edu/jeanine.meyer/

html5/drawing.html

• But I didn’t for a video clip– http://faculty.purchase.edu/jeanine.meyer/

html5/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.

<script>var score = 0;• Local variables: within a function. Only

lasts during invocation of function. Only accessible within function.

Dice game

• http://faculty.purchase.edu/jeanine.meyer/jsexamples.html Scroll down for examples and tutorial and die face images.

• 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).• http://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…