├── README.md ├── audio ├── dead.mp3 ├── down.mp3 ├── eat.mp3 ├── left.mp3 ├── right.mp3 └── up.mp3 ├── img ├── food.png └── ground.png ├── index.html ├── snake.js └── snakeGame - starter template.rar /README.md: -------------------------------------------------------------------------------- 1 | # Snake-JavaScript 2 | 3 | The Snake game, created using JavaScript, and The HTML5 canvas. 4 | 5 | Download the starter template, and follow the tutorial on youtube step by step. 6 | 7 | Tutorial link : https://youtu.be/9TcU2C1AACw 8 | -------------------------------------------------------------------------------- /audio/dead.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/Snake-JavaScript/987a9f4bf330497f4d36e0199c6c64ca9ceb49cd/audio/dead.mp3 -------------------------------------------------------------------------------- /audio/down.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/Snake-JavaScript/987a9f4bf330497f4d36e0199c6c64ca9ceb49cd/audio/down.mp3 -------------------------------------------------------------------------------- /audio/eat.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/Snake-JavaScript/987a9f4bf330497f4d36e0199c6c64ca9ceb49cd/audio/eat.mp3 -------------------------------------------------------------------------------- /audio/left.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/Snake-JavaScript/987a9f4bf330497f4d36e0199c6c64ca9ceb49cd/audio/left.mp3 -------------------------------------------------------------------------------- /audio/right.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/Snake-JavaScript/987a9f4bf330497f4d36e0199c6c64ca9ceb49cd/audio/right.mp3 -------------------------------------------------------------------------------- /audio/up.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/Snake-JavaScript/987a9f4bf330497f4d36e0199c6c64ca9ceb49cd/audio/up.mp3 -------------------------------------------------------------------------------- /img/food.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/Snake-JavaScript/987a9f4bf330497f4d36e0199c6c64ca9ceb49cd/img/food.png -------------------------------------------------------------------------------- /img/ground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/Snake-JavaScript/987a9f4bf330497f4d36e0199c6c64ca9ceb49cd/img/ground.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Snake Game 4 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /snake.js: -------------------------------------------------------------------------------- 1 | /* 2 | Create by Learn Web Developement 3 | Youtube channel : https://www.youtube.com/channel/UC8n8ftV94ZU_DJLOLtrpORA 4 | */ 5 | 6 | const cvs = document.getElementById("snake"); 7 | const ctx = cvs.getContext("2d"); 8 | 9 | // create the unit 10 | const box = 32; 11 | 12 | // load images 13 | 14 | const ground = new Image(); 15 | ground.src = "img/ground.png"; 16 | 17 | const foodImg = new Image(); 18 | foodImg.src = "img/food.png"; 19 | 20 | // load audio files 21 | 22 | let dead = new Audio(); 23 | let eat = new Audio(); 24 | let up = new Audio(); 25 | let right = new Audio(); 26 | let left = new Audio(); 27 | let down = new Audio(); 28 | 29 | dead.src = "audio/dead.mp3"; 30 | eat.src = "audio/eat.mp3"; 31 | up.src = "audio/up.mp3"; 32 | right.src = "audio/right.mp3"; 33 | left.src = "audio/left.mp3"; 34 | down.src = "audio/down.mp3"; 35 | 36 | // create the snake 37 | 38 | let snake = []; 39 | 40 | snake[0] = { 41 | x : 9 * box, 42 | y : 10 * box 43 | }; 44 | 45 | // create the food 46 | 47 | let food = { 48 | x : Math.floor(Math.random()*17+1) * box, 49 | y : Math.floor(Math.random()*15+3) * box 50 | } 51 | 52 | // create the score var 53 | 54 | let score = 0; 55 | 56 | //control the snake 57 | 58 | let d; 59 | 60 | document.addEventListener("keydown",direction); 61 | 62 | function direction(event){ 63 | let key = event.keyCode; 64 | if( key == 37 && d != "RIGHT"){ 65 | left.play(); 66 | d = "LEFT"; 67 | }else if(key == 38 && d != "DOWN"){ 68 | d = "UP"; 69 | up.play(); 70 | }else if(key == 39 && d != "LEFT"){ 71 | d = "RIGHT"; 72 | right.play(); 73 | }else if(key == 40 && d != "UP"){ 74 | d = "DOWN"; 75 | down.play(); 76 | } 77 | } 78 | 79 | // cheack collision function 80 | function collision(head,array){ 81 | for(let i = 0; i < array.length; i++){ 82 | if(head.x == array[i].x && head.y == array[i].y){ 83 | return true; 84 | } 85 | } 86 | return false; 87 | } 88 | 89 | // draw everything to the canvas 90 | 91 | function draw(){ 92 | 93 | ctx.drawImage(ground,0,0); 94 | 95 | for( let i = 0; i < snake.length ; i++){ 96 | ctx.fillStyle = ( i == 0 )? "green" : "white"; 97 | ctx.fillRect(snake[i].x,snake[i].y,box,box); 98 | 99 | ctx.strokeStyle = "red"; 100 | ctx.strokeRect(snake[i].x,snake[i].y,box,box); 101 | } 102 | 103 | ctx.drawImage(foodImg, food.x, food.y); 104 | 105 | // old head position 106 | let snakeX = snake[0].x; 107 | let snakeY = snake[0].y; 108 | 109 | // which direction 110 | if( d == "LEFT") snakeX -= box; 111 | if( d == "UP") snakeY -= box; 112 | if( d == "RIGHT") snakeX += box; 113 | if( d == "DOWN") snakeY += box; 114 | 115 | // if the snake eats the food 116 | if(snakeX == food.x && snakeY == food.y){ 117 | score++; 118 | eat.play(); 119 | food = { 120 | x : Math.floor(Math.random()*17+1) * box, 121 | y : Math.floor(Math.random()*15+3) * box 122 | } 123 | // we don't remove the tail 124 | }else{ 125 | // remove the tail 126 | snake.pop(); 127 | } 128 | 129 | // add new Head 130 | 131 | let newHead = { 132 | x : snakeX, 133 | y : snakeY 134 | } 135 | 136 | // game over 137 | 138 | if(snakeX < box || snakeX > 17 * box || snakeY < 3*box || snakeY > 17*box || collision(newHead,snake)){ 139 | clearInterval(game); 140 | dead.play(); 141 | } 142 | 143 | snake.unshift(newHead); 144 | 145 | ctx.fillStyle = "white"; 146 | ctx.font = "45px Changa one"; 147 | ctx.fillText(score,2*box,1.6*box); 148 | } 149 | 150 | // call draw function every 100 ms 151 | 152 | let game = setInterval(draw,100); 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | -------------------------------------------------------------------------------- /snakeGame - starter template.rar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/Snake-JavaScript/987a9f4bf330497f4d36e0199c6c64ca9ceb49cd/snakeGame - starter template.rar --------------------------------------------------------------------------------