programming games drawing! debugging. new coin toss. dice game rules. storage (binary numbers)...
TRANSCRIPT
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
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 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.