Dept. of Computer Science & Engineering

Project 5: JavaScript Game of Set

Implement the game of Set, as described in Project 2, but this time using JavaScript.

Your game should be a single web page, i.e. written using HTML (for structure/content), CSS (for styling), and JavaScript (for the game engine).

Testing Locally

To view and test your game locally, you should use a local web server. To start such a server, you can run, in the root of your project:

$ npx serve

Alternatively, you can install the Live Server extension in VS Code. With this extension, you will see a "Go Live" icon at the bottom of your VS Code window. Clicking that button launches/closes a local web server, including live reloading when you make changes.

Multiple JavaScript Files

The easiest way to split your JavaScript code into multiple files is to simply use multiple <script> tags to include each of the files. A function defined in the first script can be called by code in the second script. But that means you can not have circular dependencies between the files.

A slightly more complex (but more robust) way to do this decomposition is to use modules. At the highest level, you do 3 things:

  1. Include the code in your html page using <script type="module" src=...></script> to include the JavaScript file(s)
  2. Use an export statement in each module to declare which functions/variables are visible outside of the module
  3. Use an import statement in other modules to bring in the functions/variables you want to use from other modules.

For more details (including examples), see the excellent article on MDN.