Snake Game: Used HTML & Css Project Report With Source Code
Snake Game: Used HTML & Css Project Report With Source Code
Project Report On
“Snake Game”
Govt. of Maharashtra
(2023-2024)
COMPUTER DEPARTMENT
“Snake Game”
Sr.No Group Member Enrollment No
Date: / / .
INDEX
Sr. Topics
No.
1 Acknowledgement
2 Abstract
3 Introduction
4 Literature Survey
5 System Design
6 System & Hardware
Requirements
7 Functional Requirements
8 Non-Functional
Requirments
9 Working Alogorithm
10 Source code
11 Sample Outputs
12 Conclusion
13 Future Scope
Acknowledgement
We would take this opportunity to express my sincere
thanks and gratitude to my teacher Mrs. Darode S.S. for his
vital support and guidance in completing this project.
To move the snake, use ‘up arrow' for up, 'down arrow'
for down, 'left arrow' for left and 'right arrow' for right.
Press 'Q' to exit the game at any time, press 'C' to continue
the game.
The aim of the game is to collect the dots (food) and avoid
the obstacles (crosses borders). As you collect the food,
the snake gets longer. The score also increases. There is no
concept of lives. Once you hit an obstacle, that's it, game
over.
LITERATURE SURVEY
The history of the Snake game goes back to the 1970's,
the concept originated in the 1976 arcade game Blockade,
and its simplicity has led to many implementations.
However, it was the 1980'swhen 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 first
published Nokia, for monochrome phones. It was
programmed in 1997 by Taneli Armanto of Nokia and
introduced on the Nokia 6110.The game involves
controlling a single block or snakehead by turning only left
or right by ninety degrees until you manage to eat an
block. When you get the block, the Snake grows an extra
block or body segment. If, or rather when, he snake bumps
into the edge other screen or accidentally eats himself the
game is over. The more blocks the snake eats the higher
the score.
SYSTEM DESIGN
To create a Snake game that allows users to control the
movement of a snake on a screen, to get points for eating
food and avoiding running into the walls or the growing
tail of the snake itself. In this problem, we want to write a
game where a graphical representation of a snake moves
across the screen.
SYSTEM REQUIREMENTS
HARDWARE REQUIREMENTS
Intel P4 1.5GHz or above
512MB RAM
I. Robustness:
II. Reliability:
IV. Reusability:
V. Effectiveness:
<head>
<meta charset="UTF-8">
<style>
html, body {
height: 100%;
margin: 0;
body {
background: Green;
display: flex;
align-items: center;
justify-content: center;
}
canvas {
</style>
</head>
<body>
<script>
// the canvas width & height, snake x & y, and the apple x &
y, all need to be a multiples of the grid size in order for
collision detection to work
// (e.g. 16 * 25 = 400)
var count = 0;
var snake = {
x: 160,
y: 160,
dx: grid,
dy: 0,
cells:[],
maxCells: 4
};
var apple = {
x: 320,
y: 320
};
// @see https://stackoverflow.com/a/1527820/2124254
// game loop
function loop() {
requestAnimationFrame(loop);
if (++count < 4) {
return;
}
count = 0;
context.clearRect(0,0,canvas.width,canvas.height);
snake.x += snake.dx;
snake.y += snake.dy;
if (snake.x < 0) {
snake.x = 0;
}
// wrap snake position vertically on edge of screen
if (snake.y < 0) {
snake.y = 0;
snake.cells.pop();
}
// draw apple
context.fillStyle = 'red';
context.fillStyle = 'Yellow';
snake.cells.forEach(function(cell, index) {
snake.maxCells++;
snake.x = 160;
snake.y = 160;
snake.cells = [];
snake.maxCells = 4;
snake.dx = grid;
snake.dy = 0;
apple.x = getRandomInt(0, 25) * grid;
});
document.addEventListener('keydown', function(e) {
snake.dx = -grid;
snake.dy = 0;
// up arrow key
snake.dy = -grid;
snake.dx = 0;
snake.dx = grid;
snake.dy = 0;
snake.dx = 0;
});
requestAnimationFrame(loop);
</script>
</body>
</html>
SAMPLE OUTPUTS
CONCLUSION
1) https://data-flair.training/blogs/snake-game-python-
program/
References:
✓Class Lecture
✓https://www.youtube.com/watch?v=rFFVyNn9 8A
✓http://www.c
sharpcorner.com/UploadFile/@salve/snake-game-
application-in-C-Sharp/
✓http://www.dreamincode.net/forums/topic/243537-
control-issue- with-snake-game-in-c%23/
✓http://csharp.net-
informations.com/communications/csharp-chat-
client.html