├── snake.css
├── README.md
├── index.html
└── snake.js
/snake.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: 'Courier New', Courier, monospace;
3 | text-align: center;
4 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # [Snake](https://youtu.be/baBq5GAL0_U)
2 | - Coding Tutorial: https://youtu.be/baBq5GAL0_U
3 | - Demo: https://imkennyyip.github.io/snake/
4 |
5 | In this tutorial, you will learn how to create Snake game from scratch using HTML5 canvas and javascript.
6 |
7 | 
8 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Snake
7 |
8 |
9 |
10 |
11 |
12 | Snake
13 |
14 |
15 |
--------------------------------------------------------------------------------
/snake.js:
--------------------------------------------------------------------------------
1 |
2 | //board
3 | var blockSize = 25;
4 | var rows = 20;
5 | var cols = 20;
6 | var board;
7 | var context;
8 |
9 | //snake head
10 | var snakeX = blockSize * 5;
11 | var snakeY = blockSize * 5;
12 |
13 | var velocityX = 0;
14 | var velocityY = 0;
15 |
16 | var snakeBody = [];
17 |
18 | //food
19 | var foodX;
20 | var foodY;
21 |
22 | var gameOver = false;
23 |
24 | window.onload = function() {
25 | board = document.getElementById("board");
26 | board.height = rows * blockSize;
27 | board.width = cols * blockSize;
28 | context = board.getContext("2d"); //used for drawing on the board
29 |
30 | placeFood();
31 | document.addEventListener("keyup", changeDirection);
32 | // update();
33 | setInterval(update, 1000/10); //100 milliseconds
34 | }
35 |
36 | function update() {
37 | if (gameOver) {
38 | return;
39 | }
40 |
41 | context.fillStyle="black";
42 | context.fillRect(0, 0, board.width, board.height);
43 |
44 | context.fillStyle="red";
45 | context.fillRect(foodX, foodY, blockSize, blockSize);
46 |
47 | if (snakeX == foodX && snakeY == foodY) {
48 | snakeBody.push([foodX, foodY]);
49 | placeFood();
50 | }
51 |
52 | for (let i = snakeBody.length-1; i > 0; i--) {
53 | snakeBody[i] = snakeBody[i-1];
54 | }
55 | if (snakeBody.length) {
56 | snakeBody[0] = [snakeX, snakeY];
57 | }
58 |
59 | context.fillStyle="lime";
60 | snakeX += velocityX * blockSize;
61 | snakeY += velocityY * blockSize;
62 | context.fillRect(snakeX, snakeY, blockSize, blockSize);
63 | for (let i = 0; i < snakeBody.length; i++) {
64 | context.fillRect(snakeBody[i][0], snakeBody[i][1], blockSize, blockSize);
65 | }
66 |
67 | //game over conditions
68 | if (snakeX < 0 || snakeX > cols*blockSize || snakeY < 0 || snakeY > rows*blockSize) {
69 | gameOver = true;
70 | alert("Game Over");
71 | }
72 |
73 | for (let i = 0; i < snakeBody.length; i++) {
74 | if (snakeX == snakeBody[i][0] && snakeY == snakeBody[i][1]) {
75 | gameOver = true;
76 | alert("Game Over");
77 | }
78 | }
79 | }
80 |
81 | function changeDirection(e) {
82 | if (e.code == "ArrowUp" && velocityY != 1) {
83 | velocityX = 0;
84 | velocityY = -1;
85 | }
86 | else if (e.code == "ArrowDown" && velocityY != -1) {
87 | velocityX = 0;
88 | velocityY = 1;
89 | }
90 | else if (e.code == "ArrowLeft" && velocityX != 1) {
91 | velocityX = -1;
92 | velocityY = 0;
93 | }
94 | else if (e.code == "ArrowRight" && velocityX != -1) {
95 | velocityX = 1;
96 | velocityY = 0;
97 | }
98 | }
99 |
100 |
101 | function placeFood() {
102 | //(0-1) * cols -> (0-19.9999) -> (0-19) * 25
103 | foodX = Math.floor(Math.random() * cols) * blockSize;
104 | foodY = Math.floor(Math.random() * rows) * blockSize;
105 | }
--------------------------------------------------------------------------------