Basic JS Game - Part 1
- Create a new folder for the game and open it in Visual Studio Code
- Make four files, initially empty
- index.html
- utilities.js
- game.js
- buttons.js
- copy all of this code into the utilities.js file
- In the index.html page, put in the code necessary to make it look like this:
- At the bottom of the HTML, just before the</BODY>, paste in this code to bring in the Javascript files
- In the buttons.js file, make two functions,
startGame()
andendGame()
- Connect the onClick events of the buttons to these functions
<script src="utilities.js" type="text/Javascript"></script> <script src="buttons.js" type="text/Javascript"></script> <<script src="game.js" type="text/Javascript"></script>
The reason this is going at the end is that the Javascript files will run some code as soon as they load, and that code tries to access the CANVAS. By putting the Javascript at the end of the file, we make sure that the CANVAS actually exists before we try to use it.
Initially these functions just need to enable and disable the start and end buttons appropriately.
At this stage the project looks like this.