Freestyle JavaScript Game

Story

By now you know the basics of Javascript. Put your knowledge to the test, and create something awesome, creative, and motivating. Your task is to create a game in the browser. What kind of game?

Wait for it...

Any kind :) Your creativity (and your JavaScript knowledge) is the only limit.

What are you going to learn?

• Finding DOM elements in the document tree.
• Manipulate the DOM using JavaScript.
• Handle user interactions with JavaScript event handlers.
• Use HTML data attributes.
• Use CSS styling.

Tasks

1. Figure out as a team what game you want to work on and what features you want to finish.

- A game is chosen that the whole team agrees to implement.

- The game idea is checked by a mentor to make sure it can be realistically implemented in a sprint

- The game may be based on one of the following ideas: memory card game, Snake, Towers of Hanoi, simple platformer, Flappy Bird, Space Invaders, classic board games, turn based games, etc.

- There is a backlog of possible features.

- A plan is created, based on story estimations of what can be finished by the end of the sprint.

2. Create a playable game based on JavaScript DOM manipulation and event handling.

   • The game is based on handling some kind of event(s) (mouse, keyboard...).
   • The game mainly relies on DOM manipulation to move elements around on the screen or change their appearance (beside CSS of course).
   • The code is separated into several JavaScript functions.

3. [OPTIONAL] The game or parts of it can be time-driven. This adds some complexity, as you have to change things around in given time intervals.

   • Some part of the game changes over time without any interaction (such as a moving enemy or avatar).

4. [OPTIONAL] Implement a way to check the highest scores.

   • The highscore data is stored between games in a database. Scores can be linked to registered users. If the user is not registered, the score can be linked to a name.

General requirements

None

Hints

• Have fun, create a game that is motivating for you! :)
• Figure out what game and the features to implement, based on the following hints.
  • Have a brainstorming session, throw in game and feature ideas without criticizing each other (any idea is a good idea), and write them down somewhere.
  • Discuss the collected ideas and decide on a game.
  • Talk to a mentor about the idea and whether it can be realistically implemented in a sprint.
  • Collect any feature ideas you have and specify them so that every team member knows what the expectations are. (These are the user stories in your backlog.)
  • Estimate each user story and figure out how many you can finish in this sprint.
• You can open the index.html by starting a small HTTP server. For more information, see the Background materials section.
• Decide whether to create backend functionality. You can use any previously learned technology, such as Flask.
• Use git branches as you develop new features.
• If you search the internet for javascript games, you'll see lots of solutions using canvas. It is a nice technology, but we have not met canvas and the main focus of this project is to practice DOM and event handling, so please say no to canvas for this project. Later on feel free to learn about canvas with a pet project game for example.

Background materials

• Javascript – Events
• Javascript – DOM manipulation
• Javascript – Extending the DOM
• How to start a local HTTP server
• Javascript – Debugging
• Javascript – Other features
• Javascript.info tutorial
• MDN HTML Drag&Drop API
• MDN Drag operations documentation
• CSS Flexbox guide
• CSS Grid guide