Transcript Slide show. Range. Datatypes. Binary numbers

Programming Games
Logic. Slide show. Range input. Storage.
Datatypes. Binary numbers.
Homework: Catch up. This includes uploading
projects to your server account and creating
(and updating) an index.html file.
Reprise: logic of dice game
• Use so-called state variables to hold
– Boolean value (true vs false) indicating if this
a first throw or not
– value (number) of the point value
• Use if statement with the condition is this
a first throw
• Use switch statements to hold the rules
– different based on first throw or not first throw
Any application
any game
• what are the states of the application?
• what are the rules?
• what are the player moves?
• what are the events (including responding
to player moves)?
Timed events
• JavaScript provides functions for setting up timed
events
• setInterval ('moveit(dx,dy)',500);
tid = setInterval('change()',800);
setInterval(change,800);
setTimeout(finish,2000); //just
happens once
tid = setInterval(finish,2000);
clearInterval(tid);
Timed events
• The coding is different, but the underlying
concept is the same as other events
– set up handling for event: do something,
generally invoke a function, when something
happens
– write the event handler function
– event can be stopped, for the timing event,
that means a call to clearInterval using the
value set by the call to setInterval or
setTimeout.
Exercises
• Set up a timed event to be a call to
"stopgame();" to happen one time, after 10
seconds? one and one half seconds?
– What do you think stopgame is?
• Set up timed events to be a call to
"moveit(dx,dy);" to happen 10
times/second until your code stops it?
Slide show
• Use form buttons to start and stop the slide
show.
• Starting the slide show is done by a function that
contains a call to setInterval.
• Stopping the slide show is done by a function
that contains a call to clearInterval.
• The change function advances the slide show
using a variable sn and then incrementing sn.
The sn variable is reset back to zero when it
reaches the end—pointing past the end of the
array holding the names of the slide image files.
Preview: Animation
• … fooling the eye/brain by showing a
sequence of still pictures.
• JavaScript: use setInterval.
– shorter intervals than for the slide show
– In slide show: the event handler changes the
src value of an img element.
– Future projects: the event handler will change
src values OR draw (re-draw) the canvas OR
move (re-position) elements around the
screen.
Slide show
• Use an array to hold the names of the
image files.
– Alternative: construct the names. This works if
the names follow a pattern.
• Need to write code to go back to the first
element of the array.
• Note: the variable sn pointing to next slide
is a state variable
Slide show
• You need to upload the .html file and all the
image files.
• Some people like putting image files in their
own folder.
• Your code must reflect this…
• Either change the values in the slides array
or
document.pic1.src = "images/" +
slides[sn];
Lead in to datatypes…
• What does the + operator do when the
operands are strings (aka character
strings aka text)?
• Answer: concatenation
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 directly
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
Another Joke
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
The character a
The character 1
The character 2
….
is represented by 01000001
is represented by 01100001
is represented by 00110001
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.
HTML5 form input
• HTML5 provides additional ways to specify input
in forms.
• Claim is that browser will check (validate) input.
• One specific new type is range
<input id="slide" type="range"
min="0" max="100" value="100"
onChange="changescale(this.value)"
step="10"/>
http://faculty.purchase.edu/jeanine.meyer/html5/ht
ml5logoscale.html
HTML5 form input
• See
http://faculty.purchase.edu/jeanine.meyer/
html5/addmessage.html
For type="url", type="color"
• There are others.
Classwork/Homework
• Make your own slide show
– Think about timing. May change after your
program is debugged.
– Can add more images.
• Next class: credit cards
• Catch-up!