1. var ctx = null;
2.  
3. var gameTime = 0, lastFrameTime = 0;
4. var currentSecond = 0, frameCount = 0, framesLastSecond = 0;
5. var showFramerate = false;
6.  
7. var offsetX = 0;
8. var offsetY = 0;
9.  
10. var mouseState = {
11.         x       : 0,
12.         y       : 0,
13.         click   : null
14. };
15.  
16. var gameState = {
17.         screen          : 'menu',
18.        
19.         dir             : 0,
20.         moveDelay       : 300,
21.         lastMove        : 0,
22.        
23.         snake           : [],
24.         newBlock        : null,
25.        
26.         mapW            : 14,
27.         mapH            : 14,
28.         tileW           : 20,
29.         tileH           : 20,
30.        
31.         score           : 0,
32.         newBest         : false,
33.         bestScore       : 0
34. };
35.  
36. function startGame()
37. {
38.         gameTime        = 0;
39.         lastFrameTime   = 0;
40.  
41.         gameState.snake.length  = 0;
42.         gameState.dir           = 0;
43.         gameState.score         = 0;
44.         gameState.lastMove      = 0;
45.         gameState.screen        = 'playing';
46.         gameState.newBest       = false;
47.  
48.         gameState.snake.push([
49.                 Math.floor(gameState.mapW / 2),
50.                 Math.floor(gameState.mapH / 2)
51.         ]);
52.  
53.         placeNewBlock();
54. }
55.  
56. function placeNewBlock()
57. {
58.         do {
59.                 var x = Math.floor(Math.random() * gameState.mapW);
60.                 var y = Math.floor(Math.random() * gameState.mapH);
61.                
62.                 var onSnake = false;
63.                
64.                 for(var s in gameState.snake)
65.                 {
66.                         if(gameState.snake[s][0]==x &&
67.                                 gameState.snake[s][1]==y)
68.                         {
69.                                 onSnake = true;
70.                                 break;
71.                         }
72.                 }
73.                
74.                 if(!onSnake)
75.                 {
76.                         gameState.newBlock = [x, y];
77.                         break;
78.                 }
79.  
80.         } while(true);
81. }
82.  
83. function updateGame()
84. {
85.        
86.         if(gameState.screen=='menu')
87.         {
88.                 if(mouseState.click!=null)
89.                 {
90.                         if(mouseState.click[1] >= 150 &&
91.                                 mouseState.click[1]<= 220)
92.                         {
93.                                 startGame();
94.                         }
95.                 }
96.  
97.                 mouseState.click = null;
98.         }
99.         else if(gameState.screen=='playing')
100.         {
101.                 if((gameTime - gameState.lastMove) < gameState.moveDelay)
102.                 {
103.                         return;
104.                 }
105.  
106.                 var tmp = gameState.snake[0];
107.                 var head = [tmp[0], tmp[1]];
108.                 var dir = gameState.dir;
109.  
110.                 if(dir==0 && head[1]==0) { gameOver(); }
111.                 else if(dir==2 && head[1]==(gameState.mapH-1)) { gameOver(); }
112.                 else if(dir==3 && head[0]==0) { gameOver(); }
113.                 else if(dir==1 && head[0]==(gameState.mapW-1)) { gameOver(); }
114.  
115.                 if(dir==0) { head[1]-= 1; }
116.                 else if(dir==2) { head[1]+= 1; }
117.                 else if(dir==1) { head[0]+= 1; }
118.                 else if(dir==3) { head[0]-= 1; }
119.  
120.                 for(var s in gameState.snake)
121.                 {
122.                         if(s==(gameState.snake.length-1)) { break; }
123.        
124.                         if(gameState.snake[s][0]==head[0] &&
125.                                 gameState.snake[s][1]==head[1])
126.                         {
127.                                 gameOver();
128.                                 break;
129.                         }
130.                 }
131.  
132.                 if(gameState.screen=='menu') { return; }
133.  
134.                 gameState.snake.unshift(head);
135.                 gameState.lastMove = gameTime;
136.  
137.                 if(gameState.newBlock[0]==head[0] &&
138.                         gameState.newBlock[1]==head[1])
139.                 {
140.                         gameState.score+= 1;
141.                         placeNewBlock();
142.                 }
143.                 else { gameState.snake.pop(); }
144.         }
145. }
146.  
147. function gameOver()
148. {
149.         gameState.screen = 'menu';
150.         if(gameState.score > gameState.bestScore)
151.         {
152.  
153.                 gameState.bestScore
154.         = gameState.score;
155.                 gameState.newBest       = true;
156.         }
157. }
158.  
159. window.onload = function()
160. {
161.         ctx = document.getElementById('game').getContext('2d');
162.  
163.         offsetX = Math.floor((document.getElementById('game').width -
164.                 (gameState.mapW * gameState.tileW)) / 2);
165.         offsetY = Math.floor((document.getElementById('game').height -
166.                 (gameState.mapH * gameState.tileH)) / 2);
167.        
168.         document.getElementById('game').addEventListener('click', function(e) {
169.  
170.                 var pos = realPos(e.pageX, e.pageY);
171.                 mouseState.click = pos;
172.         });
173.         document.getElementById('game').addEventListener('mousemove',
174.         function(e) {
175.                 var pos = realPos(e.pageX, e.pageY);
176.                 mouseState.x = pos[0];
177.                 mouseState.y = pos[1];
178.         });
179.        
180.         window.addEventListener('keydown', function(e) {
181.                 if(e.keyCode==38) { gameState.dir = 0; }
182.                 else if(e.keyCode==39) { gameState.dir = 1; }
183.                 else if(e.keyCode==40) { gameState.dir = 2; }
184.                 else if(e.keyCode==37) { gameState.dir = 3; }
185.                 else if(e.keyCode==70) { showFramerate = !showFramerate; }
186.         });
187.  
188.         requestAnimationFrame(drawGame);
189. };
190.  
191. function drawMenu()
192. {
193.         ctx.textAlign   = "center";
194.         ctx.font        = "bold italic 20pt sans-serif";
195.  
196.         ctx.fillStyle = ((mouseState.y>=150 && mouseState.y<=220) ?
197.                 "#0000aa" : "#000000");
198.        
199.         ctx.fillText("Nowa Gra", 150, 180);
200.  
201.         ctx.font                = "italic 12pt sans-serif";
202.         ctx.fillText("Najlepszy wynik: " + gameState.bestScore, 150, 210);
203.        
204.         if(gameState.newBest)
205.         {
206.                 ctx.fillText("Najlepszy wynik!", 150, 240);
207.         }
208.         if(gameState.score>0)
209.         {
210.                 ctx.fillText("Wynik: " + gameState.score, 150, 260);
211.         }
212. }
213.  
214. function drawPlaying()
215. {
216.         ctx.strokeStyle = "#2c6b00";
217.         ctx.fillStyle   = "#2c6b00";
218.  
219.         ctx.strokeRect(offsetX, offsetY,
220.                 (gameState.mapW * gameState.tileW),
221.                 (gameState.mapH * gameState.tileH));
222.        
223.         for(var s in gameState.snake)
224.         {
225.                 ctx.fillRect(offsetX + (gameState.snake[s][0] * gameState.tileW),
226.                         offsetY + (gameState.snake[s][1] * gameState.tileH),
227.                         gameState.tileW, gameState.tileH);
228.         }
229.         ctx.font = "12pt sans-serif";
230.         ctx.textAlign = "right";
231.         ctx.fillText("Wynik: " + gameState.score, 290, 20);
232.  
233.         ctx.fillStyle   = "#e00b00";
234.         ctx.fillRect(offsetX + (gameState.newBlock[0] * gameState.tileW),
235.                 offsetY + (gameState.newBlock[1] * gameState.tileH),
236.                 gameState.tileW, gameState.tileH);
237. }
238.  
239. function drawGame()
240. {
241.         if(ctx==null) { return; }
242.  
243.         var currentFrameTime = Date.now();
244.         var timeElapsed = currentFrameTime - lastFrameTime;
245.         gameTime+= timeElapsed;
246.  
247.         updateGame();
248.  
249.         var sec = Math.floor(Date.now()/1000);
250.         if(sec!=currentSecond)
251.         {
252.                 currentSecond = sec;
253.                 framesLastSecond = frameCount;
254.                 frameCount = 1;
255.         }
256.         else { frameCount++; }
257.  
258.         ctx.fillStyle = "#ddddee";
259.         ctx.fillRect(0, 0, 300, 400);
260.  
261.         if(showFramerate)
262.         {
263.                 ctx.textAlign = "left";
264.                 ctx.font = "10pt sans-serif";
265.                 ctx.fillStyle = "#000000";
266.                 ctx.fillText("Frames: " + framesLastSecond, 5, 15);
267.         }
268.  
269.         if(gameState.screen=='menu')            { drawMenu(); }
270.         else if(gameState.screen=='playing')    { drawPlaying(); }
271.  
272.         lastFrameTime = currentFrameTime;
273.  
274.         requestAnimationFrame(drawGame);
275. }
276.  
277. function realPos(x, y)
278. {
279.         var p = document.getElementById('game');
280.        
281.         do {
282.                 x-= p.offsetLeft;
283.                 y-= p.offsetTop;
284.                
285.                 p = p.offsetParent;
286.         } while(p!=null);
287.        
288.         return [x, y];
289. }