Creating A Very Simple Snake Game Using jQuery

Alwen89 · Feb 27, 2025

In this tutorial we will try to make a very simple game called Snake. Snake is the most popular games in the late 1997 that comes from the Nokia 6110 Phone. This game become a favorite past time for all of us a long time ago, even our grand parents played this awesome game. So for today we will try to replicate the game, but this time we will create it through HTML & jQuery Script. Let's get started. Before we proceed I hope that you already have the jQuery plugin, if there's not I already attached the jQuery plugin inside the zip file.

The Mark Up
The very first step is we're going to create the mark up. This page will display the game through the web browser. To create the file open any kind of text editor(notepad++, etc) then copy/paste the code that I provided below.

<!DOCTYPE html>
<html

lang

=

"en"

>
<head

>
<title

>

Snake Game</

title

>
<link

rel

=

"stylesheet"

type

=

"text/css"

href

=

"css/bootstrap.css"

/

>
<meta

charset

=

"UTF-=8"

name

=

"viewport"

content

=

"width=device-width, initial-scale=1"

/

>
</

head

>
<body

>
<nav class

=

"navbar navbar-default"

>
<div

class

=

"container-fluid"

>
<a

class

=

"navbar-brand"

href

=

"https://sourcecodester.com"

>

Sourcecodester</

a

>
</

div

>
</

nav>
<div

class

=

"col-md-3"

></

div

>
<div

class

=

"col-md-6 well"

>
<h3

class

=

"text-primary"

>

Creating A Simple Snake Game</

h3

>
<hr

style

=

"bolder-top:1px dotted #000;"

/

>
<center

><canvas id

=

"canvas"

width

=

"450"

height

=

"400"

></

canvas</

center

>

//this is where the game will be display
</

div

>
</

body

>
<script

src

=

"js/jquery-3.1.1.js"

></

script

>
<script

src

=

"js/snake.js"

></

script

>
</

html

>

Save & name it 'index.html'

Creating the snake
The next step is we're going to create the snake, open your text editor and copy/paste this script.

$(

document)

.ready

(

function

(

)

{
var

canvas =

$(

'#canvas'

)

[

0

]

;
var

context =

canvas.getContext

(

'2d'

)

;
var

width =

$(

'#canvas'

)

.width

(

)

;
var

height =

$(

'#canvas'

)

.height

(

)

;
var

cell_width =

10

;
var

run;
var

snake_food;
var

score;
var

snake_array;
function

create_snake(

)

{
var

snake_size =

3

;

//the size of the snake is 3
snake_array =

[

]

;

//creating the array of snake
for

(

var

m =

0

;

m <

snake_size;

m++

)

{
snake_array.push

(

{

x:

45

,

y:

14

}

)

;

//this will handle the position of the snake
}
}
}

)

;

Save this file and name it 'snake.js'

Creating the snake food
After creating the body of snake, we will now create the food of the snake. Just add this script inside the javascript code

function

create_food(

)

{
snake_food =

{
x:

Math

.round

(

Math

.random

(

)

*

(

width -

cell_width)

/

cell_width)

,

//this will display the food randomly based on the x and y ordinates of the canvas
y:

Math

.round

(

Math

.random

(

)

*

(

height -

cell_width)

/

cell_width)
}

;
}

Creating the stage of the game
This will be the background of the game, just simply add this script to your javascript code.

function

stage_color(

)

{
context.fillStyle

=

"orange"

;
context.fillRect

(

0

,

0

,

width,

height)

;
context.strokeStyle

=

"#000000"

;
context.strokeRect

(

0

,

0

,

width,

height)

;
}

Adding the sprite of the snake
This will be the sprite of the snake. Just simply add the script to your javascript code

function

snake_body(

x,

y)

{
context.fillStyle

=

"#ffffff"

;
context.fillRect

(

x *

cell_width,

y *

cell_width,

cell_width,

cell_width)

;
context.strokeStyle

=

"#000000"

;
context.strokeRect

(

x *

cell_width,

y *

cell_width,

cell_width,

cell_width)

;
}

Creating the collision of object to object
This will handle the collision of the snake when it hit its own body.

function

collision(

x,

y,

array)

{
for

(

var

i =

0

;

i <

array.length

;

i++

)

{
if

(

array[

i]

.x

==

x &&

array[

i]

.y

==

y)

{

//this will check if the snake hit its own body, and will return true
return

true

;
}
}
return

false

;

//if not return false
}

Creating the movement of snake
This will be the handler for the movement of the snake within the game.

$(

document)

.keydown

(

function

(

e)

{
var

key =

e.which

;
if

(

key ==

"40"

&&

run !=

"up"

)

{

//check if the key you pressed is arrow down
run =

"down"

;

//return the string down
}
else

if

(

key ==

"39"

&&

run !=

"left"

)

{

//check if the key you pressed is arrow right
run =

"right"

;

//return the string right
}
else

if

(

key ==

"38"

&&

run !=

"down"

)

{

//check if the key you pressed is arrow up
run =

"up"

;

//return the string up
}
else

if

(

key ==

"37"

&&

run !=

"right"

)

{

//check if the key you pressed is arrow left
run =

"left"

;

return

the string left
}
}

)

;

Creating the config of the game
This will handle the logic of the game on how the food will be eaten by the snake, and then make its body increase.

function

config(

)

{
stage_color(

)

;

//display the stage of the game
var

pop_x =

snake_array[

0

]

.x

;

//assigned the x ordinate of the canvas
var

pop_y =

snake_array[

0

]

.y

;

// assigned the y ordinate of the canvas
switch

(

run)

{

//check the variable run
case

"right"

:

//if run == right
pop_x++;

//the movement of the snake will be right
break

;
case

"left"

:

//if run == left
pop_x--;

//the movement of the snake will be left
break

;
case

"down"

:

//if run == down
pop_y++;

//the movement of the snake will be down
break

;
case

"up"

:

//if run == up
pop_y--;

//the movement of the snake will be up
break

;
}
if

(

pop_x ==

-

1

||

pop_x ==

width /

cell_width ||

pop_y ==

-

1

||

pop_y ==

height /

cell_width ||

collision(

pop_x,

pop_y,

snake_array)

)

{

//check if the snake collide within the boundary of the canvas or the snake collide with its own body
start(

)

;

//if true the game will restart
return

;
}
if

(

pop_x ==

snake_food.x

&&

pop_y ==

snake_food.y

)

{

//check if the snake collide with the food
var

snake_tail =

{

x:

pop_x,

y:

pop_y}

;

//if true assign the variable for the snake tail
score +=

3

;

//add a score
create_food(

)

;

//create another food randomly
}

else

{
var

snake_tail =

snake_array.pop

(

)

;

/

if

false

will create the variable for

the snake tail
snake_tail.x

=

pop_x;

//assign variable for the x ordinate of snake
snake_tail.y

=

pop_y;

//assign variable for the y ordinate of snake
}
snake_array.unshift

(

snake_tail)

;

//if the condition is true it will add the value of the food inside the snake_array
for

(

var

i =

0

;

i <

snake_array.length

;

i++

)

{

//if there's a new valued inside the snake_array it will increment
var

c =

snake_array[

i]

;

//assigned the incremented valued
snake_body(

c.x

,

c.y

)

;

//then will increase the size of the snake
}
snake_body(

snake_food.x

,

snake_food.y

)

;

//increase the snake body in the correct position
var

score_text =

"Score: "

+

score;

//assign the variable of score
context.fillText

(

score_text,

5

,

10

)

;

//display the score
}

Creating the configuration of the game
This will handle the initialize of the game

start(

)

;

//this will start running the game
function

start(

)

{
run =

"left"

;

// this is the default movement of the snake
create_snake(

)

;

//will create the food
create_food(

)

;

//will create the snake
score =

0

;

//display the default score
if

(

typeof

game_start !=

"undefined"

)

clearInterval(

game_start)

;

//check if the loop of the game is undefined and initialize the game simultaneously
game_start =

setInterval(

config,

60

)

;

//this the fps of the game when running
}

This is the full code of the snake.js

$(

document)

.ready

(

function

(

)

{
var

canvas =

$(

'#canvas'

)

[

0

]

;
var

context =

canvas.getContext

(

'2d'

)

;
var

width =

$(

'#canvas'

)

.width

(

)

;
var

height =

$(

'#canvas'

)

.height

(

)

;
var

cell_width =

10

;
var

run;
var

snake_food;
var

score;
var

snake_array;
function

create_snake(

)

{
var

snake_size =

3

;
snake_array =

[

]

;
for

(

var

m =

0

;

m <

snake_size;

m++

)

{
snake_array.push

(

{

x:

45

,

y:

14

}

)

;
}
}
function

create_food(

)

{
snake_food =

{
x:

Math

.round

(

Math

.random

(

)

*

(

width -

cell_width)

/

cell_width)

,
y:

Math

.round

(

Math

.random

(

)

*

(

height -

cell_width)

/

cell_width)
}

;
}
function

config(

)

{
stage_color(

)

;
var

pop_x =

snake_array[

0

]

.x

;
var

pop_y =

snake_array[

0

]

.y

;
switch

(

run)

{
case

"right"

:
pop_x++;
break

;
case

"left"

:
pop_x--;
break

;
case

"down"

:
pop_y++;
break

;
case

"up"

:
pop_y--;
break

;
}
if

(

pop_x ==

-

1

||

pop_x ==

width /

cell_width ||

pop_y ==

-

1

||

pop_y ==

height /

cell_width ||

collision(

pop_x,

pop_y,

snake_array)

)

{
start(

)

;
return

;
}
if

(

pop_x ==

snake_food.x

&&

pop_y ==

snake_food.y

)

{
var

snake_tail =

{

x:

pop_x,

y:

pop_y}

;
score +=

3

;
create_food(

)

;
}

else

{
var

snake_tail =

snake_array.pop

(

)

;
snake_tail.x

=

pop_x;
snake_tail.y

=

pop_y;
}
snake_array.unshift

(

snake_tail)

;
for

(

var

i =

0

;

i <

snake_array.length

;

i++

)

{
var

c =

snake_array[

i]

;
snake_body(

c.x

,

c.y

)

;
}
snake_body(

snake_food.x

,

snake_food.y

)

;
var

score_text =

"Score: "

+

score;
var

title =

"Sourcecodester"
context.fillText

(

score_text,

5

,

10

)

;
context.fillText

(

title,

0

,

height-

2

)

;
}
function

stage_color(

)

{
context.fillStyle

=

"orange"

;
context.fillRect

(

0

,

0

,

width,

height)

;
context.strokeStyle

=

"#000000"

;
context.strokeRect

(

0

,

0

,

width,

height)

;
}
function

snake_body(

x,

y)

{
context.fillStyle

=

"#ffffff"

;
context.fillRect

(

x *

cell_width,

y *

cell_width,

cell_width,

cell_width)

;
context.strokeStyle

=

"#000000"

;
context.strokeRect

(

x *

cell_width,

y *

cell_width,

cell_width,

cell_width)

;
}
function

collision(

x,

y,

array)

{
for

(

var

i =

0

;

i <

array.length

;

i++

)

{
if

(

array[

i]

.x

==

x &&

array[

i]

.y

==

y)

{
return

true

;
}
}
return

false

;
}
$(

document)

.keydown

(

function

(

e)

{
var

key =

e.which

;
if

(

key ==

"40"

&&

run !=

"up"

)

{
run =

"down"

;
}
else

if

(

key ==

"39"

&&

run !=

"left"

)

{
run =

"right"

;
}
else

if

(

key ==

"38"

&&

run !=

"down"

)

{
run =

"up"

;
}
else

if

(

key ==

"37"

&&

run !=

"right"

)

{
run =

"left"

;
}
}

)

;
start(

)

;
function

start(

)

{
run =

"left"

;
create_snake(

)

;
create_food(

)

;
score =

0

;
if

(

typeof

game_start !=

"undefined"

)

clearInterval(

game_start)

;
game_start =

setInterval(

config,

60

)

;
}
}

)

;

There you have it we create a simple snake game. I hope that this tutorial help you to your programming carrier, and enhance your skill on looping. For more updates and tutorials just kindly visit this site. Enjoy Coding!!

Download

You must upgrade your account or reply in the thread to view the hidden content.

Creating A Very Simple Snake Game Using jQuery

More options

Alwen89

452,512

356,407

356,429