.replit

@@ -0,0 +1,2 @@
+language = "nodejs"
+run = "npm i && npm run play"

README.md

@@ -1,36 +1,53 @@
-# 🐍 Snek.js [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) [![snekjs on NPM](https://img.shields.io/npm/v/snekjs.svg?color=green&label=snekjs)](https://www.npmjs.com/package/snekjs)
+# 🐍 Snek.js 
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) [![snekjs on NPM](https://img.shields.io/npm/v/snekjs.svg?color=green&label=snekjs)](https://www.npmjs.com/package/snekjs)
+
+[![Run on Repl.it](https://repl.it/badge/github/taniarascia/snek)](https://repl.it/github/taniarascia/snek)
 
 A terminal-based Snake implementation written in JavaScript (Node.js).
 
-![snek.gif](snek.gif)
+### [Read the tutorial](https://www.taniarascia.com/snake-game-in-javascript/)
+
+![snek.gif](https://raw.githubusercontent.com/taniarascia/snek/master/snek.gif)
 
 ## Instructions
 
+Use the arrow keys (`↑`, `↓`, `←`, `→`) or `W` `A` `S` `D` to navigate the snake up, down, left, or right. Eat the red dot to gain points. If the snake collides with the wall or its own tail, it's game over. Press `ENTER` to restart, and `Q`, `ESCAPE` or `CTRL` + `C` to quit the game.
+
+## Installation
+
+### Run without installing
+
+The easiest way to play the game is to just run it in the terminal without installing anything!
+
+```bash
+npx taniarascia/snek
+```
+
 ### Clone from repository
 
 ```bash
 git clone https://github.com/taniarascia/snek
 cd snek
-yarn && yarn play
+
+# install and run via npm or yarn
+npm i && npm run play
 ```
 
 ### npm module
 
 Add the `snekjs` module.
 
 ```bash
-yarn add snekjs
+npm i snekjs
 ```
 
 Create the game.
 
 ```js
 // index.js
-
-const blessed = require('blessed')
 const { UserInterface, Game } = require('snekjs')
-const ui = new UserInterface(blessed, blessed.screen())
-const game = new Game(ui)
+const game = new Game(new UserInterface())
 
 // Begin game
 game.start()
@@ -44,9 +61,9 @@ node index.js
 
 ## Acknowledgements
 
-- [Vanya Sergeev](https://sergeev.io) for pointing out my snake collision bug, for advising me to make a single, reusable draw method, for showing me how to properly bind methods between classes, and for overall guidance and inspiration
-- [Devin McIntyre](https://www.dev-eloper.com/) for general advice
-- Panayiotis Nicolaou's [JavaScript Snake for Web](https://medium.freecodecamp.org/think-like-a-programmer-how-to-build-snake-using-only-javascript-html-and-css-7b1479c3339e) for initial logic
+- [Vanya Sergeev](https://sergeev.io) for pointing out my snake collision bug, for advising me to make a single, reusable draw method, for showing me how to properly bind methods between classes, and for overall guidance and inspiration.
+- [Devin McIntyre](https://www.dev-eloper.com/) for general advice.
+- Panayiotis Nicolaou's [JavaScript Snake for Web](https://medium.freecodecamp.org/think-like-a-programmer-how-to-build-snake-using-only-javascript-html-and-css-7b1479c3339e) for initial logic.
 
 ## Author
 

package.json

@@ -1,18 +1,23 @@
 {
   "name": "snekjs",
-  "version": "1.0.0",
+  "version": "1.0.4",
   "description": "A terminal-based Snake implementation written in JavaScript (Node.js) 🐍",
-  "author": {
-    "name": "Tania Rascia",
-    "email": "me@taniarascia.com",
-    "url": "https://www.taniarascia.com"
-  },
+  "author": "Tania Rascia",
   "main": "index.js",
+  "bin": {
+    "snek": "./play.js"
+  },
   "scripts": {
     "play": "node play.js"
   },
   "dependencies": {
     "blessed": "^0.1.81"
   },
+  "licence": "MIT",
+  "keywords": [
+    "snake",
+    "javascript",
+    "node"
+  ],
   "private": false
 }

play.js

@@ -1,8 +1,8 @@
-const blessed = require('blessed')
-const { UserInterface } = require('./src/UserInterface')
+#!/usr/bin/env node
+
 const { Game } = require('./src/Game')
-const ui = new UserInterface(blessed, blessed.screen())
-const game = new Game(ui)
+const { UserInterface } = require('./src/UserInterface')
+const game = new Game(new UserInterface())
 
 // Begin game
 game.start()

src/Game.js

@@ -1,4 +1,15 @@
-const { performance, PerformanceObserver } = require('perf_hooks')
+const {
+  GAME_SPEED,
+  DIRECTIONS,
+  INITIAL_SNAKE_SIZE,
+  SNAKE_COLOR,
+  DOT_COLOR,
+  DIRECTION_UP,
+  DIRECTION_RIGHT,
+  DIRECTION_DOWN,
+  DIRECTION_LEFT,
+} = require('./constants')
+
 /**
  * @class Game
  *
@@ -9,7 +20,7 @@ const { performance, PerformanceObserver } = require('perf_hooks')
  * 3. The score
  *
  * The i/o of the game is handled by a separate UserInterface class, which is
- * responsible for  * detecting all event handlers (key press), creating the
+ * responsible for detecting all event handlers (key press), creating the
  * screen, and drawing elements to the screen.
  */
 class Game {
@@ -29,23 +40,15 @@ class Game {
 
   reset() {
     // Set up initial state
-    this.snake = [
-      { x: 5, y: 0 },
-      { x: 4, y: 0 },
-      { x: 3, y: 0 },
-      { x: 2, y: 0 },
-      { x: 1, y: 0 },
-      { x: 0, y: 0 },
-    ]
+    this.snake = []
+
+    for (let i = INITIAL_SNAKE_SIZE; i >= 0; i--) {
+      this.snake[INITIAL_SNAKE_SIZE - i] = { x: i, y: 0 }
+    }
+
     this.dot = {}
     this.score = 0
-    this.currentDirection = 'right'
-    this.directions = {
-      up: { x: 0, y: -1 },
-      down: { x: 0, y: 1 },
-      right: { x: 1, y: 0 },
-      left: { x: -1, y: 0 },
-    }
+    this.currentDirection = DIRECTION_RIGHT
     this.changingDirection = false
     this.timer = null
 
@@ -60,17 +63,17 @@ class Game {
    * do not allow reversal.
    */
   changeDirection(_, key) {
-    if ((key.name === 'up' || key.name === 'w') && this.currentDirection !== 'down') {
-      this.currentDirection = 'up'
+    if ((key.name === DIRECTION_UP || key.name === 'w') && this.currentDirection !== DIRECTION_DOWN) {
+      this.currentDirection = DIRECTION_UP
     }
-    if ((key.name === 'down' || key.name === 's') && this.currentDirection !== 'up') {
-      this.currentDirection = 'down'
+    if ((key.name === DIRECTION_DOWN || key.name === 's') && this.currentDirection !== DIRECTION_UP) {
+      this.currentDirection = DIRECTION_DOWN
     }
-    if ((key.name === 'left' || key.name === 'a') && this.currentDirection !== 'right') {
-      this.currentDirection = 'left'
+    if ((key.name === DIRECTION_LEFT || key.name === 'a') && this.currentDirection !== DIRECTION_RIGHT) {
+      this.currentDirection = DIRECTION_LEFT
     }
-    if ((key.name === 'right' || key.name === 'd') && this.currentDirection !== 'left') {
-      this.currentDirection = 'right'
+    if ((key.name === DIRECTION_RIGHT || key.name === 'd') && this.currentDirection !== DIRECTION_LEFT) {
+      this.currentDirection = DIRECTION_RIGHT
     }
   }
 
@@ -90,8 +93,8 @@ class Game {
 
     // Move the head forward by one pixel based on velocity
     const head = {
-      x: this.snake[0].x + this.directions[this.currentDirection].x,
-      y: this.snake[0].y + this.directions[this.currentDirection].y,
+      x: this.snake[0].x + DIRECTIONS[this.currentDirection].x,
+      y: this.snake[0].y + DIRECTIONS[this.currentDirection].y,
     }
 
     this.snake.unshift(head)
@@ -107,19 +110,19 @@ class Game {
     }
   }
 
-  generateRandomPixelCoords(min, max) {
+  generateRandomPixelCoord(min, max) {
     // Get a random coordinate from 0 to max container height/width
     return Math.round(Math.random() * (max - min) + min)
   }
 
   generateDot() {
     // Generate a dot at a random x/y coordinate
-    this.dot.x = this.generateRandomPixelCoords(0, this.ui.gameContainer.width - 1)
-    this.dot.y = this.generateRandomPixelCoords(1, this.ui.gameContainer.height - 1)
+    this.dot.x = this.generateRandomPixelCoord(0, this.ui.gameContainer.width - 1)
+    this.dot.y = this.generateRandomPixelCoord(1, this.ui.gameContainer.height - 1)
 
     // If the pixel is on a snake, regenerate the dot
     this.snake.forEach(segment => {
-      if (segment.x === this.x && segment.y === this.y) {
+      if (segment.x === this.dot.x && segment.y === this.dot.y) {
         this.generateDot()
       }
     })
@@ -128,16 +131,16 @@ class Game {
   drawSnake() {
     // Render each snake segment as a pixel
     this.snake.forEach(segment => {
-      this.ui.draw(segment, 'green')
+      this.ui.draw(segment, SNAKE_COLOR)
     })
   }
 
   drawDot() {
     // Render the dot as a pixel
-    this.ui.draw(this.dot, 'red')
+    this.ui.draw(this.dot, DOT_COLOR)
   }
 
-  gameOver() {
+  isGameOver() {
     // If the snake collides with itself, end the game
     const collide = this.snake
       // Filter out the head
@@ -163,22 +166,17 @@ class Game {
     this.ui.render()
   }
 
-  // Set to initial direction and clear the screen
-  clear() {
-    this.changingDirection = false
-    this.ui.clearScreen()
-  }
-
   tick() {
-    if (this.gameOver()) {
+    if (this.isGameOver()) {
       this.showGameOverScreen()
       clearInterval(this.timer)
       this.timer = null
 
       return
     }
 
-    this.clear()
+    this.changingDirection = false
+    this.ui.clearScreen()
     this.drawDot()
     this.moveSnake()
     this.drawSnake()
@@ -189,7 +187,7 @@ class Game {
     if (!this.timer) {
       this.reset()
 
-      this.timer = setInterval(this.tick.bind(this), 50)
+      this.timer = setInterval(this.tick.bind(this), GAME_SPEED)
     }
   }
 

src/UserInterface.js

@@ -1,3 +1,5 @@
+const blessed = require('blessed')
+
 /**
  * @class UserInterface
  *
@@ -7,17 +9,26 @@
  * interfaces - web, terminal, etc.
  */
 class UserInterface {
-  constructor(blessed, screen) {
+  constructor() {
     // Blessed is the terminal library API that provides a screen, elements, and
     // event handling
     this.blessed = blessed
-    this.screen = screen
+    this.screen = blessed.screen()
 
     // Game title
     this.screen.title = 'Snek.js'
 
-    // Create the game container
-    this.gameBox = {
+    // Create the boxes
+    this.gameBox = this.createGameBox()
+    this.scoreBox = this.createScoreBox()
+    this.gameOverBox = this.createGameOverBox()
+
+    this.gameContainer = this.blessed.box(this.gameBox)
+    this.scoreContainer = this.blessed.box(this.scoreBox)
+  }
+
+  createGameBox() {
+    return {
       parent: this.screen,
       top: 1,
       left: 0,
@@ -28,22 +39,25 @@ class UserInterface {
         bg: 'black',
       },
     }
+  }
 
-    // Create the score container
-    this.scoreBox = {
+  createScoreBox() {
+    return {
       parent: this.screen,
       top: 0,
       left: 'left',
       width: '100%',
       height: 1,
       tags: true,
       style: {
-        fg: 'black',
+        fg: 'white',
         bg: 'blue',
       },
     }
+  }
 
-    this.gameOverBox = {
+  createGameOverBox() {
+    return {
       parent: this.screen,
       top: 'center',
       left: 'center',
@@ -63,9 +77,6 @@ class UserInterface {
         },
       },
     }
-
-    this.gameContainer = this.blessed.box(this.gameBox)
-    this.scoreContainer = this.blessed.box(this.scoreBox)
   }
 
   bindHandlers(keyPressHandler, quitHandler, enterHandler) {
@@ -76,11 +87,11 @@ class UserInterface {
   }
 
   // Draw a pixel
-  draw(coords, color) {
+  draw(coord, color) {
     this.blessed.box({
       parent: this.gameContainer,
-      top: coords.y,
-      left: coords.x,
+      top: coord.y,
+      left: coord.x,
       width: 1,
       height: 1,
       style: {