Snake Game With Custom Shape and Colors
Modifying the simple snake game by changing it's colors and shape.
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 var colors = [
70 "#c62828", "#ad1457", "#e91e63", "#f48fb1", "#ce93d8", "#9c27b0", "#6a1b9a", "#4527a0", "#673ab7", "#b39ddb", "#9fa8da", "#3f51b5", "#283593", "#1565c0", "#2196f3", "#90caf9", "#81d4fa", "#03a9f4", "#0277bd", "#00838f", "#00bcd4", "#80deea", "#80cbc4", "#009688", "#00695c", "#2e7d32", "#4caf50", "#a5d6a7", "#c5e1a5", "#8bc34a",
71 "#558b2f", "#9e9d24", "#cddc39", "#e6ee9c", "#fff59d", "#ffeb3b", "#f9a825", "#ff8f00", "#ffc107", "#ffe082", "#ffcc80", "#ff9800", "#ef6c00", "#d84315", "#ff5722", "#ffab91"
72 ]
73
74 const box = document.getElementById("snake")
75 const board = box.getContext("2d")
76
77 const scoreTag = document.getElementById('score')
78 scoreTag.innerText = "Score: "+score
79
80 document.getElementById('level').value = "6"
81
82 document.getElementById('level').addEventListener("change", ChangeSpeed)
83
84 document.getElementById("play").addEventListener("click", StartGame)
85
86 var looping = null
87 GenerateFood()
88
89 document.addEventListener( "keydown", ChangeDirection )
90
91 function InitGame()
92 {
93 snake = [
94 {x: 50, y: 100},
95 {x: 40, y: 100},
96 {x: 30, y: 100},
97 {x: 20, y: 100},
98 {x: 10, y: 100}
99 ]
100 Loop()
101 }
102 InitGame()
103
104 function StartGame()
105 {
106 dx = 10, dy = 0
107 score = 0
108 scoreTag.innerText = "Score: 0"
109 InitGame()
110 looping = setInterval( Loop, 1000 / ( 2*speed ))
111 }
112
113 function Loop()
114 {
115 if( IsGameOver() ) {
116 clearInterval( looping )
117 return
118 }
119 changeDir = false
120 ClearBoard()
121 DrawFood()
122 MoveSnake()
123 DrawSnake()
124 }
125
126 function MoveSnake()
127 {
128 var head = {
129 x: snake[0].x + dx,
130 y: snake[0].y + dy
131 }
132 snake.unshift( head )
133 var hasEatenFood = snake[0].x === food.x && snake[0].y === food.y
134 if( hasEatenFood )
135 {
136 GenerateFood()
137 score += speed
138 scoreTag.innerText = "Score: "+score
139 }
140 else snake.pop()
141 }
142
143 function DrawSnake()
144 {
145 snake.forEach( function( block, i ) {
146 board.beginPath()
147 board.arc( block.x+5, block.y+5, 5, 0, Math.PI*2 )
148 board.fillStyle = colors[i]
149 board.fill()
150 })
151 }
152
153 function ClearBoard()
154 {
155 board.fillStyle = "white"
156 board.strokeStyle = "black"
157 board.fillRect( 0, 0, box.width, box.height )
158 board.strokeRect( 0, 0, box.width, box.height )
159 }
160
161 function IsGameOver()
162 {
163 for( var i=4; i<snake.length; i++)
164 {
165 if(snake[i].x === snake[0].x && snake[i].y === snake[0].y)
166 return true
167 }
168 const lw = snake[0].x < 0
169 const rw = snake[0].x > box.width - 10
170 const tw = snake[0].y < 0
171 const bw = snake[0].y > box.height - 10
172 return lw || rw || tw || bw
173 }
174
175 function ChangeDirection( e )
176 {
177 const lk=37, rk=39, uk=38, dk=40
178
179 if( changeDir ) return
180 changeDir = true
181
182 let k = e.keyCode ? e.keyCode : e
183 let toUp = dy === -10,
184 toDown = dy === 10,
185 toLeft = dx === -10,
186 toRight = dx === 10
187
188 if( k === lk && !toRight ) {
189 dx = -10, dy = 0
190 }
191 if( k === rk && !toLeft ) {
192 dx = 10, dy = 0
193 }
194 if( k === uk && !toDown ) {
195 dx = 0, dy = -10
196 }
197 if( k === dk && !toUp ) {
198 dx = 0, dy = 10
199 }
200 }
201
202 function GenerateFood()
203 {
204 food.x = randPos( 0, box.width - 10 )
205 food.y = randPos( 0, box.height - 10 )
206 snake.forEach( function( block ) {
207 var eaten = block.x == food.x && block.y == food.y
208 if(eaten) GenerateFood()
209 })
210 }
211
212 function randPos(min, max)
213 {
214 return Math.round((Math.random() * (max-min) + min) / 10) * 10
215 }
216
217 function DrawFood()
218 {
219 board.beginPath()
220 board.arc( food.x+5, food.y+5, 5, 0, Math.PI*2 )
221 board.fillStyle = "red"
222 board.fill()
223 }
224
225 function ChangeSpeed()
226 {
227 speed = parseInt(this.value)
228 }
229 </script>
230 </body>
231 </html>
