Making Four-In-A-Row - Part 5: Reorganisation
In the previous blog post, you checked for wins and draws in
Now you'll be reorganising the work you've done so far in preparation the the HTML5 Canvas front-end that you'll be creating for the game.
Creating Game Logic Directory#
First, create a new directory in the
src directory called
Now move the
src/constants directory and
Lastly, create a file under
index.js with the following contents:
; ; ;
From now on the core game logic will be stored in and referenced from
src/gameLogic. The outside of
src/gameLogic will be for the front-end.
Importing from the game logic Module#
You're now exporting your core game logic as a module from
src/gameLogic/index.js. You'll now need to fix outdated imports of the
To do this, fix the import statement in
src/index.js so that you import the
FourInARowGame class from the game logic module:
; window.fourInARowGame = new FourInARowGame;
If you test the code in your web browser's console, you should still be able to interact with
window.fourInARowGame just like before.
If not, please make sure that you've followed the instructions in this post correctly!
Great! Now, you're ready to start working on the front-end in the next post.