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 oncetid = 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

ordocument.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 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.

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/html5logoscale.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!