本次作业是利用js和html5等，设计一个前端游戏，完成16个页面的游戏设计
DATT 1939Making Interactive New Media Assignment 2
A2 Scripting Play
A2 Proposal Due: Week 9 (Nov. 8 or 9) worth 3% A2 Final Writeup Due: Dec. 5 worth 7%
Choose one option from each of Columns A, B, C, and D below as part of your process of starting and working on Assignment 2:
Column A The What:
1) Make a very playful webbased art piece
OR
2) Make a website that is a kind of game (a game which is also an artwork) OR
3) Make something inbetween the two
Rules for 2) and 3) meaning, art games and gamelike things
Conventional understandings and/or expectations of games must be noticeably/substantially undermined, evaded, or ignored in several ways.
This does not mean that _all_ understandings and/or expectations must be undermined. But it means that your A2 must have some substantial differences from nonart games you encounter .
Consider how (and why) you could question or work against usual concepts of, and rules around:
beginnings
endings
winning
losing
points/scoring
accumulating stuff
how turns work
explicit or implicit time limits (to do x in a game, to take a turn, to win, etc.) “progress” in a game
moving through the game space(s) which may literal and/or metaphorical
Your A2 might misdirect the user, contradict explicit or implicit rules about games, or a certain “type” of game. Your A2 might distort the entire concept of a game (your game itself breaks or subverts major elements of conventional game form like beginnings, endings, scoring, players vs. nonplayers, the separation of the game from other activities, etc…)
Remember, Sicart says that “Rules are another prop that can be targeted by the transformative capacities of play!”
Column B Subject/Theme Starting Point:
For A2, consider the following three definitions of play, and take initial inspiration from a subdefinition of one definition (or more than one):
1) http://dictionary.reference.com/browse/play
2) http://www.merriamwebster.com/dictionary/play
3) http://www.oxforddictionaries.com/definition/english/play
Develop your own more specific theme/approach from this inspiration, mixed with your own ideas and concerns.
For example, maybe your group is interested in developing gamey ideas around Column B’s Option 2, 3c (merriamwebster’s 3rd definition, subdefinition c, “the act or an instance of playing on words or speech sounds.”)
List of JS Categories for A2:
1) Randomness with randInt integrated into nonlink JS that’s usually not random
2) If Statement(s) enabling different responses to typed user input from prompts (or forms) (w7)
3) Random text or images (w7)
4) Loops going beyond the simplest while loop example (w8)
5) Keypresses (as in w8)
6) Div Interactions (as in w8)
7) JS Cookies (as in w9)
8) Random Rollovers (as in w10)
9) unconventional Mouseevent interactions and/or 3+ Mouseevents in a rollover (as in w10)
10) using JS Date/Time methods beyond a simple display of date/time (w11)
11) using JS setTimeout (or its more complex sibling) to trigger events (w11)
Special case 1: the Random Link JS will not count (by itself in its current form) towards one of the categories. But it can count as a page that uses JavaScript.
Special case 2: the w8 example “Keypresses move a div” can count as _either_ the Keypresses category (5) or the Div Interaction category (6).
http://www.yorku.ca/nmw/datt1939f17/assignment2.html
1/6
11/23/2017 FA/DATT 1939 Fall 2017 – Assignment 2
Column C Informing Theory/Logics:
For A2, consider the multiple works we’ve discussed (in lecture and/or lab) regarding play and games:
1. Sicart excerpts from Miguel Sicart’s book, Play Matters (w5)
2. Bogost Ian Bogost’s chapter, “The Rhetoric of Video Games” (w67)
3. Anthropy excerpts from Anna Anthropy’s book, Rise of the Videogame Zinesters (w78)
Choose one or two concepts or approaches from any of the 3 theorists above to inform both your Subject/Theme and your overall approach to A2. You can mix ideas from more than one theorist, if you wish.
Column D PageOriented OR JavaScriptOriented option (minimum reqs.):
For A2, you choose either the PageOriented Option or the JavaScriptOriented Option. The minimum requirements below scale by group size either way.
The following requirements are minimums and so may not be large enough to adequately realize your ideas for your A2. This means you may need to aim higher than the minimums in one or more of the three requirement types (html pages, pages with JavaScript, variety/depth of JS) to create a more successful project:
List of JS Categories for A2:
1) Randomness with randInt integrated into nonlink JS that’s usually not random
2) If Statement(s) enabling different responses to typed user input from prompts (or forms) (w7)
3) Random text or images (w7)
4) Loops going beyond the simplest while loop example (w8)
5) Keypresses (as in w8)
6) Div Interactions (as in w8)
7) JS Cookies (as in w9)
8) Random Rollovers (as in w10)
9) unconventional Mouseevent interactions and/or 3+ Mouseevents in a rollover (as in w10)
10) using JS Date/Time methods beyond a simple display of date/time (w11)
11) using JS setTimeout (or its more complex sibling) to trigger events (w11)
Special case 1: the Random Link JS will not count (by itself in its current form) towards one of the categories. But it can count as a page that uses JavaScript.
Special case 2: the w8 example “Keypresses move a div” can count as _either_ the Keypresses category (5) or the Div Interaction category (6).
PageOriented Option MINIMUM
JavaScriptOriented Option MINIMUM
Indiv:
at least 5 html files PLUS index & statement pages = 7 pages total
at least 2 pages that use JS in some way thoughtfully integrates JavaScript from at least 1 category out of the List of JavaScript Categories for A2
at least 4 html files PLUS index & statement pages = 6 pages total
at least 2 pages that use JS in some way thoughtfully integrates JavaScript from at least 2 categories out of the List of JavaScript Categories for A2
Group of 2:
at least 8 html files PLUS index & statement pages = 10 pages total at least 4 pages that use JS in some way
thoughtfully integrates JavaScript from at least 2 categories out of the List of JavaScript Categories for A2
at least 5 html files PLUS index & statement pages = 7 pages total
at least 5 pages that use JS in some way thoughtfully integrates JavaScript from at least 3 categories out of the List of JavaScript Categories for A2
Group of 3:
at least 13 html files PLUS index & statement pages = 15 pages total at least 6 pages that use JS in some way
thoughtfully integrates JavaScript from at least 2 categories out of the List of JavaScript Categories for A2
at least 8 html files PLUS index & statement pages = 10 pages total at least 8 pages that use JS in some way
thoughtfully integrates JavaScript from at least 3 categories out of the List of JavaScript Categories for A2
Group of 4:
at least 16 html files PLUS index & statement pages = 18 pages total at least 8 pages that use JS in some way
thoughtfully integrates JavaScript from at least 3 categories out of the List of JavaScript Categories for A2
at least 11 html files PLUS index & statement pages = 13 pages total
at least 10 pages that use JS in some way thoughtfully integrates JavaScript from at least 4 categories out of the List of JavaScript Categories for A2
Explanation of requirement types in the above chart:
To help quantify A2 size/length: The minimum required number of web pages / html files
To help quantify the amount of JavaScript used: The number of pages using JS in some way
To help measure JavaScript variety and more indepth integration: Thoughtfully integrating JavaScript from “at least X categories out of the List of JavaScript Categories for A2”
A2 Materials:
HTML5/CSS
concepts from Structure in an Interactive Space: Screen to Screen / Document to Document
JavaScript demonstrate/adapt multiple techniques from this course (as required in Column D, above)
No other forms of scripting: no jQuery or other JavaScript frameworks/scripting libraries. No Flash, no other languages, etc.
HTML5 embedded sound
Original media (text, sound, images, animated gifs)
Animated gifs are permitted; however, no video is permitted in A2.
Option: Creative Commons Licensed Media:
http://www.yorku.ca/nmw/datt1939f17/assignment2.html
2/6
11/23/2017 FA/DATT 1939 Fall 2017 – Assignment 2
You could have all original media in A2. However, IF you want to use some nonoriginal media, any and all media not created by you must be licensed under a Creative Commons License that allows derivative works.
This means that all text, images, animated gifs, sounds must either be originally created by one or more group members, or must have an appropriate Creative Commons License allowing derivative works.
IF you use any Creative Commons Licensed media, as above, this means that the final A2 _must_also_ have an appropriate Creative Commons License on the site as a whole (you would place the License on the index.html).
Spectrumofrights Comic1: https://wiki.creativecommons.org/Spectrumofrights_Comic1 Howitworks Comic 1: https://wiki.creativecommons.org/Howitworks_Comic1
About The Licenses: http://creativecommons.org/licenses/
What our licenses do License design and rationale Three “Layers” Of Licenses
Choose the right license for your work: http://creativecommons.org/choose/ Creative Commons Search Engine: http://search.creativecommons.org/
NOTE: If you choose to use Creative Commons Licensed media, the licensed media you choose MAY, in turn, require you to “sharealike,” meaning that you must put on your A2 the same Creative Commons License that that piece of media was licensed under. If the licensed media you choose does not have a “sharealike” requirement, that means you do not have to use the exact same Creative Commons License as that piece of media.
(Neither the requirement for original material or the option to use Creative Commons Licensed media prevents you from drawing “in the style of” a particular artist or piece of intellectual property, if it is essential to your concept. However, be aware that works too similar to actually existing intellectual property can be sued by copyright holders.)
As you did for A1, aim your A2 at 1024×768 (4:3) or 1280×800 (widescreen) resolution. This means your A2 shouldn’t scroll sideways at the resolution you’ve selected UNLESS you are using sideways scrolling as a deliberate aesthetic device, in which case sideways scrolling would be absolutely fine. Relevant notes to help you with this are posted on the Resources page.
No image can be larger than 1.5 MB in size for the A2. A few KB to a few hundred KB is a reasonable size for most images.
No sound can be larger than 1.5 MB in size for the A2.
Considerations:
You will need to plan quite thoroughly on paper how your playful piece/game would work, and then try to project how you could create (script, etc.) what you imagine. You may well find that you have to reduce the scope or complexity of the a2 somewhat, so that you can create it yourself.
If you wish, you may use online scripting tutorials and examples as a reference for learning. You are required to give credit to any and all scripting you learn from that did not come from this course. Keep specific URLs or other bibliographic information about any outside sources so you can give credit on the statement.html page when submitting the A2.
Doing minor to medium scripting modifications to a game (or game instructions) found online or anywhere else will NOT be acceptable for this assignment!
The idea is that you script this playful piece/game yourself, going through the iterative process of defining, planning, first attempt at basic set up and scripting, further defining and planning, changes to your intentions, a new attempt at pages and scripting, adding to the basics, checking for scripting problems, finding a better way to set up and script the a2, expanding on this version of your scripting, checking for a few ways users could “break” your playful piece/game by making it malfunction in a way you don’t intend, etc.
Your a2 should be generally errorfree and appropriately functional.
A2 File Locations
Designate one or more people to submit the final A2, if you are in a group. But make sure you get a copy to keep for yourself too.
A2 Location:
Hand in all the final files for Assignment 2 (ie. images, sound, html files) in a folder named a2 inside a folder named datt1939 in the Sites folder in the dm server account of a designated person in your group. Notify your tutorial leader of who will be handing in the final A2.
The URL for the first page of your A2 will be:
http://dm.ampd.yorku.ca/web/studentid/datt1939/A2/index.html
If you haven’t yet created your datt1939 and/or a2 folder, do so as soon as possible.
When your A2 is in the correct place on the server, the Student Work page for your tutorial will link to it.
List of JS Categories for A2:
1) Randomness with randInt integrated into nonlink JS that’s usually not random
2) If Statement(s) enabling different responses to typed user input from prompts (or forms) (w7)
3) Random text or images (w7)
4) Loops going beyond the simplest while loop example (w8)
5) Keypresses (as in w8)
6) Div Interactions (as in w8)
7) JS Cookies (as in w9)
8) Random Rollovers (as in w10)
9) unconventional Mouseevent interactions and/or 3+ Mouseevents in a rollover (as in w10)
10) using JS Date/Time methods beyond a simple display of date/time (w11)
11) using JS setTimeout (or its more complex sibling) to trigger events (w11)
Special case 1: the Random Link JS will not count (by itself in its current form) towards one of the categories. But it can count as a page that uses JavaScript.
Special case 2: the w8 example “Keypresses move a div” can count as _either_ the Keypresses category (5) or the Div Interaction category (6).
http://www.yorku.ca/nmw/datt1939f17/assignment2.html
3/6
11/23/2017 FA/DATT 1939 Fall 2017 – Assignment 2
index.html
The first page in your A2 must have the filename index.html
This is the first page your audience will see, and it must be directly in the a2 folder
index.html will link to some (or all) of the other pages in your site as seems functionally and aesthetically appropriate.
index.html will also link to statement.html
If you use Creative Commons Licensed media, then index.html must have an appropriate Creative Commons License on it
Like your other creative pages, index.html should use content (text and/or images) and CSS and/or JavaScript effects to support the intentions of your piece.
statement.html
Your A2 must also have a page named statement.html directly in the a2 folder make statement.html easy to read.
index.html page must link to statement.html
Few or no other pages in your site should link to statement.html
statement.html must include the following: (Please number things accordingly on your statement page!)
1. a Title for your A2 (even if you are going to call it untitled).
2. a clear list of all the choices you made for Columns 1 4, above.
3. Articulate your concepts and intentions in a brief explanation of, guiding questions for, and/or artist’s statement about your completed work.
Minimum Articulation word count: 300 words / Suggested Maximum: 700 words
4. List ALL the filenames of web pages that contribute to fulfilling the JavaScript requirements:
a. List file names of the pages that add to the total count of pages using JavaScript (of any and all kinds).
b. Separately, list the file names of page(s) demonstrating the different A2 JavaScript Categories used in your A2. (Yes, that means the names in this list will also be in the previous list, above).
5. Include a sitemap showing all the HTML files/windows in your A2 and how they lead to each other. Differentiate between normal links between pages and links controlled by JavaScript (ie. label or colour code the links controlled by JavaScript).
(A sitemap is an image similar in some ways to the diagrams towards the bottom of the Structure in an Interactive Space: Screen to Screen / Document to Document page, except the sitemap should label each page with its filename, and use differentcoloured arrows to show normal links versus JS links.)
6. Give credit for any outside sources you used (if any) to learn JavaScript, or for outside JS examples that you adapted whether from books, websites (link to specific pages/examples), etc.
7. Give credit/list sources for any Creative Commons Licensed media you use on or in creating the A2 (if you use any).
Bibliographiclevel citations are not required, but you must give appropriate credit for any and all nonoriginal text, images, sound, or JavaScript (except for examples from the DATT 1939 Resource page) used in the A2.
Include notable pieces of information, for example, for media found on the web include the URL, name of the site it was found on, creator if known, and any other important information. Use your judgement, and give credit where it is due.
back to top
A2 Proposal DUE DATE: in Week 9 BEFORE the start of your lab,
SUBMISSION LOCATION: the A2 Proposal assignment link on the w9 Moodle page.
(3% of final) Receives a mark of 0 if late.
If you are working as a group, the entire group must work on and hand in one proposal. Each group member will get the same mark.
After discussion and careful consideration, decide on your choice for each of Columns A, B, C, and D.
Format: either .pdf, .doc, or .docx
Submit the A2 Proposal BEFORE the beginning of your tutorial in week 9, or receive a 0 on the proposal.
Your proposal, with your name(s) in it, should include the 4 sections below:
1. In the A2 Proposal, state your choices for each of Columns A, B, C, and D.
For Columns B and C, list the specific definitions/passages you are drawing on for inspiration, as well as their sources.
2. What is the topic and theme of your A2, and what kind of approach are you taking?
List of JS Categories for A2:
1) Randomness with randInt integrated into nonlink JS that’s usually not random
2) If Statement(s) enabling different responses to typed user input from prompts (or forms) (w7)
3) Random text or images (w7)
4) Loops going beyond the simplest while loop example (w8)
5) Keypresses (as in w8)
6) Div Interactions (as in w8)
7) JS Cookies (as in w9)
8) Random Rollovers (as in w10)
9) unconventional Mouseevent interactions and/or 3+ Mouseevents in a rollover (as in w10)
10) using JS Date/Time methods beyond a simple display of date/time (w11)
11) using JS setTimeout (or its more complex sibling) to trigger events (w11)
Special case 1: the Random Link JS will not count (by itself in its current form) towards one of the categories. But it can count as a page that uses JavaScript.
Special case 2: the w8 example “Keypresses move a div” can count as _either_ the Keypresses category (5) or the Div Interaction category (6).
http://www.yorku.ca/nmw/datt1939f17/assignment2.html
4/6
11/23/2017 FA/DATT 1939 Fall 2017 – Assignment 2
3. How are your choices for each of Columns A, B, C, and D supporting what you wrote for number 2, above?
4. Make a brief timeline for what you will do, and when, to create A2. Organize into weeks, possibly days. If you are in a group, note which kinds of A2 work each person is doing. I suggest steps like the following:
Look at the days and weeks between Week 9 and the A2 due date in Week 12. Divide your time by week, and even by day if needed.
List tasks. Think of dependencies what must be done before something else can be done… Pages need to be created, with text, images, HTML, CSS, sounds, and JavaScript. Make time to do small tests of JavaScript ideas as you go.
Leave time for project revisions, and fixes of code before the deadline. For your own sake, always have a plan B (or even C) in case certain ideas (or some JS coding) do not work out as planned…
Start testing JavaScript on or before week 10, if not earlier!
Length: The A2 proposal needs to be as long as necessary to answer the questions. Possibly this means 2 3 pages, or approximately 400 700 words.
Style: The A2 proposal should be formatted as a question and answer paper, so please use the question numbers in your proposal; do not treat it as an essaylike paper. The proposal should often use sentence form (namely, to answer questions 2 and 3), with some point form where needed.
Content: the 4 sections above. Ensure your answers for 24, are specific, concrete, and clear as possible at this time. Answering the questions will require you to make decisions and think ahead to sort out your intentions. However, if you find you need to change a decision you have made after you have already handed in the proposal, don’t worry, that is not a problem.
back to top
A2 Website DUE DATE: Week 12 (Friday, Dec. 1, for all labs)
All final versions of your A2 webpage files (HTML pages, images, sounds, etc.) must by uploaded onto the required spot on the server on or before Friday, Dec. 1, in week 12, before it turns midnight and becomes Dec. 2nd.
Midnight is the deadline once midnight has arrived, your A2 is considered late if it has not been uploaded to the server.
If your A2 is going to be late, please email your Lab leader that your A2 will not be finished on time. This email is to prevent them from mistakenly marking an incomplete assignment, while thinking it is actually the finished assignment. Email them on or by the due date!
Then, once your A2 is finished, upload it to the server and test that it is actually there (using the appropriate Student Work page link). Then email your Lab leader again to let them know they can go ahead and mark your A2!
Late A2s receive a 2% deduction per day of lateness. This includes weekends and holidays.
(A new day is marked by the arrival of midnight, as usual. If you upload your final A2 at 2:00am the day after Dec. 1, it is 1 day late. If you uploaded your final A2 at 8:00am the day after Dec. 1, it would also be 1 day late. If you uploaded your final A2 at 1:00pm or 11:00pm the day after Dec. 1, it would also be 1 day late. However, if your A2 was uploaded at 1:00am on Dec. 3, it would be 2 days late. )
Tuesday, December 5th is the last day you can hand in your A2 website!
back to top
A2 Final Writeup DUE Tuesday Dec. 5, submitted through Moodle. (7% of final) Receives 0 if late!
This is an Individual handIn, worth 7 out of Assignment 2’s total of 40 marks.
You can submit this writeup as early as Dec. 1, the day your A2 is due. The last day to hand it in is Dec 5th. After that, it would receive a 0.
If you are working as an individual for A2, nothing much is different for this 7% requirement, BUT if you are in a group, this 7% is an individual mark.
Writeup Formats, Naming, and Submission:
The A2 Final Requirement writeup can be submitted in .doc, .docx, or .pdf format. Name this file after yourself like so:
LastnameFirstName_a2.docx or LastnameFirstName_a2.pdf , etc…
I’m Nadine Wettlaufer, so I’d name my file WettlauferNadine_a2.doc
Submit your file to the course Moodle, on the Moodle page for Week 12, using the appropriate Lab link, i.e., “Lab 1 A2 Final Writeup”, etc.
If you follow the appropriate Lab link, you should have the option to submit a file once Dec. 2 has arrived.
List of JS Categories for A2:
1) Randomness with randInt integrated into nonlink JS that’s usually not random
2) If Statement(s) enabling different responses to typed user input from prompts (or forms) (w7)
3) Random text or images (w7)
4) Loops going beyond the simplest while loop example (w8)
5) Keypresses (as in w8)
6) Div Interactions (as in w8)
7) JS Cookies (as in w9)
8) Random Rollovers (as in w10)
9) unconventional Mouseevent interactions and/or 3+ Mouseevents in a rollover (as in w10)
10) using JS Date/Time methods beyond a simple display of date/time (w11)
11) using JS setTimeout (or its more complex sibling) to trigger events (w11)
Special case 1: the Random Link JS will not count (by itself in its current form) towards one of the categories. But it can count as a page that uses JavaScript.
Special case 2: the w8 example “Keypresses move a div” can count as _either_ the Keypresses category (5) or the Div Interaction category (6).
Assignment 2 Final Writeup Contents:
http://www.yorku.ca/nmw/datt1939f17/assignment2.html
5/6
11/23/2017 FA/DATT 1939 Fall 2017 – Assignment 2
400800 words
For this final writeup, include at least 2 references to concepts from the A2 readings (Sicart, Bogost, Anthropy). Remember to credit sources.
Discuss how the choices you made for Column #3 (Informing Theory/Logics) informed your project’s Subject/Theme, your ideas in developing the project, and/or the overall approach to A2. Alternatively, you could discuss the ways your final A2 particularly relates to (or fleshes out) certain concepts from A2 readings. Quote or paraphrase the theorist as part of your explanation.
If you are working as an individual, clarify or expand on the written explanation of concepts and intentions / artist’s statement you put on statement.html, potentially adding more theoretical content.
If you working in a group, here you will write from your own individual point of view. Please rewrite or expand on the written explanation of concepts and intentions / artist’s statement that your group put on statement.html, potentially adding more theoretical content.
Clarifications:
Must be written in sentence and paragraph form. Proofread and spell check your work. Evaluated based on quality of insights shared.
However, this also assumes other requirements are fulfilled i.e. word length, 2+ references to A2 readings, being on topic, proofreading, etc. If other requirements are not fulfilled, the mark will go down accordingly.
back to top
Updated Oct. 18, 2017.
FA/DATT 1939 3.0 Making Interactive New Media Art Fall 2017 is a course offered through the Digital Media program
in The School of the Arts, Media, Performance & Design at