https://github.com/timkscripts/AngularSnake
Play the game here:
https://scriptinghobby.com/example/views/
Accomplishments
5 days spent to learn Angular, Node.js, Karma to create the Snake Game from scratch.
Build instructions (Windows)
1.) Install node.js
https://nodejs.org/en/
2.) Install github
https://desktop.github.com/
3.) set winodws local variables
http://stackoverflow.com/questions/20666989/bower-enogit-git-is-not-installed-or-not-in-the-path
4.) Place example.zip from github in the same folder as npm.cmd (Your node.js installation directory)
5.) extract and navigate to /example/ and run ‘npm start’ in the command line. (my directory looks like this C:\Program Files\nodejs\example)
6.) navigate to http://localhost:3000
I have successfully replicated the project on another PC.
If there are still issues, here are a couple of commands I can rememember
npm install angular-animate npm install body-parser --save
bower install angular-animate
npm install jasmine-core --save-dev
npm install karma --save-devThere might be a few more commands needed here that I can’t recall. But if needed, install the things under ‘project requirements’
Project Requirements
bower
angular-mocks.js 1.6.3
angular-animate.js
body-parser version 1.17.1
ejs 2.4.1
express 4.13.4
jasmine-core.5.2
karma 1.5.0
karma-chrome-launcher 2.0.0
karma-jasmine1.1.0
Site example
The code is compromised of 3 main controllers. Display, Input and Game Logic. The idea is you can re-use Display and Input for other games and just have to change the game logic code.
The 3 controllers work together in a way using a Factory.
The input controller worries about what the user presses and passes back an input value to the Factory.
The Game Logic reads in the user input value from the factory to determine what needs to change in the games logic.
The Game Logic then takes the screen data input, and manipulates it as necessary (your character changes positions).
The Display controller just renders the graphics onto the screen. What you see is a HTML table of 40×20 grid where in memory you have corresponding 2D Array of values. These values are used with ng-style to change the background of teach <td> in the table to give you this old DOS like look.
These are what I consider the main files when looking at the code:
example\views\index.html
This file is everything you see. There is only 1 HTML file.
example\public\app\app.js
This is the only JS file used. It contains the module, the factory, and all of the controllers used.
example\public\app\restfuls.json
This is the json file used for the highscores.
\example\tests\app.controller.test.js
This file is where the test for Karma is.
The game keeps track of your current high score. If you die then it displays game over and brings back the load snake button.
During game play you can press the pause/resume buttons for the game.
Once you have died, you will have the option to click highscore. You will enter a desired name and it will add your score to the json.
High score board is a json file displayed in a table. I didn’t get around to sorting the results by score.
You can see all of the pieces that make up the reading/writing/calling of the json file.
When you click ‘load snake’ it starts the game. It also gives your focus to the blue DIV on the page below. You can see some details about your keypresses here. If you ever lose focus here though the game will no longer read your input until you give it focus again.
Testing
I installed Jasmine and Karma and did a simple test. The hardest part was probably getting Karma to compile.
This is what the site looks like as a whole
