Skip to content

Game Ring

Summary

For this project, each student will create and host their own personal website. This personal website will be connected to all the other student websites in the class through a web ring. This personal website will exist as a personal narrative on the web.The goal of this project is two-fold: to think about the internet as a site for personal authorship and self-expression and to consider how we can use games or other interactive media to tell a personal story.

Description:

To create our personal websites, we will be using p5.js, VSCode, and hosting our JavaScript, HTML and CSS files on Github Pages. Throughout the last third of the course, students will work progressively on this final project, completing pieces of the projects as described below. Students will learn HTML, CSS, VSCode, Github in class and will build off their existing knowledge with p5.js to construct their websites.

Website:

Your website should be a form of personal expression about your own lived experience. This can manifest in a variety of ways: perhaps your website is a collection of your favorite youtube videos with a brief paragraph about each video - at the center is a game about you navigating your relationship with these youtubers. Or perhaps, your website is about one experience you remember - on the website you collect a variety of artifacts from images, text, sound etc - the game on your website is a pixel art recreation of that event. Or perhaps your website is a shire to people, animals, or places you never want to forget. There are a wide variety of approaches to this assignment. Your website should include at least four additional media elements beyond your game such as text, images, sounds, videos, etc.

Web Design:

Considering our reading on the handmade web, you are encouraged to explore web design of the 90’s and 2000’s. You are encouraged to explore the space of “bad design” before interaction on the web was codified and standardized. Consider creating a site that doesn’t hold to any contemporary web design conventions: Make it Loud! Make the colors clash! Create your own “User Experience”!

Some resources to explore include this collection of 90’s and 2000’s websites as well as this link which explores the early web design of “Prof. Dr.” websites.

Game:

The main focus of your website should be a game that you make using p5.js. Your game should be relevant to the overall creative theme of your website. This game should make use of objects, classes and interaction. This game does not need to follow any standard conventions of game design. Instead, this game can be an experimental exploration of using interaction to describe the personal experience you want to tell. In this game you might navigate as a character who talks to other non-player characters, or, on the opposite end, you might design a game in which a visitor to your website needs to make a variety of expressions as a story is told over subtitles. For this project we can think of the definition of a game as described by game designer Anna Anthropy: “A game is an experience created by rules.” What these rules are is up to you.

Some examples of more conventional games that explore personal narratives:

Project Pieces

Project pieces due dates can be found in the class schedule. Each project piece is worth a certain number of points. These points are determined by the level of completion of each project piece as well as the timeliness of the submission of each piece.

Project Proposal (3 points):

Submit a project proposal that contains at least a 500 word description of your Game Ring project including web design/design inspiration, the personal experience you hope to convey, a description of your website, and a description of your game.

Include at least 3 sketches of your website and game.

Submit your pdf file of your proposal to the class discord.

Gray Box Game Prototype (3 points):

Submit a gray box version of your game that demonstrates the major mechanic choices of your game. A gray box game is one in which you focus primarily on coding and functionality. The term gray box comes from the use of default gray boxes when blocking out a level for a video game. Your gray box does not need to include any art assets and only needs to demonstrate the functionality of your game using default shapes and text. For more information on gray boxing, check out this chapter from the level design book by Robert Yang: https://book.leveldesignbook.com/process/blockout

Submit and Edit Link of your p5.js sketch to the class Discord.

HTML Mock Up (2 points):

Submit a mockup of your site only using HTML. This mockup should include all the elements you plan to include in your site. You can think of it as a long list of the elements that you want to include in your final site. This site will look strange as it will have no formatting, however, this will be our first step to creating our finalized website.

Submit of screen shot of your HTML mockup to the class Discord.

Submit an in-progress link to your website hosted on github pages. This website should have the basics of CSS styling as well as contain all the information you want to have on your site.

Submit a link to your website in the class Discord

Final Game Ring Site (80 points):

Your final game ring site should have a complete game in p5.js, complete HTML and CSS styling. Your final game should link to two of your peers' websites included in the webring.

Save a copy of your webpage using the Internet Archive by entering your website into the “Save Page Now” button.

Submit a link to a zipped folder contain all of your website files.

Submit the link to your finalized site in the class Discord.