Programming games Share your plans for your virtual something. Homework: Catch up. Complete your virtual something.
Function Functions are one or more statements packaged together defined to be used later. The format for defining a function in JavaScript is function the_name_given_by_programmer (zero, or some number of names for parameters) { One or more statements }
Example function convertCtoF (cen) { return cen*(9.0/5.0) + 32.0; } Look back at examples with init, toss, change
Calling a function Aka invoking, executing Various ways, including By itself as a statement: startup(); In an expression: total = cost + ctax(cost); As value of attribute in html tag, these set up a call for later <body onload="init();"> <button onclick="toss();"> As event handler td = setInterval(moveit,100); canvas1.addEventListener("click",toss,false);
Recommend Review the code for your projects and notice use of functions. Look up functions online Go to Library and look at my books on reserve Try codeacademy
Planning … is a good thing to do! It is real work. Formal systems / commercial products for systems design Note: most work is not 'green fields', ab initio… but enhancements & fixes.
Share plans for virtual something ???
Discrete simulation Discrete as opposed to continuous. Determinations / calculations done at timed intervals using setInterval Reference & modify internal variables May change images (src of img elements) May change canvas
State Variables values with names Global outside of any function and so accessible by all functions persistent: stay around My Virtual Dog: weight of the dog. You may have more than 1 state variable. You also may have information in form fields or other html displayed to the viewer/player.
Checking conditions You can use if statements including nested if statements switch statements
Jargon Stochastic: factor involving some level of chance. Note: In my virtual dog, the formula varied from being 10% likely to produce snarly dog to 90% likely. Discrete simulation: calculations done at fixed intervals of time. NOT continuously. Persistent: stays around… Applied to variables. Global variables, variables with var statement outside of any function, stay around…
Size of images An img tag can include width and/or height attributes OR NOT If nothing specified, the width and height of the image file is used. If just width or just height, the other is calculated to keep aspect ratio. It makes sense to set at least height in the slideshow. Pixel is a small unit of length on the screen. Experiment !
Recommended Style section for formatting Script section for dynamic behavior Body section for content (structured content)
<html> <head> <style>. alignright {float:right} <html> <head> <style> .alignright {float:right} .alignleft {float:left} section {width: 50% } </style> </head>
<body> <section> Here is some text that will take up some of the space. The hr (stands for horizontal rule) shows how wide the section is. <hr/> <img class="alignright" width="100" src="head.jpg"/> <img class="alignleft" src="tail.jpg" width="100" /> </section> </body> </html>
Virtual something: Keep it simple,… At least for now: At least 2 actions No more states than my virtual dog, and it can be less. Focus on logic. Can improve graphics later.
General point What is the minimum you need to do to test your plan? Do this first and then add…. 3-4 images in slide show 3 states, 1 action in virtual something What is the minimum you need to do to satisfy the assignment? 5-6 states, 2 actions, 1 stochastic factor, …
[partial] Ideas Perhaps for midterm project: combine virtual something with credit card? Man goes into a bar… Virtual something be drawn on canvas: easier to vary color, size, and content. Fill up screen with stars? Something else? ‘Ville, Sim type game: “buy” stuff. Add stochastic factor?
Misc. Filezilla is one product that performs FTP (file transfer protocol). There are others. This is what is used here. On your home computer, consider using Normal, as opposed to Ask for Password Do keep uploading work and updating your index.html file Give your virtual project an evocative name, NOT Virtual something
Consider Having possibility for game lasting forever OR NOT
Virtual something To keep a global variable such as weight from going above a certain amount weight = Math.min(weight,upperlimit); To keep it from going less than weight = Math.max(weight,lowerlimit);
Drawing on canvas May or may not use clearRect each time. Consider using drawImage and then drawImage for smaller images on top or beginPath(), …. stroke() on top Consider looking up bezierCurveTo or quadraticCurveTo in addition to arc
States May have parallel arrays holding information such as colors, sizes, positions, image files START SMALL
Classwork / homework Get caught up Build your virtual something. This includes uploading work and modifying index.html page Build your virtual something. Note: you can build on this project for your midterm project.