Programming Games Computer science big ideas and Computer Science jargon: review of things we have used in examples. 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? 2
HTML html elements have opening and closing tags …except for singletons such as img <img src=" " /> Elements have attributes, depends on the type. Elements can have names Need the name to reference or set any of the element attributes <img src="dice1.gif" name="dicea"> 3
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 Processing and Java and C Some other languages use line breaks and other symbols 4
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… 5
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] 6
Big ideas Function Variable Object Event Arrays Application state Syntactic versus semantic errors 7
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 8
In HTML/Javascript Definition of function is in the <script> element function dthrow() { } Invocation of function in <body> <form onSubmit=“dthrow(); return false;” > <a href=“javascript:dthrow();”> </a> Invocation of function in <script> function travel( ) { move(dx,dy); } tid = setInterval(“change();”, 300); 9
HTML with Javascript (repeat) One function can call another function Invoke function after reading in (loading in) body, using onload= in <body> tag Invoke function directly in the <script> section Invoke function by a submit button defined in a <form> element <form name="f" onsubmit="return total(this);" > <input type="submit" value="ADD"/> Invoke function using an <a> element <a href="javascript:start();">Start </a> Invoke function using a <button> element. 10
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 11
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 01001010 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 14
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. 15
JavaScript Programmer defined objects: one way Define function (called the constructor) function (method) that stores attributes and methods using dot notation. THEN you (your code) defines objects invoking the constructor method. THEN you (your code) can access attibutes and invoke methods using dot notation.
Demonstrate WHY this can be helpful Program building collage: moving around rectangles and ovals. http://faculty.purchase.edu/jeanine.meyer/html5/build1.html Added video and heart Please be patient: more on videos later. http://faculty.purchase.edu/jeanine.meyer/html5/collagebase.html Why: doing the same or similar things with different types of things….
Other features Coordinate transformations to do the tilting of videos. External script elementhttp://faculty.purchase.edu/jeanine.meyer/html5/collagedata.js to put description of content in its own file globalAlpha and globalCompositeOperation to control how videos drawn on other videos
Events An event is something that can be detected by the system Event definition involves setting up the listening for 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 19
HTML with JavaScript events Clicking on button set up using <form> element or <button> element. Clicking on link (set up using <a> element) addEventListener for event on an object, such as a <canvas> element. For slide show: Passage of interval of time (set up using setInterval and turned off by clearInterval) 20
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 ? 21
Implementation of application state Use [internal] variables Use values in visible html elements, such as form input values. 22
Errors Syntactic error: analogous to error in grammar. The system can detect (though HTML & JavaScript may not show it) syntactic errors. Semantic error: error of meaning. The system can't determine that you meant to do something else. Go back to days-of-the-month example. Think also about drawings that did not look like you wanted. 23
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. http://faculty.purchase.edu/jeanine.meyer/pet3.html See tutorial / notes: http://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.