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:
- Include the code in your html page
using
<script type="module" src=...></script>
to include the JavaScript file(s) - Use an
export
statement in each module to declare which functions/variables are visible outside of the module - 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.