Download presentation
Presentation is loading. Please wait.
1
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.]
![Homework: New coin toss. [Start dice game.]](http://slideplayer.com/slide/7697572/25/images/1/Homework%3A+New+coin+toss.+%5BStart+dice+game.%5D.jpg "Programming games. Drawing! Debugging. New coin toss. Dice game rules. Storage (binary numbers) Homework: New coin toss. [Start dice game.]")
2
Drawing EMAILed. Do exercises. Re-create and then modify. Recap:
rectangles paths: arcs and lines Today: images and text
3
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
4
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
5
JavaScript if & if/else
if ( logicalexpression ) { statements } if ( logicalexpression ) { else { 5
6
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
7
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()
8
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.
9
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).
10
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.
11
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";
12
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.
13
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.
14
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; }
15
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.
16
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>
17
<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;
18
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); }
19
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); }
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>
21
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);
22
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!
23
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
24
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.
25
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 }
26
Outline of logic: DO THIS
if (condition) { switch () { statements } else { Do outline the logic and then fill in the details. 26
27
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
28
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
29
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
30
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
31
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…
32
Recall base 10 Recall 1s column, 10s column, 100s column
Recall borrowing (re-grouping) and carrying Do problem(s)
33
Base 2 Same principle 1s column, 2s column, 4s column, ????
Do problem(s)
34
Joke Explain joke on shirt
35
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 ??
36
Numbers with fraction part
Aka numbers with a decimal point How to represent? ANSWER: floating point numbers aka scientific notation * 102 is the same as * 100 Terminology: (or ) 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)
37
Characters ASCII coding
The character A is represented by The character a is represented by The character 1 is represented by The character 2 is represented by …. Unicode is a 16 bit format big enough (hopefully) for all the world's languages
38
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
39
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.
40
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.
Similar presentations
![Programming games Reprise on dice game and alternative dice game Homework: [Catch up.]. Finish dice game.](/15/4547229/big_thumb.jpg "Programming games Reprise on dice game and alternative dice game Homework: [Catch up.]. Finish dice game.>")
