Programming Games Computer science big ideas. Computer Science jargon. Show virtual dog Homework: [Catch up: dice game, credit card or other form.] Plan your virtual something. Do codeacademy.

Describe 3 mistakes in the following code for calculating days in the month for this year switch(mon { case “Sep”: case “Apr”: case “Jun”: case “Nov”: daysInMonth = “This month has 30 days.”; case “Feb”: daysInMonth = “This month has 29 days.”; break; default: daysInMonth = “This month has 31 days.”; } For each mistake, is the error syntactic or semantic?

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

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

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…

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 example var list = [120, 45, 97]; list of 3 numbers list[0] is 120, list[1] is 45, list[2] is 97. Code can change one of the elements: list[1] = 80; OR if n is a variable holding the number 2: list[n] = 23; means after these 2 assignment statements: [120,80,23]

Big ideas Function Variable Object Event Arrays Application state

Function Function is definition of a sequence of statements CODE –And (generally) a name –And (sometimes) one or more parameters A function once defined can be invoked –Called –Called to be executed

In HTML/Javascript Definition of function is in the element function dthrow() { } Invocation of function in Invocation of function in function travel( ) { move(dx,dy); } tid = setInterval(“change();”, 300);

HTML with Javascript (repeat) One function can call another function Invoke function after reading in (loading in) body, using onload= in tag Invoke function directly in the section Invoke function by a submit button defined in a element – Invoke function using an element – Start Invoke function using a element.

Variables Variable: associates a name with a value Value can change (vary) Can use the variable name to get the value Variables can be global (outside of any function) or local to a function Javascript: –Declare the variable using a var statement –Doing this outside any function makes the variable global and available to any code inside functions or outside functions

Other information Programming generally requires encoding of information. The encoding CAN BE arbitrary, but does need to be defined –My rock paper scissors game assigns 0 to rock, 1 to paper and 2 to scissors. The player NEVER sees this. Many systems of encodings start with 0 –Arrays (sets of values) are indexed starting with 0.

Instructions Computer storage holds –Instructions (the code) Instructions may be translation (compilation) of higher level instructions Machine code: Load Register, Store Register, Add, Multiply, Check value and jump, etc. –Information Can't look at the bits and say what it is – the letter J or the number 74 or...

Note: Scope Large (larger) applications worked on by many people require rules on scope of variable and function names What if two or more people working on different sections of a project used the same name? Answer: scoping rules. Avoid global variables. Share information different ways… –Use objects

Objects Objects bring together code and data Code called methods Data called properties or attributes Math object has random method document object has write method –write method takes what is to be written as the parameter If an img element has the name 'coin', then the document object has an attribute by the name of coin that has an attribute by the name of src.

programmer defined objects See program with approach for building rectangles and ovals. – 5/build1.htmlhttp://faculty.purchase.edu/jeanine.meyer/html 5/build1.html Added video and heart – 5/collagebase.htmlhttp://faculty.purchase.edu/jeanine.meyer/html 5/collagebase.html

Events An event is something that can be detected by the system Event definition involves setting up the event and specifying what is to be done when it occurs. Javascript (and other languages/systems) may treat events differently. Underlying common concepts are –Event definition (setup) –Specification of event handler

HTML with JavaScript events Clicking on button set up using element or element. Clicking on link (set up using element) addEventListener for event on an object, such as a element. For slide show: Passage of interval of time (set up using setInterval and turned off by clearInterval)

Application state State of the game May or may not be visible on screen Example: –dice game: first throw or follow-up throw –slide show: which slide –Will show: bouncing ball: current position of ball and current deltas (xa and ya) –Minesweeper: where the mines are and which cells have been examined –?

Implementation of application state Use [internal] variables Use values in visible html elements, such as form input values.

Advice Review YOUR programs and use the computer programming jargon to describe YOUR code. Review previous lectures.

Virtual dog Done with older HTML. Many places for improvement. – 3.htmlhttp://faculty.purchase.edu/jeanine.meyer/pet 3.html See tutorial / notes: – virtualpetjs.dochttp://faculty.purchase.edu/jeanine.meyer/ virtualpetjs.doc

Virtual dog Has states that correspond to –different image files put in the img element. –Form input fields used to indicate information. There is a weight variable that goes up and down. There is a stochastic (random) factor in the dog wagging its tail (displaying an animated gif) or snarling (displaying the mean image) –calculation also uses times since last fed There is a timed event that decrements the weight and uses an if statement to determine a new state.

Homework Plan your virtual something. (Step away from the computer.) Decide what you want to do. –Decide on states, state variables, conditions. –Write out to show next class. –THEN (and only then) study code and tutorial. You also can make use of canvas for drawing. Note: I did my Virtual Dog before HTML5. You can make use of canvas –But wait to use video, audio, for final project.