1 / 20

Programming games

Programming games. Review concepts. Crooked coin toss. Homework: Complete coin toss examples. Upload files to your Purchase website. Try codeacademy. What is…. a function? how is it defined? how is it called? What is the name of the function you defined in your coin toss application?.

latona
Download Presentation

Programming games

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Programming games Review concepts. Crooked coin toss. Homework: Complete coin toss examples. Upload files to your Purchase website. Try codeacademy.

  2. What is… • a function? • how is it defined? • how is it called? • What is the name of the function you defined in your coin toss application?

  3. JavaScript function definition <script> function functionname (args if there are any) { statements } </script>

  4. Function call • Multiple ways to set up to be response to a button • A form is an html element. <form action="" onSubmit="return toss();"> <input type="submit" value="TOSS"> </form> • A new html element is button <button onclick="return toss();">TOSS</button> • other ways…

  5. Event handling • Speaking in general terms about something set up a variety of ways. • Set up the when this event happens, … do this, maybe call this function • Terms used: • event listener • event handler • event catcher • sometimes restricted to potential errors: try { } catch

  6. Other Function calls • In <a> tag as value of href <a href="javascript:fun(a, b);"> Call fun </a> • In <a> tag as value of onClick, onMouseover or onMouseOut <a href="" onMouseover="fun(a,b);" > • Set up to be called after time interval. This statement will be somewhere in the code, perhaps within another function. tid = setInterval("moveit(dx, dy)",500);

  7. Biased coin • How to change your program from a fair coin to a biased coin? • How to make it produce (over time) twice as many heads as tails? • How to make it produce (over time) heads 60% of the time and tails 40% of the time?

  8. Keeping counts • One approach • use form element <form name="f"> Heads: <input name="hc" value="0" /> Tails: <input name="tc" value="0" /> </form>

  9. Problem • There is a difference between text and numbers, so…. • need to extract the text value, convert to a number, add 1, then convert back. // for the head case document.f.hc.value = String(1+Number(document.f.hc.value)); So where do you put this and what do you do for the tail case?

  10. Classwork • Enhance the fair coin toss and the biased coin toss to show counts.

  11. Reading code: sketch <html> <head> <title>First html</title> </head> <body> Annika's first Halloween <br/> <img src="yodalightsaber.jpg" width="200"/> <br/> Costume by Aunt Aviva <a href="http://ravel.me/avivameyer/prix7">Knitting information </a> </body> </html>

  12. Folders • You may decide to make a folder called pg • So…. • http://students.purchase.edu/john.doe/pgwill cause browser to look for a file named index.html

  13. index.html <html><head><title>My Games</title></head> <body> Programming Games <ul> <li><a href=“sites.html”>My Favorite Sites </a></li> <li><a href=“coin.html”>Coin toss </a></li> <li><a href=“badcoin.html”>Biased coin </a></li> </ul></body></html>

  14. Folder for images • You can make a folder for images • Then the reference from the html file must be correct! <img src=“images/head.jpg” /> • Or not….. • May make more sense to make separate folders for the large[r] applications

  15. doctype • The first line of an HTML5 file should / can /maybe must for some browsers be <!DOCTYPE html> • If you use Dreamweaver, you may notice that it inserts another DOCTYPE. Remove this or else it won't work if it has html5 features. • A new text editor is http://www.sublimetext.com/

  16. ftp • file transfer protocol • Many programs available. • We use Filezilla • Demonstration

  17. codeacademy • There are many sources online to help you. • One is http://www.codecademy.com/ • This includes a terminal/console mode that returns the value of each expression. • Try the first lesson (or more) and post a comment on moodle.

  18. Homework • Do first course (8 short lessons) in codeacademy. • comment on moodle forum for this week! • Complete coin toss projects. • Prepare index.html file (This is a table of contents) with links to your projects. • Put it in the web folder OR (if you are taking other courses) a new subfolder called pg or games • Upload the index.html file and all your projects • html files and other files….

  19. Required • Master editing using TextWrangler (or Text Pad) or Sublime • Master ftp, using Filezilla (or equivalent ftp program) to upload to YOUR PURCHASE website • Using the virtual disk tends to be problematic! • Master using Filezilla to download from your server to your computer. • Master modifying your index file and uploading again

  20. Web site • It may make sense to make a directory/folder for this class. • You can call it pg • Put the index file in that directory • Put your application files in that directory • the .html files and all image files. • So.. students.purchase.edu/jane.doe/pgwill open up that file.

More Related