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 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/Error console Chrome: wench symbol/Tools/JavaScript Console 3
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…. 4
JavaScript if & if/else if ( logicalexpression ) { statements } if ( logicalexpression ) { else { 5
Switch statement switch (expression) { case value1: statements default: statements } If you do NOT want execution to continue (flow into) the next case, you need to insert a break statement. optional 6
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
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 at mx-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. 23
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 { Do outline the logic and then fill in the details. 26
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 27
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. 28
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 part Aka 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 coding The 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.