https://github.com/ignatiusmb/snake-game

Simple snake game with pure JavaScript.
https://github.com/ignatiusmb/snake-game

javascript javascript-game snake-game

Last synced: 25 days ago
JSON representation

Simple snake game with pure JavaScript.

• Host: GitHub
• URL: https://github.com/ignatiusmb/snake-game
• Owner: ignatiusmb
• License: mit
• Created: 2018-12-05T03:35:39.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2019-02-24T17:04:04.000Z (almost 6 years ago)
• Last Synced: 2024-10-28T19:22:47.340Z (2 months ago)
• Topics: javascript, javascript-game, snake-game
• Language: JavaScript
• Homepage: https://ignatiusmb.github.io/snake-game/
• Size: 253 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# JS Snake Game

> A nostalgic remake of the classic snake game created with HTML5 canvas and JavaScript

## Getting Started

### Demo

[JS Snake Game](https://ignatiusmb.github.io/js-snake/)

### Docs

Our snake is a chain of elements (squares) and the movement is controlled by arrow keys which directs the head of the snake.

1. Create the canvas element in our html.

2. Draw the body of the snake and the food using canvases.

3. Create the structure of the snake and of the food.

4. Create a _checkCollision_ function to detect if the snake has touched itself.

5. Create the main function which has to run everything we need to play.

6. Use the _keyCode_ event to move the snake using the keyboard.

## Reproduce

### The Snake

1. Create the form of the snake.

2. Create the structure of the snake using the created form.

3. Bind the controls for the movement.

**Snake Form**

```js

var bodySnake = function(x, y) {

  // Single Square for the Snake

  playground.fillStyle = "darkgreen";

  playground.fillRect(x * snakeSize, y * snakeSize, snakeSize, snakeSize);

  // Border of the Square

  playground.strokeStyle = "black";

  playground.strokeRect(x * snakeSize, y * snakeSize, snakeSize, snakeSize);

};

```

**Snake Structure**

```js

var drawSnake = function() {

  // The Snake will initially have a body consisting of 5 squares

  var length = 4;

  snake = [];

  // With for loop, we push the 5 elements(squares) inside the array(snake).

  // Every element will have x = 0 and the y will take the value of the index.

  for (var i = length; i >= 0; i--) {

    snake.push({ x: i, y: 0 });

  }

};

```

**Snake Movement**

```js

var snakeX = snake[0].x;

var snakeY = snake[0].y;

if (direction == "right") {

  snakeX++;

} else if (direction == "left") {

  snakeX--;

} else if (direction == "up") {

  snakeY--;

} else if (direction == "down") {

  snakeY++;

}

```

**Inspired from [Competa](http://www.competa.com/blog/how-to-build-a-snake-game-using-javascript-and-html5-canvas/)**

### License

JS Snake Game is [MIT licensed](LICENSE)

---



  ignatiusmb.io

  ·

  imbagus.com

  ·

  GitHub

  ·

  GitLab