js-snake

---

A very simple Snake game built with JS(ES6) on top of HTML5 <canvas>.

Currently there is a more elaborated game created on top of this one, you can check it out at: "Snake Crush"

OBS: This project is almost finished but for now it is still in development.

---

How to run & Development setup

1 - Clone this repository:

$ git clone https://github.com/fidelisrafael/js-snake.git 

2 - Enter in the directory and install the dependencies:

$ yarn install # or npm install

Currently all dependencies are related to the development/test enviroment, they're:

• jest for testing.
• browserify, budo, exorcist and tinify for bundling ES6 scripts to Browser

3 - Run the tests to make sure everything is working as expected:

$ yarn test # or yarn test

# > jest tests/
# Test Suites: 3 passed, 3 total
# Tests:       54 passed, 54 total

4 - Build the application

This application uses Browserify to bundle a valid JS code for Browsers from the ES6 code at ./lib folder:

To check if the build is properly working, just run

$ yarn build && yarn build_dev # or npm run build && npm run build_dev

# > File "public/bundle.js" generated.
# > File "public/bundle.dev.js" generated.

If you receive the output above that means that everything is working just as expected, that's great!

5 - Now, you can just run the development server:

OBS: This will open a new window on your default browser

$ yarn dev # or npm run dev

OBS: We use Budo as the development server with live-reload support.

6 - Enjoy it :) - And send PR's \o/

---

Codebase API:

To run the game through a JS script you can just do as a follow:

// new Game(canvasElement, rows = 12, lines = 12, tileSize = 48, debugMode = false)
const game = new Game('#board', 24, 24)
            
// Start the infinite game loop
game.init()

If you want to manage the main game loop by yourself, you'll need to call some functions by hand, example:

const game = new Game('#board')

setInterval(() => {
    console.log("Updating game...")

    // Dispatch the request to redraw things on canvas
    game.update()
}, 500) // updates each 500ms

There are many other API functions since this game was created with extensibility in mind, for example you can just redraw the current food at some random position on the map using: game.spawnRandomFood(), or finish the game at any point calling: game.gameOver().

This section will be better documented with more examples and more details, sooner...or later.

---

Debug Mode

You can run this application in debug mode to help you to understand what's going on the details. Just pass the #debug hash-fragment on URL when you open index.html on the browser, eg:

http://localhost:9966/#debug

As you can see, each fragment of the Snake will have their identification and the same happens with the food as well. The "tiles"(red and green) are the "parts" of the "map/board" where the Snake will be abble to moviment through, and where the food will appear when needed. Note that each tile is basically disposed in a X/Y coordinates in a Coordinate(Cartesian) Plane. For example, the tile number 3 is on X = 3 | Y = 0, the tile 12 is on X = 2 | Y = 5

---

📆 Roadmap

• ◽ Finish writing tests.
• ◽ Add a window(HUD) with the current user points(snake.length).
• ◽ Write better documentation for the codebase API.
• ◽ Make a online demo available on Github Pages.
• ◽ Try to render it in different sizes to detected rendering errors.
• ◽ Update this Roadmap with more plans.

---

👍 Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/fidelisrafael/js-snake. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

---

📝 License

The project is available as open source under the terms of the MIT License.