Programming games Drawing! Debugging. New coin toss. Dice game rules. Storage (binary numbers) Homework: New coin toss. [Start dice game.]

Programming games

Drawing! Debugging. New coin toss. Dice game rules. Storage (binary numbers)

Homework: New coin toss. [Start dice game.]

Drawing

• EMAILed.

• Do exercises. Re-create and then modify.

• Recap:– rectangles– paths: arcs and lines– Today: images and text

Debugging• Make sure you are testing latest version

– you can make a small visible change

• 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/Error consoleChrome: wench symbol/Tools/JavaScript Console

Debugging

• In 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….

JavaScript if & if/else

if ( logicalexpression ) {

statements

}

if ( logicalexpression ) {

statements

}

else {

statements

}

Switch statement

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()

Goal: new 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.

• Put directions on the canvas.

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

http://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopcoinflip.html

http://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopcoinflip.html

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";…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.

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.

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; }

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.

Summary• <html><head><title> </title>• <script>

– variables– init function definition, including addEventListener to

set up call to flip– flip function definition

• </head>• <body onload="init();">

– canvas element

• </body>

<html><head><title>Coin flip</title><script>var ctx;var canvas1;var head = new Image();var tail = new Image();head.src = "head.gif";tail.src = "tail.gif";var coinwidth = 100;var coinheight = 100;

function init() { ctx =

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

canvas1 = document.getElementById('canvas'); canvas1.addEventListener('click',flip,false); ctx.font = "italic 20px Accent"; ctx.fillStyle = "#dd00ff"; ctx.strokeRect(0,0,600,400); ctx.fillText("Click on canvas to flip a

coin.",10,20);}

function flip(ev) {var mx;var my;ctx.clearRect(0,0,600,400); 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; } if (Math.random()>.5) { ctx.drawImage(head,mx-50,my-50,coinwidth,coinheight); } else { ctx.drawImage(tail,mx-50,my-50,coinwidth,coinheight);} ctx.strokeRect(0,0,600,400);ctx.fillText("Click on canvas to flip a coin.",10,20); }

</script></head>

<body onLoad="init();"><canvas id="canvas" width="600" height="400">Your browser doesn't support the HTML5 element

canvas.</canvas></body></html>

Your task

• Get this working. Change colors, fonts, positions.• Add scoring keeping!• You will need to add

var headcount = 0;var tailcount = 0;

• Add code to increase each of these in the right places. headcount++; or tailcount++• Add code to write out:ctx.fillText("Heads: "+String(headcount)+

" and tails: " + String(tailcount),10,100);

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!

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.

Programming the Logic (game rules) for craps

• Your code maintains a global variable that is true if it is a first throw and false otherwise. So it starts out as true. It is global, meaning the var statement is outside of any function, so the value stays available.

• There is code that checks this value using an if statement and then applies the appropriate set of 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.

Overview

• Representation of information. How is everything/anything represented 'in' the computer (in storage)?– ANSWER: everything is represented using 1s and 0s.

What the 1s and 0s mean depends on what the information is, for example, the datatype

• whole number, number with fraction, true/false value, character string, other…

• Expressions and operators

Storage

• Everything (data and programs) is stored in the circuitry of 'the computer'.

• The circuitry includes transistors that are switches: on or off states, 0 or 1. Each switch is called a bit.

• So….numbers are stored using the binary (base 2) system

• Symbols (characters, letters, etc.) are stored using agreed upon systems of encoding– ASCII: 8 bits per character

– UNICODE: 16 bits per character

Why?

• Why not use circuits that can more easily represent numbers using the decimal (base 10) system?

• Answer: Easier to make on/off switches than something with 10 states. Easier to build circuitry for calculations for the base 2 addition and base 2 times tables than the ones you remember…

Recall base 10

• Recall 1s column, 10s column, 100s column

• Recall borrowing (re-grouping) and carrying

• Do problem(s)

Base 2

• Same principle

• 1s column, 2s column, 4s column, ????

• Do problem(s)

Joke

Explain joke on shirt

Base 16• Hexadecimal: used for quick way to

describe bits, mostly commonly for color coding

• Symbols used are 0, 1, 2, …, 9, A, B, C, D, E, F

• You have seen color coding: RGB (red, green blue) in hexadecimal FF0000 is red 00FF00 is green ??

Numbers with fraction partAka numbers with a decimal point• How to represent?• ANSWER: floating point numbers

aka scientific notation– 3.4521 * 102 is the same as 345.21 * 100

– Terminology: 3.4521 (or 345.21) is the mantissa or significand and the 2 (or 0) is the exponent.

• Computer format: use 2 or 16 in place of 10• Example using 32 bits:

– 1 bit for the sign (0 for +, 1 for -)– 8 bits for the exponent – 23 bits for the mantissa (width, i.e., 23, is the

precision)

Characters

• ASCII codingThe character A is represented by 01000001

The character a is represented by 01100001

The character 1 is represented by 00110001

The character 2 is represented by 00110010

….

• Unicode is a 16 bit format big enough (hopefully) for all the world's languages

String of characters

…such as a name or a label or a piece of text

• Fixed length: allocate 1 byte (8 bits) for each character– UNICODE 2 bytes

• Variable length: store string in two parts– One part holds length as a number and

pointer (address) of the whole string– String itself

Boolean

• Named after George Boole• True / False• Theoretically: 1 bit, 0 for false, 1 for true

but• The addressability requirement means it

could be 1 byte or even bigger• String of Booleans can be combined.

– A byte can represent the answer to 8 true/false questions.

Homework• Catch up: favorite sites, first coin toss,

crooked coin toss, static drawings, coin toss on canvas

• Work on dice game.

• Review charts– Look up terms on-line and/or in my book.

Documents

Programming games Drawing! Debugging. New coin toss. Dice game rules. Storage (binary numbers) Homework: New coin toss. [Start dice game.]