Programming games - PowerPoint PPT Presentation

About This Presentation
Title:

Programming games

Description:

Programming games Introductions, course, class http://moodle.purchase.edu Classwork: Favorite sites. Homework: Review today's charts (examples of code). – PowerPoint PPT presentation

Number of Views:84
Avg rating:3.0/5.0
Slides: 45
Provided by: Jeanin52
Category:

less

Transcript and Presenter's Notes

Title: Programming games


1
Programming games
  • Introductions, course, class
  • http//moodle.purchase.edu
  • Classwork Favorite sites.
  • Homework Review today's charts (examples of
    code). Finish favorite sites. Introduce yourself
    (again) on moodle.

2
Introductions
  • Jeanine Meyer
  • Full professor, Math/Computer Science New Media
  • Pace UniversityIBM research (robotics) ,
    manufacturing staff, education
  • books Multimedia in the Classroom, Programming
    games using Visual Basic, Creating Database Web
    Applications with PHP and ASP, Beginning
    Scripting Through Game Creation, The Essential
    Guide to HTML5 Using Games to Learn HTML5 and
    JavaScript, and HTML5 and JavaScript Projects
  • Son teacher Illinois College. Daughter staff
    for Westchester County Legislature, stage
    manager/media theater group Stolen Chair (visit
    http//www.stolenchair.org)
  • Hobbies/interests politics, gardening, origami,
    cooking and eating, reading novels, knit
    crochet, travel
  • Learning assistant Joshua Scarlett Aryn
    Giddens
  • You?

3
Course
  • Introduction to programming using simple games
    as the problem domain
  • Why?

4
Programming Environment
  • Hypertext Markup Language (HTML) with JavaScript
    (scripting language) and CSS (formatting)
  • will make use of HTML5 features (canvas, video).
    NOT YET SUPPORTED BY ALL BROWSERS.
  • Will use TextWrangler or TextPad.
  • Note Logic is logic. Programming is programming.
    Important to note similarities and differences
    between HTML with JavaScript and other languages
    / development environments

5
Outline of work
  • HTML/JavaScript
  • Produce your favorite sites, coin toss, canvas
    drawings, dice game, slide show, credit card,
    virtual something
  • Design produce your own game (or significantly
    enhanced version of one of my games)
  • Midterm quiz
  • HTML/JavaScript
  • bouncing ball, cannonball, video, Google Maps API
  • Design and produce your own game (or
    significantly enhanced version of one of 'my'
    games, including games in my books)
  • Final quiz
  • Pop quizzes

6
Course materials
  • Lecture notes, sample games, tutorials, other
    notes are or will be posted
  • faculty.purchase.edu/jeanine.meyer
  • On-line sources (use google) excellent for
    JavaScript
  • http//www.codecademy.com/ Do it and keep
    doing it (and post your impressions)
  • There will be pop quizzes on finding information.
  • Many books, including mine
  • Beginning Scripting through Game Creation
  • Essential Guide to HTML5
  • HTML5 and JavaScript Projects

7
Course topics
  • How to specify look, function logic of games
  • Use concepts common to all programming languages
  • Logic, statements, compound statements
  • Variables, functions
  • Use concepts of Modern programming systems
  • Design of graphical user interface
  • Event handling
  • Objects
  • Some devotees of OO would argue that JavaScript
    does not have all features of real OO language.

8
Brief introduction to a few terms
  • A variable holds values (numbers, strings of
    characters, Booleans (true or false))
  • A function is packaging of code, to be invoked
    later
  • Statement types include
  • Assignment statements
  • Calls to functions (built-in or programmer
    defined)
  • Compound statements if, for loops
  • An event is something that can happen for which
    you specify a response (handler)
  • Some events are relatively easy for you to set
    up for example, clicking on a button/link
  • Timing events

NOW IS THE TIME TO TAKE NOTES ASK QUESTIONS!
9
What is programming?
10
How to specify the actions for shoe tying
  • Typical situation easy to do but more difficult
    to articulate how to do it.
  • Atypical physical actions and not just
    data/information.
  • Issues of deciding level of specification.
  • Get in small groups and write down instructions
    as you would teach a child.

11
Reflection on shoe tying
  • More than one way to accomplish task
  • Divide task into small (very small) steps
  • Actions depended on external conditions and
    events happening
  • describing steps required some special use of
    language jargon
  • ALL features of programming!

12
Function
  • Important concept in programming
  • All programming languages have specific way to
    define a function (subroutine, procedure)
  • a method is a function/procedure associated with
    a class of objects
  • an operation is a procedure specified to act on
    operands
  • and call the function
  • ALL programming languages have built-in
    functions, e.g.,
  • Date()
  • Math.random()
  • One type of shoe-tying do overhand knot once
    with single strands and then with loops

13
Functions
  • In JavaScript, ActionScript, and some other
    languages
  • Function headerfunction name_of_function(paramet
    ers)
  • Followed by body of function (code statements)
  • function area(w,h)
  • return wh
  • Using area as a model, how would you define a
    function called perimeter, parameters w and h,
    and returns the perimeter of a rectangle, two
    sides length w and two sides length h?

14
Computers must be programmed
  • Some one, generally a collection of people, have
    specified the actions of the computer.
  • Actions can include
  • Performing a calculation
  • Moving data around
  • Accepting input or producing output
  • Testing something and doing different things
    depending on the results

15
Programming involves
  • Problem solving (more or less independent of the
    programming language)
  • Specifying solution in terms of the programming
    language environment
  • Program sequence of statements (certain
    statements can change the flow of control, e.g.,
    conditionals loops)
  • Additional issue(s) involve the user interface
    input (information directives from the user)
    output (information presented actions taken)

16
NOTICE
  • If your program doesn't work, it is because of
    something you did, not something some alien force
    inside the computer is doing to annoy you.
  • Taking ownership is important.
  • Reflecting on mistakes (mis-conceptions) is
    important.
  • Creating programs requires thinking logically,
    systematically about sequences of
    steps/operations. It is not copying or memorizing
    text.

17
Sample statements
  • Assignment Note equal sign doesnt mean equal!
  • count 0
  • count count 1
  • Note count and count
  • ifelse
  • if (class Programming Games )
  • schedule Monday/Thursday
  • else
  • schedule Tuesday/Friday
  • Looping
  • sum 0
  • for (i0 iltgrades.length i)
  • sum sumgradesi
  • Average sum/grades.length

18
Repeat
  • In most programming languages, the symbol is
    used in assignment statements.
  • It means set the value to be ..
  • One programming language, APL, used an arrow, but
    this did not catch on.

19
Programming
  • Decide what is needed to be done (logic)
  • different approaches can work just like there are
    different ways to tie shoe laces
  • Implement that logic in the programming language
  • Programming languages are not like natural
    language
  • Grammar (syntax) must be exact
  • Some flexibility, but much less expressive power
  • . Computer systems are infinitely patient
  • Test, correct enhance, re-test
  • Divide tasks into smaller tasks.

20
To build a computer application
  • You must specify/program everything
  • Static display
  • Dynamic display (what changes)
  • Response to user/player action
  • Response to system events
  • Rules of the game
  • If a two-person game (if the computer is a
    player), the computer moves/actions
  • You must change roles and be tester of the
    application.

21
If actions must be specified completely.
  • How do we put randomness into a program
  • For example, throw of dice, layout of mines in
    minesweeper
  • Answer JavaScript (and other programming
    languages) have built in features to produce
    pseudo-random sequences of numbers.
  • They appear random, but they are calculated.

22
Pseudo-random functions
  • JavaScript and ActionScript have Math.random()
  • Typical use
  • dice1Value 1 Math.floor((Math.random() 6))
  • dice2Value 1Math.floor((Math.random() 6))
  • What if I wants a random choice from among 1, 2,
    or 3?

23
Strategy for course
  • The course is building games, not playing games.
  • Attend every class session. Be on-time.
  • Pay attention. TAKE NOTES.
  • Do not use the computer when I'm lecturing!
  • Do not use your cell phone in class.
  • Study materials. LOOK UP TERMS.
  • Come for help
  • My office hours Monday/Thursday 1230am to
    225am, NS3003
  • or by appointment on Wednesdays (before 1230pm
    and after 4pm) or Monday/Thursday (earlier than
    1030pm.)
  • Einstein's Corner. Maybe Learning Center
  • It is YOUR responsibility to ask for help.
  • Push yourself, butbuild games in small steps.
  • Appreciate the fact that programming is different
    than using other computer tools. Be patient
    with yourself BUT/AND put in the effort.
  • Keep an idea book for programs you want to create.

24
Advice
  • Pay attention! Listen when I talk
  • Stop working at the computer EVEN if it is work
    on class projects
  • Attempt to answer all questions!
  • Review and reflect on what you are doing.
  • Programming is not memory work, just like writing
    an essay isn't remembering whole sentences.
  • YOU MAY BENEFIT BY TAKING NOTES ON COPIES OF THE
    SLIDES (can print out 2,3,6/page)
  • Come to office hours and to Einstein Corner
    tutoring
  • It is easy to be lost in details of coding.
  • Now on to first project favorites sites

25
Text editor
  • That knows about html is good because it will
    use color coding for different types of elements
  • This is especially helpful for things in
    quotation marks. Omitting a trailing quotation
    mark causes trouble!
  • TextWrangler or TextPad
  • We won't use Dreamweaver or other WYSIWYG because
    we are focusing on coding and sometimes these
    applications add in things
  • Also, they cost money.
  • Note You should make contributions to shareware
    and I hope CTS does!

26
HyperText Markup Language
  • Text plus mark up, the mark up is in tags
    specific terms in pointy brackets.
  • Some tags come in pairs for example, lthtmlgt and
    lt/htmlgt. The closing tag has /
  • The stuff in between is the contents of the tag
    element.
  • Tags may have other information. These are called
    attributes.
  • HTML file has head and body. The head may contain
    a script element containing code. (Code also can
    be within tags.)

27
Preparation for first script
  • One type of tag is the img tag
  • ltimg src"bird.gif"gt
  • Go on-line with browser and download an image
  • Find image (my site, javascript examples, slide
    show, elsewhere)
  • RIGHT click mouse
  • Save Picture As
  • Save in folder with your name or create a folder.
  • DON'T COUNT ON IT BEING SAVED BETWEEN CLASSES.
  • Use simple names all lower case, no blanks or
    punctuation.
  • Browser will go to same folder as the HTML file
    if no other information given.

28
Prepare / Edit
  • Open up text editor program
  • Copy (with some changes) example
  • . (NEXT SLIDE)
  • Save As
  • file type (extension) .html
  • file name something can remember. Simple name,
    how about test1
  • Save it in the same folder that you saved the
    image file.

29
First script
lthtmlgt ltheadgtlttitlegtFirst html script
lt/titlegt ltscriptgtdocument.write(Date()) lt/scriptgt
lt/headgt ltbodygt Hello ltimg src"bird.gif"/gt lt/bod
ygt lt/htmlgt
30
My result (years ago)
title
No line break.
31
Recap
  • Created an HTML file.
  • head element held title element and script
    element.
  • Title was First html script displayed in upper
    left corner
  • Script element contained an invocation/call to
    the write method of the document object. A method
    is a function associated with an object. The
    argument of the write method was the results of a
    call to the Date() function. The Date function
    was called with no parameters but the () is
    required.
  • body element held plain text and an img tag
  • img tag had as its source (the value of the src
    attribute) the file "bird.gif".

32
Make example your own
  • Do one or more of the following
  • Move the 'hello' from the body of the HTML
    document to something to be done by the script
  • Hint document.write("Hello ")
  • Have the script write out something else.
  • Add to the body of the HTML
  • more text
  • another copy of the image
  • another image

33
More on functions
  • Functions are built-into the language OR are
    defined by you, the programmer.
  • Functions sometimes require arguments aka
    parameters. This is extra information for the
    operation of the function. The argument or
    arguments go in parentheses.
  • A function requires parentheses even if there are
    no arguments
  • Date()
  • A special kind of function is a method. This is a
    function associated with an object. In this case,
    the name of the method is write and the name of
    the object is document. The method takes an
    argument (this thing inside the parentheses) and
    this is whatever Date() produces.
  • document.write( Date() )

The . is used for methods or properties of
objects.
34
Function as shorthand
  • Put it in my mail box
  • instead of
  • go to the Natural Sciences building, 2nd floor,
    Natural Sciences office, room 2065, go into the
    room on the right where the mail boxes are, find
    my name, put it in the box.
  • The 'it' is analogous to the argument.
  • Note some purists refer to these as arguments on
    the caller side and parameters on the called side.

35
Formatting
  • HTML generally ignores white space, including
    line breaks. To force a line break, use
  • ltpgt or ltbrgt You will also see ltpgt lt/pgt and ltp
    /gt. You will see ltbr /gt.
  • There is also lthrgt horizontal rule
  • There are tags for size of fonts (h1 through h6,
    others), ltbgt for bold, ltigt for italics, and much
    more BUT good practice is to put formatting into
    the style section (Cascading Style Sheets).
  • more on this later.
  • HTML generally is forgiving. For example, does
    not require /gt in singleton tags such as img.

36
ltagt
  • The a tag can be used to specify a hyperlink
  • lta href"http//faculty.purchase.edu/jeanine.meyer
    "gtDr. Meyer's page lt/agt
  • http indicates absolute addressing
  • lta href"another.html"gtNext pagelt/agt
  • no http so this is treated as relative
    addressing
  • Assumption here is that another.html is a file in
    the same folder as this html file.

37
Modified example
  • lthtmlgt
  • ltheadgtlttitlegtNext html script lt/titlegt
  • ltscriptgtdocument.write(Date())lt/scriptgt
  • lt/headgt
  • ltbodygt
  • Hello ltimg src"bird.gif width100gt ltbrgt
  • lta href"http//faculty.purchase.edu/jeanine.meye
    r"gt
  • Find materialslt/agt
  • lt/bodygt
  • lt/htmlgt

Ignore slant of quotation marks
38
Mouse was over the link
39
Additions
  • Use one of the new (semantic) elements in HTML5
    ltarticlegt. It does not come with any built-in /
    default formatting, so
  • ltstylegt sectionarticle display block
    font-size20px
  • Make a clickable image (aka icon) by putting an
    img element inside an a element.
  • Use basic formatting (italics) in argument for
    document.write.

40
secondtest.html
  • ltDOCTYPE htmlgt
  • lthtmlgt ltheadgtlttitlegtSecond testlt/titlegt
  • ltstylegt
  • article
  • font-size20px
  • displayblock
  • img displayblock
  • lt/stylegt ltscriptgt
  • document.write("ltigt"Date()"lt/igt")
  • lt/scriptgt lt/headgt ltbodygt
  • ltarticlegtThis is the Meyer family origami page.
  • lta href"http//faculty.purchase.edu/jeanine.meyer
    /origami"gtltimg src"bird.gif"/gtlt/agt
  • lt/articlegt lt/bodygt lt/htmlgt

41
(No Transcript)
42
Lessons
  • Notice patterns
  • Things inside of things.
  • Practice pop research quiz
  • look up CSS font-family and see how to specify
    fonts. All fonts are not on all computers, so you
    specify your first choice, second choice, then
    type (serif, monospace)

43
Class work / Homework
  • Produce an HTML file that presents 3 (favorite)
    websites
  • writes out the date at the top
  • Title is your name plus 'Favorite Sites'
  • Describes 'favorite sites', with text and an
    image from the site, linking to the site.
  • Enclose each description in an article element.

44
Assignments
  • Read and re-read handout. Review PowerPoint
    charts for first lecture.
  • Get into habit review lecture charts after each
    lecture. Study examples and read tutorials. Check
    schedule. Write down ideas.
  • Go to http//moodle.purchase.edu and make a post
    to the Introductions, extra credit, etc. forum.
    As appropriate, I will post information there
    and/or faculty.purchase.edu/jeanine.meyer

45
Web publishing space
  • CTS provides web space for all students.
  • Do sign up for it!
  • You will be required to upload projectspublish
    themon the web.
Write a Comment
User Comments (0)
About PowerShow.com