Skip to content

classic snake game with decorative flair. Vanilla JS, CSS3, Excessive DOM manipulation

Notifications You must be signed in to change notification settings

th3dougler/snakeByte

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

snakeByte

Based on the 1976 arcade hit, Blockade: Our intrepid jr dev seeks to squash bugs and leave their code looking dry and easily understood. (Its a snake game)

screenshot1 screenshot2 screenshot2 screenshot3 screenshot4 screenshot4

Laguages Used

  • HTML/CSS
  • JS

Image/Media Sources

Press Start 2P Modern Interiors Sprites SoundsByDane - 8Bit Sound Pack Whaaa - jefftheworld

Get Started:

Using the arrow keys or swipe on touch devices, navigate the junior dev and try to squash as many bugs as possible before you accidentally cause a stack overflow (trip over your own stack) play

Next steps:

  • socket.io full stack edition for live multiplayer
  • true i18n support
  • add some enemies to make the game harder
  • improve overall aesthetic thru consistent sprites and such

PREP:

wireframe

Pseudocode:

on page load, define environemnt classes:

  • gameboard: flexible world size, contains array containging all positions

  • snake: contains array subset of gameboard which is the snake, functions for updating position, direction and checking collision

  • bugs: array subset of bugs, arrays for creating and destroying bugs

variables: player score, lives, time count

eventlisteners:

  • click: start game
  • keydown: determine player direction

wait for player input to start game, begin main loop render loop:

  1. increment real-time time counter
  2. update player direction
  3. update player position
  4. check for collisions
    • if collision with bug, create a new bug and increase snake length
    • if collision with self, subtract one life and reset snake position while maintaining length/score
    • if it was players last life, end game and bring back to title screen
    • if player is at edge, loop to other side
    • dom manipulation - draw board

About

classic snake game with decorative flair. Vanilla JS, CSS3, Excessive DOM manipulation

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published