Snake.js

#javascript#web#game#firestore

A vanilla JavaScript snake game with online scoreboard and Firestore integration

🎮 About The Project

This project, SnakeJs is a modern remaster of the classic Nokia snake game, built with vanilla JavaScript. This project was created to kill time while exploring web game development and real-time database integration.

The game features a 30x30 grid (900 squares) with increased speed compared to the original, making it more challenging and engaging. Players can compete globally through an integrated online leaderboard powered by Firebase Firestore.

Snake.js Game Screenshot

🎯 Key Features

  • Classic Gameplay: Grid-based snake mechanics with smooth controls
  • Enhanced Difficulty: Increased speed for a more challenging experience
  • Online Leaderboard: Save and compare high scores with players worldwide
  • Real-time Database: Firestore integration for instant score updates
  • Vanilla JavaScript: No frameworks, no canvas, pure JS and SCSS implementation

🛠️ Technical Stack

  • Frontend: Vanilla JavaScript, HTML5, Sass (SCSS)
  • Database: Firebase Firestore (real-time data storage)
  • Deployment: Vercel
  • Base Template: Inspired by this repo: Kubowania's Nokia3310-Snake

🎲 How to Play

  1. Visit snaake.vercel.app
  2. Use arrow keys to control the snake
  3. Eat the food to grow longer
  4. Avoid hitting the walls or yourself
  5. Try to beat the high scores on the leaderboard!

💡 What I Learned

This project was an excellent opportunity to:

  • Work with vanilla JavaScript without frameworks or Canvas
  • Discover and Integrate Firebase Firestore technology for real-time data
  • Implement game logic and collision detection
  • Create an engaging user experience with simple tools

🔗 Links


This project demonstrates my ability to create interactive web applications using vanilla JavaScript and integrate cloud services for real-time functionality.