Snake Game
Javascript version of the classic Snake Game
The classic version
HTML
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <title>Snake Game</title>
5 <style>
6 .snake-container {
7 width: 100%;
8 display: flex;
9 justify-content: center;
10 }
11 .container {
12 margin-top: 20px;
13 width: 100%;
14 display: flex;
15 justify-content: center;
16 }
17 .evenly {
18 justify-content: space-evenly;
19 }
20 .container button {
21 padding: 16px 20px;
22 border: none;
23 border-radius: 8px;
24 }
25 .container button:focus {
26 outline: none;
27 background-color: #e0e0ee;
28 }
29 </style>
30 </head>
31 <body>
32 Level
33 <select id="level">
34 <option value="1">1</option>
35 <option value="2">2</option>
36 <option value="3">3</option>
37 <option value="4">4</option>
38 <option value="5">5</option>
39 <option value="6">6</option>
40 <option value="7">7</option>
41 <option value="8">8</option>
42 <option value="9">9</option>
43 <option value="10">10</option>
44 </select>
45 <button id="play">Play</button>
46 <p id="score">Score: 0</p>
47
48 <div class="snake-container">
49 <canvas id="snake" width="200" height="200"></canvas>
50 </div>
51
52 <div class="container">
53 <button onclick="ChangeDirection(38)">UP</button>
54 </div>
55 <div class="container evenly">
56 <button onclick="ChangeDirection(37)">LEFT</button>
57 <button onclick="ChangeDirection(39)">RIGHT</button>
58 </div>
59 <div class="container">
60 <button onclick="ChangeDirection(40)">DOWN</button>
61 </div>
62
63 <script>
64 var snake = []
65 var changeDir = false
66 var food = {}
67 var dx = 10, dy = 0
68 var speed = 6, score = 0
69
70 const box = document.getElementById("snake")
71 const board = box.getContext("2d")
72
73 const scoreTag = document.getElementById('score')
74 scoreTag.innerText = "Score: "+score
75
76 document.getElementById('level').value = "6"
77
78 document.getElementById('level').addEventListener("change", ChangeSpeed)
79
80 document.getElementById("play").addEventListener("click", StartGame)
81
82 var looping = null
83 GenerateFood()
84
85 document.addEventListener( "keydown", ChangeDirection )
86
87 function InitGame()
88 {
89 snake = [
90 {x: 50, y: 100},
91 {x: 40, y: 100},
92 {x: 30, y: 100},
93 {x: 20, y: 100},
94 {x: 10, y: 100}
95 ]
96 Loop()
97 }
98 InitGame()
99
100 function StartGame()
101 {
102 dx = 10, dy = 0
103 score = 0
104 scoreTag.innerText = "Score: 0"
105 InitGame()
106 looping = setInterval( Loop, 1000 / ( 2*speed ))
107 }
108
109 function Loop()
110 {
111 if( IsGameOver() ) {
112 clearInterval( looping )
113 return
114 }
115 changeDir = false
116 ClearBoard()
117 DrawFood()
118 MoveSnake()
119 DrawSnake()
120 }
121
122 function MoveSnake()
123 {
124 var head = {
125 x: snake[0].x + dx,
126 y: snake[0].y + dy
127 }
128 snake.unshift( head )
129 var hasEatenFood = snake[0].x === food.x && snake[0].y === food.y
130 if( hasEatenFood )
131 {
132 GenerateFood()
133 score += speed
134 scoreTag.innerText = "Score: "+score
135 }
136 else snake.pop()
137 }
138
139 function DrawSnake()
140 {
141 snake.forEach( function( block ) {
142 board.fillStyle = "black"
143 board.strokeStyle = "gray"
144 board.fillRect( block.x, block.y, 10, 10 )
145 board.strokeRect( block.x, block.y, 10, 10 )
146 })
147 }
148
149 function ClearBoard()
150 {
151 board.fillStyle = "white"
152 board.strokeStyle = "black"
153 board.fillRect( 0, 0, box.width, box.height )
154 board.strokeRect( 0, 0, box.width, box.height )
155 }
156
157 function IsGameOver()
158 {
159 for( var i=4; i<snake.length; i++)
160 {
161 if(snake[i].x === snake[0].x && snake[i].y === snake[0].y)
162 return true
163 }
164 const lw = snake[0].x < 0
165 const rw = snake[0].x > box.width - 10
166 const tw = snake[0].y < 0
167 const bw = snake[0].y > box.height - 10
168 return lw || rw || tw || bw
169 }
170
171 function ChangeDirection( e )
172 {
173 const lk=37, rk=39, uk=38, dk=40
174
175 if( changeDir ) return
176 changeDir = true
177
178 let k = e.keyCode ? e.keyCode : e
179 let toUp = dy === -10,
180 toDown = dy === 10,
181 toLeft = dx === -10,
182 toRight = dx === 10
183
184 if( k === lk && !toRight ) {
185 dx = -10, dy = 0
186 }
187 if( k === rk && !toLeft ) {
188 dx = 10, dy = 0
189 }
190 if( k === uk && !toDown ) {
191 dx = 0, dy = -10
192 }
193 if( k === dk && !toUp ) {
194 dx = 0, dy = 10
195 }
196 }
197
198 function GenerateFood()
199 {
200 food.x = randPos( 0, box.width - 10 )
201 food.y = randPos( 0, box.height - 10 )
202 snake.forEach( function( block ) {
203 var eaten = block.x == food.x && block.y == food.y
204 if(eaten) GenerateFood()
205 })
206 }
207
208 function randPos(min, max)
209 {
210 return Math.round((Math.random() * (max-min) + min) / 10) * 10
211 }
212
213 function DrawFood()
214 {
215 board.fillStyle = "red"
216 board.strokeStyle = "red"
217 board.fillRect( food.x, food.y, 10, 10 )
218 board.strokeRect( food.x, food.y, 10, 10 )
219 }
220
221 function ChangeSpeed()
222 {
223 speed = parseInt(this.value)
224 }
225 </script>
226 </body>
227 </html>
