How to make a Snake Game using JavaScript and html5

-

I compiled stapes to create a game similar to Nokia developed, popular game called 'snake'

Snake was first developed by Nokia, programmed in 1997 by Taneli Armanto and published on Nokia mobile devices,  It was introduced on Nokia model 6110, 3310 from 2000 and later the game was rebranded as "Snake Xenzia" Included on later mobile phone models

I made a version that is more simplified and more beginners friendly, It's based on the same idea of making a snake that grows as it eats stuff and the score increases as it grows

I'm implementing this whole game in pure vanilla JavaScript and a taste of html5 canvas, In this project the canvas is used as a renderer for the game's visual output

concepts and initial ideas

I got the idea while doing another retro gaming project, i thought it would be good too if i created this game, from start my plan had been simplicity and making this game easy to implement,
So to simplify everything i had a great deal of planning prior getting started to write any code at all,

I ended up making everything circular so that collision detection is a matter of adding the radii of colliding objects and comparing it to the distance of the same colliding objects

Objects and game characters

The game has two objects

First object

An apple is an edible entity named 'apple' it's update loop has a statement responsible for inducing blinking by randomly tangling the boolean responsible for enabling it to draw its own body

Second object

A snake is an entity capable of keeping track of it's trail, upon collision with the first object 'Apple' the snake increases it's trail gradually as a way to accommodate growth, upon receiving the input event the snake changes it's velocity factor gradually changing it's direction, In the snake's update block there's a piece of code responsible for displacing the snake's {x, y} coordinates by it's velocity factor to archive movement 'locomotion', the snake also folds it's position upon moving out of the game world boundaries

Game world space

Game world is a responsive, monochrome 2d space stretching across the viewport's width and height, completely covering it, Game function is responsible for clearing the screen and updating all constituent entites residing in it's array of entities.
I open sourced this project on Github in a public repository, contributors are welcome as long as the contribution does not change the main idea of the game

The original source code is embedded in a gist below;



Insightful references;
Full source code
Github swashvirus/snake/ repository,

Wikipedia Snake Game reference

Comments

Post a Comment

Popular posts from this blog

Redirecting a webpage in JavaScript

-
Redirects are way of navigating a user to another webpage or location redirects are normally done by server side implementations. it's possible to do redirects using JavaScript too window.location is a object that stores current location information such as path, port, hostname and href or the location in the address bar of your browser changing it invokes a redirect it's a simple way to redirect a user to another webpage Syntax window.location.asign('https://example.com') or simply like window.location = "https://example.com" or simply omit window location = "https://example.com"
Read more

What is 'this.' keyword in JavaScript

-
In JavaScript 'this' is an object and a reference to the current object that is used to get and to set properties of the current object. Take for instance within a function; const func = function (name){     this.name = name } func.name instance property name is set to that of the first argument; const inst = new func('duke') inst.name // returns duke You can as well extend func to set name using 'this'; func.prototype.set = function(name){     this.name = name } Running the previous instance with this set method; inst.set('John') // returns John
Read more

Introduction to webshare API (navigator.share)

-
Image
navigator.share is a JavaScript API providing a sharing interface similar to native apps webshare API is supported on most updated mobile browsers Including Google chrome for Android Sharing is done by passing an Object with parameters "url", "text" or "title" to navigator.share function. For a webshare request to succeed you must supply at lest one of the parameters navigator.share returns a Promise upon being called "upon navigator.share({     "url": document.location,     "text": "I'm an example",     "title": document.title }) .then(resp => console.info("Successfully shared")) .catch(errors => console.error(errors))
Read more