Project Report on

SNAKE MANIA GAME

Submitted in partial fulfillment of the requirements for the award of degree of

BACHELOR OF ENGINEERING

IN

COMPUTER SCIENCE & ENGINEERING

Submitted to: Submitted By:

Er.Steve Samson Name:-Rohit Pandey

UID:-18bcs1548

Mentor Signature

(ER. Steve Samson )

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

CHANDIGARH UNIVERSITY, GHARUAN

June, 2022
 CERTIFICATE

This is to certify that the work embodied in this Project Report entitled “SNAKE MANIA
GAME USING CSS And Java Script :NEVER LET THE LERANING STOP!” being submitted by
“ROHIT PANDEY "8th Semester for partial fulfillment of the requirement for the degree of “
Bachelor of Engineering in Computer Science & Engineering ” discipline in “ Chandigarh
University ” during the academic session Jan-May 2022 is a record of bona fide piece of
work, carried out by student under my supervision and guidance in the “ Department of
Computer Science & Engineering ”, ChandigarhUniversity.

APPROVED & GUIDED BY:

ER.Steve Samson
 DECLARATION

We, the students of Bachelor of Engineering in Computer Science & Engineering, 8th
Semester, session: Jan-May 2022, Chandigarh University, hereby declare that the work
presented in this Project Report entitled “Hangman game using python" NEVER LET THE
LEARNING STOP!” is the outcome of my own work, is bona fide and correct to the best of
my knowledge and this work has been carried out taking care of Engineering Ethics. The
work presented does not infringe any patented work and has not been submitted to any
other university or anywhere else for the award of any degree or any professional diploma.

Student details and Signature

Name:Rohit pandey
UID:-18bcs1548

Signature:-Rohit Pandey

APPROVED & GUIDED BY:

ER.Steve Samson
 ABSTRACT

The physical classroom learning nowadays is no longer applicable for the current younger
generations. Internet and distance learning which is generally known as online education
plays a vital roles in the country’s education system. It is undeniable that online education
provides ample of benefits to young learners. Nevertheless, there are also many negative
implications from online education. Limited collaborative learning, increase in time and
effort are the several negative implications from online education. This study examines the
implications of online education among students is more effective in time of Covid-19
Outbreak.
Due to the outbreak of COVID-19, classes in this semester are mainly replaced by online
teaching to ensure continual learning so that the loss of time can be covered so that the
examination can be taken without any complications. Teachers are actively exploring
effective online teaching methods to provide a good learning experience for students at
home. This paper presents an online teaching model based on the idea of teaching students
at home for the competitive exams and even for the semester exams.

This project aims to bring the fun and simplicity of snake game with some new features.
It will include computer controlled intelligent opponents whose aim will be to challenge the
human players. It will also have the multiplayer feature that will allow more than one players
to play the game over a network. This project explores a new dimension in the traditional
snake game to make it more interesting and challenging. The simplicity of this game makes it
an ideal candidate for a minor project as we can focus on advanced topics like multiplayer
functionality and implementation of computer controlled intelligent opponents.
 ACKNOWLEDGEMENT
I take opportunity to express my deepest gratitude and appreciation to all those who
helpedd me directly or indirectly towards the successful completion of this paper especially
our mentor Er.Steve Samson sir who helped us in every step of our project.
 PROJECT DESCRIPTION

S.NO TOPIC PAGE NO

1. INTRODUCTION 3

1.1. A detailed introduction of snake game 3

1.2. An Introduction to Our Web Application. 38

2. PROFILE OF THE PROBLEM. 45

2.1. PROBLEM STATEMENT. 45

2.2. PROBLEM BACKGROUND. 45

2.3. TECHNOLOGY USED. 47

3. EXISTING SYSTEMS. 47

3.1. Introduction to the existing systems. 47

3.2. DFD. 52

3.3. What’s new in the system to be developed. 53

4. PROBLEM ANALYSIS. 55

4.1. Product Definition. 55

4.2. Voluntariness 57

4.3. Project Plan. 60

 4,4. Modules. 63

4.5. TEAM WISE DISTRIBUTION. 64

5. SOFTWARE AND HARDWARE REQUIREMENT. 64

5.1. Software Requirements. 64

5.2. Hardware Requirements. 65

5.3. Software Description. 65

6. DESIGN. 81

6.1. System Design. 81

6.2. Detailed Design. 83

6.3 PROPOSED COMPLETION DATE. 83

7. TESTING 84

8. IMPLEMENTATION. 95

8.1. Project Implemention. 95

8.2. SNAP SHOT. 97

9. BIBLIOGRAPHY. 101

9.1. CONCLUSION. 101

9.2. References. 101

 INTRODUCTION
1.1. A detailed introduction of snake game
JavaScript is an open-source programming language. It is designed for creating web-centric
applications. It is lightweight and interpreted, which makes it much faster than other
languages. JavaScript is integrated with HTML, which makes it easier to implement
JavaScript in web applications.

A Snake Game is a project for improving your skills in Web Development. You can improve
your skills in HTML, CSS and JavaScript. You can also learn how Animation Frame works in
HTML, Advanced CSS properties and also some intermediate level JavaScript Language in
this project. You can mention this project in your resume by some further improving . Snake
is a video game genre where the player maneuvers a growing line that becomes a primary
obstacle to itself. The concept originated in the 1976 two-player arcade game Blockade from
Gremlin Industries, and the ease of implementation has led to hundreds of versions (some
of which have the word snake or worm in the title) for many platforms. 1982's Tron arcade
game, based on the film, includes snake gameplay for the single-player Light Cycles
segment. After a variant was preloaded on Nokia mobile phones in 1998, there was a
resurgence of interest in snake games as it found a larger audience. The history of the Snake
game goes back to the 1970's. However, it was the 1980's when the game took on the look
that we will be using. It was sold under numerous names and many platforms but probably
gained widespread recognition when it was shipped as standard on Nokia mobile phones in
the late 1990's.
The game involves controlling a single block or snakehead by turning only left or right by
ninety degrees until you manage to eat an food. When you get the food, the Snake grows an
extra block or body segment.

If, or rather when, the snake bumps into the edge of the screen or accidentally eats himself
the game is over. The more food the snake eats the higher the score.

The player controls a dot, square, or object on a bordered plane. As it moves forward, it
leaves a trail behind, resembling a moving snake. In some games, the end of the trail is in a
fixed position, so the snake continually gets longer as it moves. In another common scheme,
the snake has a specific length, so there is a moving tail a fixed number of units away from
the head. The player loses when the snake runs into the screen border, other obstacle, or
itself.

Gameplay comes in two major variants:

1. In the first, which is most often a two-player game, there are multiple snakes on the
playfield. Each player attempts to block the other so the opponent runs into an existing
trail and loses. Surround for the Atari VCS is an example of this type. The Light
Cycles segment of the Tron arcade game is a single-player version where the other
"snakes" are AI controlled.
2. In the second variant, a sole player attempts to eat items by running into them with the
head of the snake. Each item eaten makes the snake longer, so avoiding collision with
the snake becomes progressively more difficult. Examples: Nibbler, Snake Byte.

History
The Snake design dates back to the arcade game Blockade,[2][3] developed and published
by Gremlin in 1976.[4] It was cloned as Bigfoot Bonkers the same year. In 1977, Atari,
Inc. released two Blockade-inspired titles: the arcade game Dominos and Atari VCS
game Surround.[5] Surround was one of the nine Atari VCS launch titles in the US and was
sold by Sears under the name Chase. That same year, a similar game was launched for
the Bally Astrocade as Checkmate.[6]

The first known home computer version, titled Worm, was programmed in 1978 by Peter

Trefonas for the TRS-80,[2] and published by CLOAD magazine in the same year. This was
followed shortly afterwards with versions from the same author for the Commodore
PET and Apple II. A clone of the Hustle arcade game, itself a clone of Blockade, was written
by Peter Trefonas in 1979 and published by CLOAD.[7] An authorized version of Hustle was
published by Milton Bradley for the TI-99/4A in 1980.[8] The single-player Snake Byte was
published in 1982 for Atari 8-bit computers, Apple II, and VIC-20; a snake eats apples to
complete a level, growing longer in the process. In Snake for the BBC Micro (1982), by Dave
Bresnen, the snake is controlled using the left and right arrow keys relative to the direction it
is heading in. The snake increases in speed as it gets longer, and there's only one life.

Nibbler (1982) is a single-player arcade game where the snake fits tightly into a maze, and
the gameplay is faster than most snake designs. Another single-player version is part of the
1982 Tron arcade game, themed with light cycles. It reinvigorated the snake concept, and
many subsequent games borrowed the light cycle theme.
Starting in 1991, Nibbles was included with MS-DOS for a period of time as
a QBasic sample program. In 1992, Rattler Race was released as part of the second Microsoft
Entertainment Pack. It adds enemy snakes to the familiar apple-eating gameplay.

Later versions[edit]

Serpent (1990) is a snake game for the Game Boy.

Meerca Chase is a snake game available on Neopets.

Slither.io (2016) is a multiplayer interpretation of Snake.

In 2017, Google released a version of the game as an easter egg, whenever the phrases
"snake", "play snake", "snake game" and "snake video game" are typed.[9]

Nokia phones[edit]

Snake II screenshot from a Nokia 3310, showing level 4 and maze 2.

Nokia puts Snake on the majority of their phones:

 Snake – The first published by Nokia, for monochrome phones. It was programmed in

1997 by Taneli Armanto of Nokia[10] and introduced on the Nokia 6110.[11]
 Snake II – Included on monochrome phones such as the Nokia 3310 from 2000.
 Snake Xenzia – Included on later-model monochrome phones (and most cheaper colour
phones, such as the Series 30 and Series 30+ budget mobile devices).
 Snake EX – Included on colour phones. First introduced with the Nokia 9290
Communicator in 2002. It supports multiplayer through Bluetooth and Infra-Red.
 Snake EX2 – Introduced with the Nokia 3100 in 2003 and included in several Series
40 handsets.
 Snakes – A 3D version designed for the N-Gage in 2005. It featured multiplayer
through Bluetooth. Later Nokia started preinstalling it (without multiplayer) on
some Nseries smartphones like N70, N73, N80, etc. It can be downloaded from Nokia
support pages and played on any S60 device.[12]
 Snake III – A 3D version, different from Snakes. Snake III takes a more living snake
approach, rather than the abstract feel of Snakes. An example of a phone with it installed
is the Nokia 3250 from 2005, and it supports multiplayer modes via Bluetooth.
 Snakes Subsonic - Sequel to Snakes, released on May 22, 2008 for N-Gage 2.0.
 Snake Xenzia (2017) - First released on the Nokia 3310.[13]
 Snake (2017) - Released with Facebook Messenger (2017)

Legacy[edit]

In 1996, Next Generation ranked it number 41 on their "Top 100 Games of All Time", citing
the need for both quick reactions and forethought. In lieu of a title they listed it as "Snake
game" in quotes.[14]

On November 29, 2012, the Museum of Modern Art in New York City announced that the
Nokia port of Snake was one of 40 games that the curators wished to add to the museum's
collection in the future.[

1.2An Introduction to Our Web Application.

Displaying the board and a still snake

First, we need to display the game board and the snake. Start by creating the
file snakegame.html. This will contain all of our code. Next, open the file in your
preferred browser.

To be able to create our game, we have to make use of the HTML <canvas>, which is
used to draw graphics with JavaScript.

<canvas id="gameCanvas" width="400" height="400"><canvas>

The id is what identifies the canvas; it should always be specified.

The id takes the dimensions width and height as props.

Until now, the browser will not display anything since the canvas has no default
background. To make our canvas visible, we can give it a border by writing some
JavaScript code.

To do that, we need to insert <script> and </script> tags after the </canvas>.

Now we can make the canvas, or the game board, for our snake to navigate. First, we get the
canvas element using the id gameCanvas (specified earlier).

Next, we get the canvas “2d context", which means that it will be drawn into a 2D space.

We will then make a 400 x 400 white rectangle with a black border, which will cover the entire
canvas starting from the top left corner (0, 0).

const snakeboard = document.getElementById("gameCanvas");
const snakeboard_ctx = gameCanvas.getContext("2d");

Making the snake

Now, for the snake! We need to specify the initial location of our snake on the canvas by
representing the snake as an array of coordinates.

Thus, to create a horizontal snake in the middle of the canvas, at (200, 200), we list the co-
ordinate of each body part of the snake.

The number of coordinates in the object will be equal to the length of the snake.

let snake = [  {x: 200, y: 200},  {x: 190, y: 200},  {x: 180, y: 200},  {x: 170, y: 200},  {x: 160
, y: 200},];

The yy-coordinate for all parts is always 200. The xx-coordinate is at decrements of

10 to represent different parts of the snake’s body. The very first coordinate represents
the snake’s head.

to display the snake on the canvas, we can write a function to draw a rectangle for each pair
of coordinates.

function drawSnakePart(snakePart) 
{  
  snakeboard_ctx.fillStyle = 'lightblue';  
  snakeboard_ctx.strokestyle = 'darkblue';
  snakeboard_ctx.fillRect(snakePart.x, snakePart.y, 10, 10);  
  snakeboard_ctx.strokeRect(snakePart.x, snakePart.y, 10, 10);
}
 
/*Function that prints the parts*/
function drawSnake() 
{  
  snake.forEach(drawSnakePart);
}

Making the snake move automatically

We have our canvas and our snake, but we need the snake to move so it can navigate
the game space in all directions.

So, let’s learn how to make our snake move automatically on the canvas .

Horizontal movement
To make the snake move one step (10px) to the right, we can increase the xx-coordinate of
every part of the snake by 10px (dx = +10).

To make the snake move to the left, we can decrease the x-coordinate of every part of the
snake by 10px (dx = -10).

dx is the horizontal velocity of the snake. We need to create a

function move_snake that will update the snake.

function move_snake() 
{  
  const head = {x: snake[0].x + dx, y: snake[0].y};
  snake.unshift(head);
  snake.pop();
}

In the function above, we created a new head for the snake. We then added the new head to
the beginning of the snake using snake.unshift and removed the last element of the snake
using snake.pop.
Vertical movement
To move our snake vertically, we cannot alter all the yy-coordinates by 10px as that would
shift the whole snake up and down. Only the yy-coordinate of the head needs to be altered.

Decreasing it by 10px to move the snake up and increasing it by 10px to move the snake
down will move the snake correctly.

To implement this, we have to update the move_snake method to also increase the y-

coordinate of the head by dy (vertical velocity of the snake).

const head = {x: snake[0].x + dx, y: snake[0].y + dy};

Automatic movement
In order to move the snake, say 50px to the right, we will have to call move_snake(x) 5 times.
However, calling the method 5 times will make the snake jump to the +50px position, instead
of moving step-by-step towards that point.

To move the snake how we want, we can add a slight delay between each call
with setTimeout. We also need to make sure to call drawSnake every time we
call move_Snake, as shown below. If we don’t, we won’t be able to see the intermediate steps
that show the snake moving.

setTimeout(function onTick() {  clearCanvas();  move_Snake();  drawSnake();}, 100);
setTimeout(function onTick() {  clearCanvas();  move_Snake();  drawSnake();}, 100);
...
drawSnake();

clearCanvas() is called inside setTimeout to remove all previous positions of

the snake.

Although there is still a problem, nothing tells the program that it has to wait
for setTimeout before moving to the next setTimeout. This means that the snake will still
jump 50px forward but only after a slight delay.
To fix that, we have to wrap our code inside functions. Instead of creating an infinite number
of functions that call each other, we can instead create one function (main) and call it over
and over again.

function main() 
{  
   setTimeout(function onTick() 
   {    
     clearCanvas();    
     advanceSnake();  
     drawSnake();
     // Call main again
     main();
   }, 100)
}

<!DOCTYPE html>

<html>

  <head>

    <title>Snake Game</title>

    <link href="https://fonts.googleapis.com/css?family=Antic+Slab" rel="stylesheet">

  </head>

  <body>

    <canvas id="snakeboard" width="400" height="400"></canvas>

    <style>

      #snakeboard {

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

      }

    </style>

  </body>

  <script>
    const board_border = 'black';

    const board_background = "white";

    const snake_col = 'lightblue';

    const snake_border = 'darkblue';

    

    let snake = [

      {x: 200, y: 200},

      {x: 190, y: 200},

      {x: 180, y: 200},

      {x: 170, y: 200},

      {x: 160, y: 200}

    ]

    // Horizontal velocity

    let dx = 10;

    // Vertical velocity

    let dy = 0;

    

    // Get the canvas element

    const snakeboard = document.getElementById("snakeboard");

Now our snake can move! However, once the snake’s position moves beyond the
canvas boundary, it keeps going forever. We need to fix this by incorporating the use
of arrow keys to change the snake’s direction.
 Using arrow keys to change the snake’s direction
We have a moving snake, but our next task is to make the snake change direction when one
of the arrow keys is pressed.

Changing Direction
Let’s make the function change_direction. This will check if the pressed key matches one of
the arrow keys. If it does, we will change the vertical and horizontal velocity. Look at the
function below.

function change_direction(event) 
{  
   const LEFT_KEY = 37;
   const RIGHT_KEY = 39;
   const UP_KEY = 38;
   const DOWN_KEY = 40;
 
   const keyPressed = event.keyCode;
   const goingUp = dy === -10;
   const goingDown = dy === 10;
   const goingRight = dx === 10;  
   const goingLeft = dx === -10;
 
     if (keyPressed === LEFT_KEY && !goingRight)
     {    
          dx = -10;
          dy = 0;  
     }
 
     if (keyPressed === UP_KEY && !goingDown)
     {    
          dx = 0;
          dy = -10;
     }
 
     if (keyPressed === RIGHT_KEY && !goingLeft)
     {    
          dx = 10;
          dy = 0;
     }
 
     if (keyPressed === DOWN_KEY && !goingUp)
     {    
          dx = 0;
          dy = 10;
     }
}

We also need to check if the snake is moving in the opposite direction of the new, intended
direction. This will prevent our snake from reversing, such as when you press the right arrow
key when the snake is moving to the left.

To incorporate the change_direction function, we can use the addEventListener on the

document to listen for when a key is pressed; then we can call change_direction with
the keydown event.

document.addEventListener("keydown", change_direction)

Adding boundary condition

To prevent our snake from moving infinitely, we need to add boundary conditions. For this,
let’s make the function has_game_ended, which returns true when the game has ended and
false if otherwise.

There are two cases in which the game can end:

 The head of the snake collides with its body.

  The head of the snake collides with the canvas boundary.

These two conditions are incorporated in the code below:

function has_game_ended()
{  
  for (let i = 4; i < snake.length; i++)
  {    
    const has_collided = snake[i].x === snake[0].x && snake[i].y === snake[0].y
    if (has_collided) 
      return true
  }
  const hitLeftWall = snake[0].x < 0;  
  const hitRightWall = snake[0].x > snakeboard.width - 10;
  const hitToptWall = snake[0].y &lt; 0;
  const hitBottomWall = snake[0].y > snakeboard.height - 10;
 
  return hitLeftWall ||  hitRightWall || hitToptWall || hitBottomWall
}

First, there is a check which looks to see if the head has collided with any of the body parts.

If it has not, there is a further check for all of the boundary walls.

<!DOCTYPE html>

<html>

  <head>

    <title>Snake Game</title>

    <link href="https://fonts.googleapis.com/css?family=Antic+Slab" rel="stylesheet">

  </head>

  <body>

    <canvas id="snakeboard" width="400" height="400"></canvas>

    <style>

      #snakeboard {

        position: absolute;
        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

      }

    </style>

  </body>

  <script>

    const board_border = 'black';

    const board_background = "white";

    const snake_col = 'lightblue';

    const snake_border = 'darkblue';

    

    let snake = [

      {x: 200, y: 200},

      {x: 190, y: 200},

      {x: 180, y: 200},

      {x: 170, y: 200},

      {x: 160, y: 200}

    ]

    // True if changing direction

    let changing_direction = false;

    // Horizontal velocity

    let dx = 10;

    // Vertical velocity

    let dy = 0;

    

The snake is now able to change direction when we press the arrow keys. The point of the
game is to eat as much food a possible, so we will now learn how to incorporate food and
score into the game.
Incorporating food and score

Now that we have a fully functional snake, it’s time to incorporate food and score into our
game.
Food
For the food that our snake will eat, we want to generate a random set of coordinates. Let’s
make the function random_food to randomly generate an xx-coordinate and a yy-coordinate
for the food’s positions. We also have to ensure that the food is not located where the snake
currently is.

If it is, then we have to generate a new food location. See the functions below:

function random_food(min, max)
{  
   return Math.round((Math.random() * (max-min) + min) / 10) * 10;
}
 
function gen_food() 
{  
   food_x = random_food(0, snakeboard.width - 10);
   food_y = random_food(0, snakeboard.height - 10);
   snake.forEach(function has_snake_eaten_food(part) {
        const has_eaten = part.x == food_x && part.y == food_y;
        if (has_eaten) gen_food();
      });
}

We also need a function to actually draw the food on the canvas and update main to
incorporate the drawFood function.

function drawFood()
{
      snakeboard_ctx.fillStyle = 'lightgreen;
      snakeboard_ctx.strokestyle = 'darkgreen';
      snakeboard_ctx.fillRect(food_x, food_y, 10, 10);
      snakeboard_ctx.strokeRect(food_x, food_y, 10, 10);
}

Growing the snake

The snake will grow whenever the head of the snake is at the same position as the food.
Instead of adding a body part to the snake’s body every time that happens, we can skip
removing a body part in the move_snake function.

See the updated version of move_snake below:

function move_snake() {
      // Create the new Snake's head
      const head = {x: snake[0].x + dx, y: snake[0].y + dy};
      // Add the new head to the beginning of snake body
      snake.unshift(head);
      const has_eaten_food = snake[0].x === food_x && snake[0].y === food_y;
      if (has_eaten_food) {
        // Generate new food location
        gen_food();
      } else {
        // Remove the last part of snake body
        snake.pop();
      }
    }

Score
Incorporating a score is actually quite simple. We need to initialize a score variable and
increment it every time the snake eats the food. To display the score, we will need a
new div before the canvas.

We need to further update the move_snake method to incorporate the score:

function move_snake()
 {
      // Create the new Snake's head
      const head = {x: snake[0].x + dx, y: snake[0].y + dy};
      // Add the new head to the beginning of snake body
      snake.unshift(head);
      const has_eaten_food = snake[0].x === foodX && snake[0].y === foodY;
      if (has_eaten_Food) {
        // Increase score
        score += 10;
        // Display score on screen
        document.getElementById('score').innerHTML = score;
        // Generate new food location
        gen_food();
      } else {
        // Remove the last part of snake body
        snake.pop();
      }
}

1
<!DOCTYPE html>

<html>

  <head>

    <title>Snake Game</title>

  </head>

  <body>

    <div id="score">0</div>

    <canvas id="snakeboard" width="400" height="400"></canvas>

    <style>

      #snakeboard {

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

      }

      #score {

        text-align: center;

        font-size: 140px;

      }

    </style>

  </body>

  <script>

    const board_border = 'black';

    const board_background = "white";

    const snake_col = 'lightblue';

    const snake_border = 'darkblue';

    

    let snake = [

      {x: 200, y: 200},

      {x: 190, y: 200},

      {x: 180, y: 200},

      {x: 170, y: 200},

      {x: 160, y: 200}

    ]

    let score = 0;

    // True if changing direction
    let changing_direction = false;

    // Horizontal velocity

2. PROFILE OF THE PROBLEM:

CSS

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to

simplify the process of making web pages presentable.

CSS handles the look and feel part of a web page. Using CSS, you can control the color of
the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid
out, what background images or colors are used, layout designs,variations in display for
different devices and screen sizes as well as a variety of other effects.

CSS is easy to learn and understand but it provides powerful control over the presentation of
an HTML document. Most commonly, CSS is combined with the markup languages HTML
or XHTML.

CSS saves time − You can write CSS once and then reuse same sheet in multiple
HTML pages. You can define a style for each HTML element and apply it to as
many Web pages as you want.

Pages load faster − If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply it to all the
occurrences of that tag. So less code means faster download times.

Easy maintenance − To make a global change, simply change the style, and all
elements in all the web pages will be updated automatically.
 Superior styles to HTML − CSS has a much wider array of attributes than
HTML, so you can give a far better look to your HTML page in comparison to
HTML attributes.

Multiple Device Compatibility − Style sheets allow content to be optimized

for more than one type of device. By using the same HTML document, different
versions of a website can be presented for handheld devices such as PDAs and cell
phones or for printing.

Global web standards − Now HTML attributes are being deprecated and it is
being recommended to use CSS. So its a good idea to start using CSS in all the
HTML pages to make them compatible to future browsers.

CSS Versions

Cascading Style Sheets level 1 (CSS1) came out of W3C as a recommendation in December
1996. This version describes the CSS language as well as a simple visual formatting model
for all the HTML tags.

CSS2 became a W3C recommendation in May 1998 and builds on CSS1. This version adds
support for media-specific style sheets e.g. printers and aural devices, downloadable fonts,
element positioning and tables.

JAVA

JavaScript is a scripting or programming language that allows you to implement

complex features on web pages — every time a web page does more than just sit
there and display static information for you to look at — displaying timely content
updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc.
— you can bet that JavaScript is probably involved. It is the third layer of the layer
cake of standard web technologies, two of which (HTML and CSS) we have covered in
much more detail in other parts of the Learning Area.
  HTML is the markup language that we use to structure and give meaning to
our web content, for example defining paragraphs, headings, and data tables,
or embedding images and videos in the page.
 CSS is a language of style rules that we use to apply styling to our HTML
content, for example setting background colors and fonts, and laying out our
content in multiple columns.
 JavaScript is a scripting language that enables you to create dynamically
updating content, control multimedia, animate images, and pretty much
everything else. (Okay, not everything, but it is amazing what you can achieve
with a few lines of JavaScript code.)

Applications of CSS And JavaScript

HTML and CSS are actually not technically programming languages; they're just page
structure and style information. But before moving on to JavaScript and other true languages,
you need to know the basics of HTML and CSS, as they are on the front end of every web
page and application.

In the very early 1990s, HTML was the only language available on the web. Web developers
had to painstakingly code static sites, page by page. A lot's changed since then: Now there are
many computer programming languages available.

 HTML provides the basic structure of sites, which is enhanced and modified by other

technologies like CSS and JavaScript.
 CSS is used to control presentation, formatting, and layout.
 JavaScript is used to control the behavior of different elements.

2.1. PROBLEM STATEMENT:

The traditional snake game does not offer much challenge to it's players. It is impossible to
bring out the best playing skill of a players unless a challenge is offered to them. The players
loose interest in the game after playing it for sometime due to lack of challenge. Hence when
people hear about snake game, they quickly form an image of old age arcade game. The
absence of powerful graphical resources and weak support for networked application in the
programming language is one of the factors that has delayed the development of a interesting
and challenging version of snake game.

Project Background Snake Mania

Intelligent & Multiplayer Snake Game. It is a remake of traditional snake game with iSnake –
computer controlled opponent snake and multiplayer functionality. This project aims to bring
the fun and simplicity of snake game with some new feature. It will include Snake , whose
aim will be to challenge the human players. It will also have the multiplayer feature that will
allow more than one players to play the game over a network. The traditional snake game
does not offer much challenge to it's players. Hence players loose interest in the game after
playing it for sometime. Offering some sort of challenge and adventure to the players will
help increase the addictive power of this game. The multiplayer and iSnake features of this
game will make this game more challenging and interesting. The simplicity of this game
makes it an ideal candidate for a minor project as we can focus on advanced topics like
multiplayer functionality and iSnake . The strong support for networked application in Java
programming language and availability of high speed network connection layer in present
day computers will allow us to build a very efficient multiplayer version of snake game.
Swing API and Java2D API will be used to create stunning graphics and user interface for the
game. [1]the computer controlled snake which acts as the opponent to the human players and
has some form of intelligence embedded into it. We will refer to this snake as iSnake now
onwards in this document.
 SYSTEM REQUIREMENTS
2.1 Software Requirements

OPERATING SYSTEM : WINDOWS XP or Higher

IDE : VisualStudio.NET 2005/2008

FRONT END : windows

LANGUAGE : CSS And JavaScript

DATABASE : SQLSERVER 2000/ 2005

2.2 Hardware Requirements

Intel P4 1.5GHz or above

512MB RAM

80GB HDD Minimum

2.3. Software Description:

Visual Studio Code:

Visual Studio Code, also commonly referred to as VS Code, is a source-code editor made
by Microsoft for Windows, Linux and macOS. Features include support
for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring,
and embedded Git. Users can change the theme, keyboard shortcuts, preferences, and
install extensions that add additional functionality.
In the Stack Overflow 2021 Developer Survey, Visual Studio Code was ranked the most
popular developer environment tool, with 70% of 82,000 respondents reporting that they use
it.

Features
Visual Studio Code is a source-code editor that can be used with a variety of programming
languages, including Java, JavaScript, Go, Node.js, Python and C++. It is based on
the Electron framework, which is used to develop Node.js Web applications that run on
the Blink layout engine. Visual Studio Code employs the same editor component (codenamed
"Monaco") used in Azure DevOps (formerly called Visual Studio Online and Visual Studio
Team Services).
Out of the box, Visual Studio Code includes basic support for most common programming
languages. This basic support includes syntax highlighting, bracket matching, code folding,
and configurable snippets. Visual Studio Code also ships with IntelliSense for JavaScript,
TypeScript, JSON, CSS, and HTML, as well as debugging support for Node.js. Support for
additional languages can be provided by freely available extensions on the VS Code
Marketplace.

Fig. VS Code logo.

Instead of a project system, it allows users to open one or more directories, which can then be
saved in workspaces for future reuse. This allows it to operate as a language-agnostic code
editor for any language. It supports many programming languages and a set of features that
differs per language. Unwanted files and folders can be excluded from the project tree via the
settings. Many Visual Studio Code features are not exposed through menus or the user
interface but can be accessed via the command palette.
Visual Studio Code can be extended via extensions, available through a central repository.
This includes additions to the editor and language support. A notable feature is the ability to
create extensions that add support for new languages, themes, and debuggers, perform static
code analysis, and add code linters using the Language Server Protocol.
Source control is a built-in feature of Visual Studio Code. It has a dedicated tab inside of the
menu bar where you can access version control settings and view changes made to the current
project. To use the feature you must link Visual Studio Code to any supported version control
system (Git, Apache Subversion, Perforce, etc.). This allows you to create repositories as well
as to make push and pull requests directly from the Visual Studio Code program.
Visual Studio Code includes multiple extensions for FTP, allowing the software to be used as
a free alternative for web development. Code can be synced between the editor and the
server, without downloading any extra software.
Visual Studio Code allows users to set the code page in which the active document is saved,
the newline character, and the programming language of the active document. This allows it
to be used on any platform, in any locale, and for any given programming language.
Visual Studio Code collects usage data and sends it to Microsoft, although this can be
disabled. Due to the open-source nature of the application, the telemetry code is accessible to
the public, who can see exactly what is collected.

React.js (Javascript Library):

ReactJS tutorial provides basic and advanced concepts of ReactJS. Currently, ReactJS is one
of the most popular JavaScript front-end libraries which has a strong foundation and a large
community.

ReactJS is a declarative, efficient, and flexible JavaScript library for building reusable UI

components. It is an open-source, component-based front end library which is responsible
only for the view layer of the application. It was initially developed and maintained by
Facebook and later used in its products like WhatsApp & Instagram.

The main objective of ReactJS is to develop User Interfaces (UI) that improves the speed of
the apps. It uses virtual DOM (JavaScript object), which improves the performance of the
app. The JavaScript virtual DOM is faster than the regular DOM. We can use ReactJS on the
client and server-side as well as with other frameworks. It uses component and data patterns
that improve readability and helps to maintain larger apps.

ReactJS is a declarative, efficient, and flexible JavaScript library for building reusable UI
components. It is an open-source, component-based front end library responsible only for the
view layer of the application. It was created by Jordan Walke, who was a software engineer
at Facebook. It was initially developed and maintained by Facebook and was later used in its
products like WhatsApp & Instagram. Facebook developed ReactJS in 2011 in its newsfeed
section, but it was released to the public in the month of May 2013.

Today, most of the websites are built using MVC (model view controller) architecture. In
MVC architecture, React is the 'V' which stands for view, whereas the architecture is
provided by the Redux or Flux.

A ReactJS application is made up of multiple components, each component responsible for

outputting a small, reusable piece of HTML code. The components are the heart of all React
applications. These Components can be nested with other components to allow complex
applications to be built of simple building blocks. ReactJS uses virtual DOM based
mechanism to fill data in HTML DOM. The virtual DOM works fast as it only changes
individual DOM elements instead of reloading complete DOM every time.

To create React app, we write React components that correspond to various elements. We
organize these components inside higher level components which define the application
structure. For example, we take a form that consists of many elements like input fields,
labels, or buttons. We can write each element of the form as React components, and then we
combine it into a higher-level component, i.e., the form component itself. The form
components would specify the structure of the form along with elements inside of it.

Today, many JavaScript frameworks are available in the market(like angular, node), but still,
React came into the market and gained popularity amongst them. The previous frameworks
follow the traditional data flow structure, which uses the DOM (Document Object Model).
DOM is an object which is created by the browser each time a web page is loaded. It
dynamically adds or removes the data at the back end and when any modifications were done,
then each time a new DOM is created for the same page. This repeated creation of DOM
makes unnecessary memory wastage and reduces the performance of the application.

Therefore, a new technology ReactJS framework invented which remove this drawback.
ReactJS allows you to divide your entire application into various components. ReactJS still
used the same traditional data flow, but it is not directly operating on the browser's Document
Object Model (DOM) immediately; instead, it operates on a virtual DOM. It means rather
than manipulating the document in a browser after changes to our data, it resolves changes on
a DOM built and run entirely in memory. After the virtual DOM has been updated, React
determines what changes made to the actual browser's DOM. The React Virtual DOM exists
entirely in memory and is a representation of the web browser's DOM. Due to this, when we
write a React component, we did not write directly to the DOM; instead, we are writing
virtual components that react will turn into the DOM.

Versions:
Live Server-
This is a little development server with live reload capability. Use it for hacking your
HTML/JavaScript/CSS files, but not for deploying the final site.

There are two reasons for using this:

1. AJAX requests don’t work with the file:// protocol due to security restrictions, i.e. you
need a server if your site fetches content through JavaScript.
2. Having the page reload automatically after changes to files can accelerate
development.

You don’t need to install any browser plugins or manually add code snippets to your pages
for the reload functionality to work, see “How it works” section below for more information.
If you don’t want/need the live reload, you should probably use something even simpler, like
the following Python-based one-liner:

python -m SimpleHTTPServer

Installation

You need node.js and npm. You should probably install this globally.

Npm way

npm install -g live-server

Manual way

git clone https://github.com/tapio/live-server

cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally

Usage from command line

Issue the command live-server in your project’s directory. Alternatively you can add the path
to serve as a command line parameter.
This will automatically launch the default browser. When you make a change to any file, the
browser will reload the page - unless it was a CSS file in which case the changes are applied
without a reload.

Command line parameters:

 --port=NUMBER - select port to use, default: PORT env var or 8080

 --host=ADDRESS - select host address to bind to, default: IP env var or 0.0.0.0 (“any
address”)
 --no-browser - suppress automatic web browser launching
 --browser=BROWSER - specify browser to use instead of system default
 --quiet | -q - suppress logging
 --verbose | -V - more logging (logs all requests, shows all listening IPv4 interfaces,
etc.)
 --open=PATH - launch browser to PATH instead of server root
 --watch=PATH - comma-separated string of paths to exclusively watch for changes
(default: watch everything)
 --ignore=PATH - comma-separated string of paths to ignore (anymatch-compatible
definition)
 --ignorePattern=RGXP - Regular expression of files to ignore (ie .*\.jade)
(DEPRECATED in favor of --ignore)
 --no-css-inject - reload page on CSS change, rather than injecting changed CSS
 --middleware=PATH - path to .js file exporting a middleware function to add; can be
a name without path nor extension to reference bundled middlewares
in middleware folder
 --entry-file=PATH - serve this file (server root relative) in place of missing files
(useful for single page apps)
 --mount=ROUTE:PATH - serve the paths contents under the defined route (multiple
definitions possible)
 --spa - translate requests from /abc to /#/abc (handy for Single Page Apps)
 --wait=MILLISECONDS - (default 100ms) wait for all changes, before reloading
 --htpasswd=PATH - Enables http-auth expecting htpasswd file located at PATH
 --cors - Enables CORS for any origin (reflects request origin, requests with
credentials are supported)
  --https=PATH - PATH to a HTTPS configuration module
 --https-module=MODULE_NAME - Custom HTTPS module (e.g. spdy)
 --proxy=ROUTE:URL - proxy all requests for ROUTE to URL
 --help | -h - display terse usage hint and exit
 --version | -v - display version and exit

Default options:

If a file ~/.live-server.json exists it will be loaded and used as default options for live-server

on the command line. See “Usage from node” for option names.

Usage from node

var liveServer = require("live-server");

var params = {
port: 8181, // Set the server port. Defaults to 8080.
host: "0.0.0.0", // Set the address to bind to. Defaults to 0.0.0.0 or process.env.IP.
root: "/public", // Set root directory that's being served. Defaults to cwd.
open: false, // When false, it won't load your browser by default.
ignore: 'scss,my/templates', // comma-separated string for paths to ignore
file: "index.html", // When set, serve this file (server root relative) for every 404
(useful for single-page applications)
wait: 1000, // Waits for all changes, before reloading. Defaults to 0 sec.
mount: [['/components', './node_modules']], // Mount a directory to a route.
logLevel: 2, // 0 = errors only, 1 = some, 2 = lots
middleware: [function(req, res, next) { next(); }] // Takes an array of Connect-
compatible middleware that are injected into the server middleware
stack};liveServer.start(params);

HTTPS

In order to enable HTTPS support, you’ll need to create a configuration module. The module
must export an object that will be used to configure a HTTPS server. The keys are the same
as the keys in options for tls.createServer.

For example:
var fs = require("fs");
module.exports = {
cert: fs.readFileSync(__dirname + "/server.cert"),
key: fs.readFileSync(__dirname + "/server.key"),
passphrase: "12345"};

If using the node API, you can also directly pass a configuration object instead of a path to
the module.

HTTP/2

To get HTTP/2 support one can provide a custom HTTPS module via --https-module CLI
parameter (httpsModule option for Node.js script). Be sure to install the module first. HTTP/2
unencrypted mode is not supported by browsers, thus not supported by live-server. See this
question and can I use page on HTTP/2 for more details.

For example from CLI(bash):

live-server \
--https=path/to/https.conf.js \
--https-module=spdy \
my-app-folder/

Troubleshooting

 No reload on changes

o Open your browser’s console: there should be a message at the top stating that
live reload is enabled. Note that you will need a browser that supports
WebSockets. If there are errors, deal with them. If it’s still not working, file
an issue.

 Error: watch ENOSPC

o See this suggested solution.

 Reload works but changes are missing or outdated

 o Try using --wait=MS option. Where MS is time in milliseconds to wait before
issuing a reload.

How it works

The server is a simple node app that serves the working directory and its subdirectories. It
also watches the files for changes and when that happens, it sends a message through a web
socket connection to the browser instructing it to reload. In order for the client side to support
this, the server injects a small piece of JavaScript code to each requested html file. This script
establishes the web socket connection and listens to the reload requests. CSS files can be
refreshed without a full page reload by finding the referenced stylesheets from the DOM and
tricking the browser to fetch and parse them again.

Contributing

We welcome contributions! See CONTRIBUTING.md for details.

Version history

 v1.2.1
o --https-module=MODULE_NAME to specify custom HTTPS module
(e.g. spdy) (@pavel)
o --no-css-inject to reload page on css change instead of injecting the changes
(@kylecordes)
o Dependencies updated to get rid of vulnerabilities in deps
 v1.2.0

o Add --middleware parameter to use external middlewares

o middleware API parameter now also accepts strings similar to --middleware
o Changed file watcher to improve speed (@pavel)
o --ignore now accepts regexps and globs, --ignorePattern deprecated (@pavel)
o Added --verbose cli option (logLevel 3) (@pavel)

 Logs all requests, displays warning when can’t inject html file,
displays all listening IPv4 interfaces…
 o HTTPS configuration now also accepts a plain object (@pavel)
o Move --spa to a bundled middleware file
o New bundled spa-no-assets middleware that works like spa but ignores
requests with extension
o Allow multiple --open arguments (@PirtleShell)
o Inject to head if body not found (@pmd1991)
o Update dependencies

 v1.1.0

o Proxy support (@pavel)

o Middleware support (@achandrasekar)
o Dependency updates (@tapio, @rahatarmanahmed)
o Using Travis CI

 v1.0.0

o HTTPS support (@pavel)

o HTTP Basic authentication support (@hey-johnnypark)
o CORS support (@pavel)
o Support mounting single files (@pavel)
o --spa cli option for single page apps, translates requests from /abc to /#/abc
(@evanplaice)
o Check IP env var for default host (@dotnetCarpenter)
o Fix ignorePattern from config file (@cyfersystems)
o Fix test running for Windows (@peterhull90)

 v0.9.2

o Updated most dependencies to latest versions

o --quiet now silences warning about injection failure
o Giving explicit --watch paths now disables adding mounted paths to watching

 v0.9.1

o --ignorePattern=RGXP exclude files from watching by regexp (@psi-4ward)

 o --watch=PATH cli option to only watch given paths

 v0.9.0

o --mount=ROUTE:PATH cli option to specify alternative routes to paths

(@pmentz)
o --browser=BROWSER cli option to specify browser to use (@sakiv)
o Improved error reporting
o Basic support for injecting the reload code to SVG files
(@dotnetCarpenter, @tapio)
o LiveServer.shutdown() function to close down the server and file watchers
o If host parameter is given, use it for browser URL instead of resolved IP
o Initial testing framework (@harrytruong, @evanplaice, @tapio)

 v0.8.2

o Load initial settings from ~/.live-server.json if exists (@mikker)

o Allow --port=0 to select random port (@viqueen)
o Fix injecting when file extension is not lower case (@gusgard)
o Fail gracefully if browser does not support WebSockets (@mattymaloney)
o Switched to a more maintained browser opening library

 v0.8.1

o Add --version / -v command line flags to display version

o Add --host cli option to mirror the API parameter
o Once again use 127.0.0.1 instead of 0.0.0.0 as the browser URL

 v0.8.0

o Support multiple clients simultaneously (@dvv)

o Pick a random available port if the default is in use
(@oliverzy, @harrytruong)
o Fix Chrome sometimes not applying CSS changes (@harrytruong)
 o --ignore=PATH cli option to not watch given server root relative paths
(@richardgoater)
o --entry-file=PATH cli option to specify file to use when request is not found
(@izeau)
o --wait=MSECS cli option to wait specified time before reloading
(@leolower, @harrytruong)

 v0.7.1

o Fix hang caused by trying to inject into fragment html files without </body>
o logLevel parameter in library to control amount of console spam
o --quiet cli option to suppress console spam
o --open=PATH cli option to launch browser in specified path instead of root
(@richardgoater)
o Library’s noBrowser: true option is deprecated in favor of open: false

 v0.7.0

o API BREAKAGE: LiveServer library now takes parameters in an object

o Add possibility to specify host to the lib
o Only inject to host page when working with web components (e.g. Polymer)
(@davej)
o Open browser to 127.0.0.1, as 0.0.0.0 has issues
o --no-browser command line flag to suppress browser launch
o --help command line flag to display usage

 v0.6.4

o Allow specifying port from the command line: live-server --

port=3000 (@Pomax)
o Don’t inject script as the first thing so that DOCTYPE remains valid (@wmira)
o Be more explicit with listening to all interfaces (@inadarei)

 v0.6.3

o Fix multiple _cacheOverride parameters polluting css requests

 o Don’t create global variables in the injected script

 v0.6.2

o Fix a deprecation warning from send

 v0.6.1

o Republish to fix npm troubles

 v0.6.0

o Support for using as node library (@dpgraham)

 v0.5.0

o Watching was broken with new versions of watchr > 2.3.3

o Added some logging to console

 v0.4.0

o Allow specifying directory to serve from command line

 v0.3.0

o Directory listings

 v0.2.0

o On-the-fly CSS refresh (no page reload)

o Refactoring

 v0.1.1

o Documentation and meta tweaks

 v0.1.0

o Initial release
Window.requestAnimationFrame()
The window.requestAnimationFrame() method tells the browser that you wish to perform an
animation and requests that the browser calls a specified function to update an animation
before the next repaint. The method takes a callback as an argument to be invoked before the
repaint.

Note: Your callback routine must itself call requestAnimationFrame() again if you want to

animate another frame at the next repaint. requestAnimationFrame() is 1 shot.

You should call this method whenever you're ready to update your animation onscreen. This
will request that your animation function be called before the browser performs the next
repaint. The number of callbacks is usually 60 times per second, but will generally match the
display refresh rate in most web browsers as per W3C
recommendation. requestAnimationFrame() calls are paused in most browsers when running
in background tabs or hidden <iframe>s in order to improve performance and battery life.

The callback method is passed a single argument, a DOMHighResTimeStamp, which

indicates the current time (based on the number of milliseconds since time origin). When
multiple callbacks queued by requestAnimationFrame() begin to fire in a single frame, each
receives the same timestamp even though time has passed during the computation of every
previous callback's workload (in the code example below we only animate the frame when
the timestamp changes, i.e. on the first callback). This timestamp is a decimal number, in
milliseconds, but with a minimal precision of 1ms (1000 µs).

Parameters
callback

The function to call when it's time to update your animation for the next repaint. The callback
function is passed one single argument, a DOMHighResTimeStamp similar to the one
returned by performance.now(), indicating the point in time
when requestAnimationFrame() starts to execute callback functions.

Return value
A long integer value, the request id, that uniquely identifies the entry in the callback list. This
is a non-zero value, but you may not make any other assumptions about its value. You can
pass this value to window.cancelAnimationFrame() to cancel the refresh callback request.

Animating with requestAnimationFram

When you are creating an animation, it goes without saying that you want your animation to
run smoothly and fluidly when someone is viewing it. If you are using CSS Animations, then
you have nothing to worry about. Your browser takes care of everything for you. If you are
creating your animation using JavaScript, things are a bit different. Instead of the browser
giving you some assistance, you are left on your own. It is up to you to make sure your
animation runs smoothly while at the same time taking into account the various factors that
could affect your animation's performance. Factors such as other things happening on the
page. Factors such as your laptop / phone / tablet going into battery mode and halving its
performance reduced. Factors such as another tab taking focus. You get the point.

Times have changed. Your prayers have been answered. You now have help in the form of
the requestAnimationFrame function that allows you to create smooth and fluid animations in
JavaScript without...you actually having to worry about making it smooth and fluid. Just add
a few calls to requestAnimationFrame and your browser takes care of the rest. That's it.

In case you are still skeptical whether this function will do what I claim, below is an example
of a JavaScript-based animation that I created using requestAnimationFrame:

I'm not using functions like setInterval or setTimeOut to create my animation loop or

anything like that. It's all taken care of by requestAnimationFrame, and in this tutorial, you
will learn all about this magical function and how you can use it to create smooth animations

Meet requestAnimationFrame
Making your animations run smoothly depends on a lot of factors. It depends on what else is
going in your page. It depends on what other animations might be running in parallel. It
depends on whether the user is interacting with the page by clicking or typing. It depends on
what browser you are using and when it decides to repaint or update what is shown on the
screen.
Traditionally, you may have used a function like setInterval or its funnier
cousin setTimeOut to power your animation loop. The problem with these two functions is
simple. They don't understand the subtleties of working with the browser and getting things
to paint at the right time. They have no awareness of what is going on in the rest of the page.
These qualities made them very inefficient when it came to powering animations because
they often request a repaint/update that your browser simply isn't ready to do. You would
often end up with skipped frames and other horrible side effects.

If setInterval and setTimeOut went out on a date, they would probably be heckled quite a bit.

Despite how bad setInterval and setTimeOut were for working with animations, you had no
real alternatives. You had to use them. This lack of better alternatives left animations created
via JavaScript looking a little less polished when compared to animations created in CSS or
via a dedicated runtime like Flash.

Fortunately, things changed. Given how important animations are for creating great looking
applications and sites, the major browser vendors (starting with Mozilla) decided to address
this problem in an elegant way. Instead of burdening you with having to deal with all of the
issues related to creating a smooth animation in JavaScript using setInterval or setTimeOut,
they created a function called requestAnimationFrame that handles all of those issues for you.

What makes requestAnimationFrame so awesome is that it doesn't force the browser to do a repaint that
may never happen. Instead, it asks the browser nicely to call your animation loop when the browser
decides it is time to redraw the screen. This results in no wasted work by your code on screen
updates that never happen. Skipped frames are a thing of the past. Best of all,
because requestAnimationFrame is designed for animations, your browser optimizes the performance to
ensure your animations run smoothly depending on how much system resources you have available,
whether you are running on battery or not, whether you switch away to a different tab, and so on.
Future Scopes and extensions of this project:-

Snake Mania is simple game.in our project will able to implement in future after maing
some changes and modification as we mae our project at a very low level.so the
modification that can be done in our projects are-
1-It canbe made with good graphics.
2-We can add more options like.Top score and player profile

3-We can add multiplayer options.

4-PROBLEM ANALYSIS:
4.1. Product Definition:
A snake game is a simple game where a snake moves around a box trying to eat an food. Once it
successfully eats the apple, the length of the snake increases and the movement becomes faster. Then the
game is over when the snake runs into itself or any of the four walls of the box.

4.2. Project Plan:

The Snake Game is a simple game you can make using the basics of JavaScript and HTML.

Snake is a classic video game from the late 70s. The basic goal is to navigate a snake and eat
as many apples as possible without touching the walls or the snake’s body.
Today, we’ll show you step-by-step how to create this Snake Game using JavaScript and
HTML.

The estimated time period of this project is 30 days. The work is divided into several
phases as shown in Gantt chart. Research will be conducted within 1 st6 days. We are
trying to get familiarized with tools for development of this project in the second
week. The designing, coding and deployment and debugging will be done in following
days. The Documentation and Report will extend throughout the project period.

Stages Duration
(days)
Research 6
Familiarization of Tools 8
Designing 9
Coding 10
Deployment and Testing 5
Documentation and 10
Report

DESIGNING PHASE:

This stage requires better knowledge of designing such as coding. This stage is

estimated to be complete in approximately 9 days.

CODING PHASE:

Most important stage in completion of this project is the coding phase. Once the

design is complete, most of the major decisions about the system have been made.

The goal of the coding phase is to translate the design of the system into code in a

given programming language. For a given design, the aim of this phase is to

implement the design in the best possible manner. The coding phase affects both

testing and maintenance profoundly. A well written code reduces the testing and

maintenance effort. Since the testing and maintenance cost of software are much

higher than the coding cost, the goal of coding should be to reduce the testing and

maintenance effort. Hence, during coding the focus should be on developing

programs that are easy to write. Simplicity and clarity should be strived for, during the

coding phase. This stage can be completed in 10 days.

RESEARCH PHASE:

This stage requires gathering of information and resources about the project from

journals, research papers, etc. This requires preparing of project reports which will

take approximately 6 days

8. IMPLEMENTATION:
8.1. Project Implemention
8.2. SNAP SHOT:
Bibliography:

CONCLUSION
The coding of Snake was extremely difficult with many errors arising. Many systems had to
be written numerous ways before a final working solution was found. For example, two
different movement methods were used prior to final version; however, even the final
version is flawed as vertical movement causes the snake to change scale. There were also
issues with the food – snake collision detection. While the final version resulted in a snake
that could eat food, the movement glitch caused the food to cause further size issues.

REFERENCES
1.  Tieturi 2/1985 ISSN 0780-9778
2. ^ Jump up to:a b Gerard Goggin (2010), Global Mobile Media, Taylor & Francis,
p. 101, ISBN 978-0-415-46917-3, retrieved April 7, 2011
3. ^ Rusel DeMaria & Johnny L. Wilson (2003). High score!: the illustrated history of
electronic games (2 ed.). McGraw-Hill Professional. p. 24. ISBN 0-07-223172-6.
Retrieved April 7, 2011.
4. ^ "Blockade video game, Gremlin Ind, inc. (1976)". Arcade-history.com. April 4,
2008. Archived from the original on June 11, 2011. Retrieved November 4, 2011.
5. ^ Blockade at the Killer List of Videogames
6. ^ Rusel DeMaria & Johnny L. Wilson (2003). High score!: the illustrated history of
electronic games (2 ed.). McGraw-Hill Professional. p. 48. ISBN 0-07-223172-6.
7. ^ "You have 4537 of 4549 known Tandy Radio Shack TRS-80 - Model I
games". Archived from the original on August 12, 2011. Retrieved November 4, 2011.
8. ^ "Retrogaming Times Monthly 7". My.stratos.net. January 1, 2005. Archived
from the original on September 22, 2011. Retrieved November 4, 2011.
9. ^ Gesenhues, Amy (September 27, 2017). "Google's latest Easter Egg is a video game
that shows up with searches for 'snake' & 'play snake'". Search Engine Land.
Retrieved November 1, 2017.
10. ^ More, James (January 20, 2009). "History of Nokia part 2: Snake | Nokia
Conversations - The official Nokia Blog". Conversations.nokia.com. Archived
from the original on July 23, 2011. Retrieved November 4, 2011.
11. ^ "Taneli Armanto: Snake Creator Receives Special
Recognition". Dexigner. Archived from the original on 2 October 2017. Retrieved 6
March 2013.
12. ^ neoncherry (August 12, 2007). "The Unofficial Nokia Gaming Blog: Snakes for S60
Download". Archived from the original on November 1, 2007. Retrieved November
4, 2011.
13. ^ Nokia 3310 relaunched today with new version of Snake, 24 May
2017, archived from the original on 28 June 2017, retrieved 14 June 2017
14. ^ "Top 100 Games of All Time". Next Generation. No. 21. Imagine Media. September
1996. pp. 55–56.
15. ^ "MoMA | Video Games: 14 in the Collection, for Starters". Archived from the
original on September 8, 2015. Retrieved March 24, 2016.