Programming games

1
Programming games

• Recap
• Calculations (variables)
• Work on dice game
• Homework Complete dice game. Can work on
  odds/probabilities of wins/losses question. Can
  look ahead to slide show.

2
HTML with JavaScript

• The statement
• return false
• is necessary to prevent the browser from
  refreshing the screen, which would restore the
  original images.

3
Watch out

• Spelling of HTML javascript tags and commands
  must be correct.
• You must save the file as filetype name.html
• For the name all one word, lowercase.
• Make sure you are saving as .html
• Your names must be consistent.
• You can spell how you like.
• Punctuation (called syntax) must be correct
• Missing quotation marks and missing or misplaced
  brackets matter.
• Image files must really be of indicated type.
• Be careful of large images pushing button
  off-screen.
• Anything else??????

4
Names

• File names, variable names, function names
• Simple, short, but clear enough for you to
  remember
• Consistency helps
• NOT head.gif, tails.gif
• Einstein said explanations / theories "should be
  as simple as possible, but no simpler."

5
From cointoss

• document.coin.src "tail.gif"

6
Debugging

• Make sure you are testing latest version
• Make 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 messageit just doesn't work!
• Use Firefox and type into address field
• javascript
• This may display an error message.

7
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 , etc. though
  you may need to print out and use pencil

8
For curiousity

• Try
• xxx Math.random()
• alert("xxx is " xxx)

9
JavaScript if if/else

• if ( logicalexpression )
• statements
• if ( logicalexpression )
• statements
• else
• statements

10
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
11
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.

12
Outline of logic DO THIS

• if (condition)
• switch ()
• statements
• else
• switch ()
• statements

13
JavaScript, continued

• Properties of objects
• Dot notation document.coin.src
• Form input tags can
• hold 'input' accept information from player
• and 'output' display results/instructions to
  player
• document.f.ans.value

14
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

15
JavaScript

• Global variables defined outside of any one
  function, within the script tag. Can be accessed
  and modified by code within functions.
• var score 0
• Local variables within a function. Only lasts
  during invocation of function. Only accessible
  within function.

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

17

• Do not just copy and paste code from the
  tutorials into your html document. The code needs
  to be in the right place!!!
• global variables
• definition of function(s)
• image tags
• ..

18
Html

• html elements have opening and closing tags
• except for singletons such as img
• Elements have attributes, depends on the type.
• Elements can have names
• Need the name to reference or set any of the
  element attributes

19
Programming

• Requirements for names exact for built-in
  features and consistent for those you (the
  programmer) make up. This holds for ALL
  programming languages
• Requirements on bracketing (things within things)
  holds for ALL programming languages
• The specific syntax (use of ,(),,) holds
  for JavaScript AND ActionScript
• And Java and C
• Some other languages use line breaks and other
  symbols

20
Declare variables

• The var statement is used to set up a variable
  associate a name with a value.
• The var statement can initialize the value or be
  used just to let JavaScript 'know' that this will
  be used as a variable.
• Variables can change (vary.)
• Variables are named values
• Values can be numbers, strings, Booleans (true or
  false), other things

21
Arrays

• . Are sets (actually a sequence) of things.
• The code gets to one of the things using an
  index.
• Index can be 0 to 1 less than the number in the
  array
• This relates to how the address is calculated.
• For examplevar list 120, 45, 97list of 3
  numbers
• list0 is 120, list1 is 45, list2 is 97.
• Code can change one of the elementslist1
  80
• OR if n is a variable holding the number
  2listn 23means after these 2 assignment
  statements120,80,23

22
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 bedocument.dicea.src
  faceschoice.src

23
Work session

• Complete your dice game
• If you have done it, 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.

24
Problems

• Do NOT have comma after last item in array
• dieimagea or diceimagea but stick to one
• Should NOT have two (or more things) with the
  same name
• Not two faces arrays, not two or 3 dthrows
• When testing, it is good when the game CORRECTLY
  has the player lose!

25
Problems/warnings

• Image files must be jpg, gif or png to work on
  (over) the web
• File names must be all one word to work on the
  Linux server (newmedia.purchase.edu)
• Bias coin example I will ask for an exact amount
  of bias!
• Make sure code that should be inside a function
  IS inside the function (inside the

26
Extra assignment

• 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?

27
Craps game

• choice Math.floor(Math.random()6)
• Gives a number 0 to 5. Use this number to get the
  faceschoice.src
• Add 1 to choice to get the die value
• dievalue1 choice 1
• dievalue2 choice 1 (choice has changed)
• sum dievalue1 dievalue2
• The sum is what you do the switch tests on.

28
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)

29
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

30
Requirements for adder application

• Need names for form and for each input tag
• Input is text. If the text is supposed to be a
  number, need to change it convert it (also
  called 'cast') to numeric datatype.
• Can be explicit, using parseInt function or
  multiplying by 1 OR can occur 'naturally'.
• The won't work because is a valid operation
  for character (text) strings.
• Try this without the parseInt or 1 and see what
  happens!

31

• adder
  function addup()
• var op1 var op2
• op1 parseInt(document.f.op1.value)
• op2 1document.f.op2.value
• document.f1.ans.value op1op2
• return false
• First value
  
• Second value
  

Assumes form f1
32

• adder
• function addup(f)
• var op1
• op1 parseInt(f.op1.value)
• var op2
• op2 1f.op2.value
• f.ans.value op1op2
• return false
• First value
  
• Second value
  

Could be called for different form
Two different ways to change characters to
integers.
33
Score keeping

• Example of need for
• a global variableone that keeps its value after
  function ends
• visible output need to show score
• var score 0
• Function toss()
• score
• document.f.scorev.valuescore

34
alternative

• Use visible input tag alone to keep value
• document.f.scorev.value parseInt(document.f.scor
  ev.value)1

35
Text versus Number

• 5 is not the same as "5"
• JavaScript is called a weakly-typed language.
  Variables do not have set datatypes.
• JavaScript SOMETIMES will do datatype conversions
  for you
• But sometimes not
• If you see 11 when you wanted 2, it means you
  need to insert conversions.
• ActionScript is strongly-typed. Variables are of
  set (fixed) type. Need to make conversions
  explicitly practically all the time.
• One exception is display.

36
Image swap on mouse over

• Uses what you already know
• How to reset value of src attribute in an img tag
• Plus onMouseOver, onMouseOut, onClick
• onClick"return false"
• onMouseOut"movein('Liz-book.jpg')"
• Note the call to the function movein takes an
  argument different images file names are used
  for the different situations.

37
Slide show preview

• Array variables to hold list of slide images
• setInterval for setting up a timed event
• clearInterval for stopping a timed event
• href"javascriptcode" for invoking JavaScript
  when clicking on contents of element.

38
Array variable

• a variable that holds a set of values. To set or
  use any particular value, you refer to the array
  name and an index.
• The index values go from 0 to 1 less than the
  number in the array.
• Define array various ways
• var mylist new Array
• mylist 34
• mylist 26
• mylist 34, 26
• See next.
• mylist.length is the number of elements in the
  array.

39
Slide show

• slides new Array(
• 'bird.gif',
• 'frog.gif',
• 'heart.gif'
• )
• slides0 is 'bird.gif'
• slides1 is 'frog.gif'
• slides2 is 'heart.gif'
• cur 1
• slidescur is 'frog.gif'

40
Timed events

• Want something to happen at fixed intervals
• Need to specify the duration of the interval AND
  what you want to happen (aka the event handler or
  event procedure)
• tidsetInterval('change()',800)
• We use a function call to the function (to be
  defined) change. The time interval is 800
  milliseconds.
• Need to turn off (stop) the timed events
• clearInterval(tid)

41
Homework

• Complete dice game
• Add score keeping
• Compute probabilities of winning, losing, neither
  for first throw and follow-up throw
• Read and try out the 3 chocolate form calculation
  examples.
• Read slide show start implementation
• You need at least 3 image files
• The next project (after slide show) will be the
  virtual dog.