Programming games
Reprise on dice game and
alternative dice game
Homework: [Catch up.]. Finish
dice game.
Problem
• Browser differences! What once worked in
Chrome, no longer works in Chrome!
– Determining exact mouse position.
• Use function with slightly different if / else
• Call function when need the mx, my
function getCoords(e){
var coords = [0,0];
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
coords[0] = e.pageX;
coords[1] = e.pageY;
} else if (e.clientX || e.clientY) {
coords[0] = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
coords[1] = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
return (coords);
}
Calling returns array
var coords = getCoords(ev);
var mx = coords[0];
var my = coords[1];
Coin toss
• [not coin]
• http://faculty.purchase.edu/jeanine.meyer/
html5/bunnycover.html
Staged implementation
• Throw 1 die
• Throw 2 dice
• Throw 2 dice and get sum
– Show sum
• Do rules of craps
• NOTE: you will be adding code into the
dthrow function (inside the brackets)
Incremental development
• Do practice writing outlines as just shown.
• Get small parts of project working
– Follow suggestions in the tutorials and
– Follow this practice for your own projects.
• You may divide tasks differently.
Faces examples
• First example, faces is a list of character strings
representing names of image files.
• Second example, faces is a list of image
elements. To get the name of the image file, the
code needs to be
document.dicea.src = faces[choice].src;
• TWO EXAMPLES IN TUTORIAL ARE
DIFFERENT…. TO SHOW YOU DIFFERENT
WAYS OF DOING THINGS….
Testing
• You test the program to see if it works
correctly!
• This means you as the player win and
lose!
• Because of the pseudo-random feature
(aka stochastic processing), testing takes
time…many cases.
Work session
• Catch up and show us: sites, coin toss, biased
coin, drawings, alternative coin toss
• Work on dice game
• If you have completed dice game, do alternative
dice game OR add feature(s)
– Add (more) graphics
– Display different message depending on situation
– Keep score and show it using an alert statement or
form variable
– (May take knowledge/research): add field for entering
value of bet.
Extra credit posting opportunity
• What are the chances of winning on a first
move? What are the chances of losing?
What are the chances of needing followup
moves?
• For each possible point value, what are
the chances of winning, losing, needing to
continue?
Recap: Dice game
• Game logic implemented using if
statement and switch statements
• Game rules require global variables to
hold state information: information
persisting between throws
• Arrays: sequences of things (names of
files or img elements)
– Indexing starts at 0
Reflection on dice game
• Logic: switch statements in clauses of
if/else statements
• Global variables holding state of the game
– first move or follow-up
– point value (only has significance if follow-up)
• Display using graphics and text
• Implement in stages!!!!
• Need to test all possibilities
– not test until you win….
Reflect and Continue
• Storage of standard things (e.g., numbers)
solved but representation of information for
specific problems is / will be new challenge
• Now on to representation of formulas and logic.
– Closed form – mathematical formula – easy to
represent in code
– Algorithm, logic, may require use of conditionals,
more…
• Models: build computer model = representation
of something, some phenomenon. NOT simple
(closed form) formula, but involving programs…
Alternative dice game
• Remove the need for image files by
drawing the die faces.
• http://faculty.purchase.edu/jeanine.meyer/
html5/craps.html
– examine code
Calling pattern
• throwdice function sets up dx and dy for
each die and calls
– drawface(n)
• uses a switch statement to determine what to do,
namely single or combination from a set of
functions.
switch(n) {
case 1: draw1();break;
case 2: draw2();break;
case 3: draw2();draw1();break;
case 4: draw4();break;
case 5: draw4();draw1();break;
case 6: draw4();draw2mid();break;
}
draw2
function draw2() {
var dotx;
var doty;
ctx.beginPath();
dotx = dx + 3*dotrad;
doty = dy + 3*dotrad;
ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
dotx = dx+dicewidth-3*dotrad;
doty = dy+diceheight-3*dotrad;
ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();}
Exercise
• Take one of the choices for the switch
statement and be able to explain how it
works.
• Choose different colors and make it do
what you want!
How many files….
•
•
•
•
original coin toss
alternative coin toss
original dice game
new dice game (draw the faces)
Comparison of two dice games?
• Using image files means…you can use
fancy image files.
• Not using image files means that this
application is just the one html file.
• Speed? Downloading of image files versus
drawing. The downloading time is not
repeated.
• ?
Enhancements
• Adding other images.
• Adding a bankroll feature.
– start with a certain amount, say 100 and
– at each game (first throw), decrease this by
10.
– at each win, increase by 20.
– Display this amount in a new input field in the
form.
– Comment: this is appropriate method of
scoring for this type of game! How to score
varies and can be subjective.
Homework
• [catch up]
• Complete dice game.
– You can do html5 drawing on canvas version
for extra credit.
– You can devise your own draw somewhere
game.
– You can enhance the game
• Keep up with uploading applications and
updating your index file.
– Choose / invent appealing names