├── .idea
    ├── codeStyles
    │   └── codeStyleConfig.xml
    ├── modules.xml
    ├── untitled2.iml
    └── workspace.xml
└── SnakeGame.html


/.idea/codeStyles/codeStyleConfig.xml:
--------------------------------------------------------------------------------
1 | <component name="ProjectCodeStyleConfiguration">
2 |   <state>
3 |     <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
4 |   </state>
5 | </component>


--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/../Snake/.idea/untitled2.iml" filepath="$PROJECT_DIR$/../Snake/.idea/untitled2.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/.idea/untitled2.iml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <module type="WEB_MODULE" version="4">
 3 |   <component name="NewModuleRootManager">
 4 |     <content url="file://$MODULE_DIR$/../Snake">
 5 |       <excludeFolder url="file://$MODULE_DIR$/../Snake/.tmp" />
 6 |       <excludeFolder url="file://$MODULE_DIR$/../Snake/temp" />
 7 |       <excludeFolder url="file://$MODULE_DIR$/../Snake/tmp" />
 8 |     </content>
 9 |     <orderEntry type="inheritedJdk" />
10 |     <orderEntry type="sourceFolder" forTests="false" />
11 |   </component>
12 | </module>


--------------------------------------------------------------------------------
/.idea/workspace.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <project version="4">
 3 |   <component name="ChangeListManager">
 4 |     <list default="true" id="23bbc2bd-770b-4c32-8655-e8f2c00d9c2d" name="Default Changelist" comment="" />
 5 |     <option name="SHOW_DIALOG" value="false" />
 6 |     <option name="HIGHLIGHT_CONFLICTS" value="true" />
 7 |     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
 8 |     <option name="LAST_RESOLUTION" value="IGNORE" />
 9 |   </component>
10 |   <component name="ProjectId" id="1m4YtLzL6TgaDPvQb1v3pIfQIJi" />
11 |   <component name="ProjectViewState">
12 |     <option name="hideEmptyMiddlePackages" value="true" />
13 |     <option name="showLibraryContents" value="true" />
14 |   </component>
15 |   <component name="PropertiesComponent">
16 |     <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
17 |     <property name="WebServerToolWindowFactoryState" value="false" />
18 |     <property name="last_opened_file_path" value="$PROJECT_DIR$" />
19 |     <property name="vue.rearranger.settings.migration" value="true" />
20 |   </component>
21 |   <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
22 |   <component name="TaskManager">
23 |     <task active="true" id="Default" summary="Default task">
24 |       <changelist id="23bbc2bd-770b-4c32-8655-e8f2c00d9c2d" name="Default Changelist" comment="" />
25 |       <created>1608754543967</created>
26 |       <option name="number" value="Default" />
27 |       <option name="presentableId" value="Default" />
28 |       <updated>1608754543967</updated>
29 |       <workItem from="1608754544973" duration="2951000" />
30 |       <workItem from="1608913488073" duration="396000" />
31 |       <workItem from="1608914410256" duration="1460000" />
32 |       <workItem from="1609098787074" duration="2010000" />
33 |       <workItem from="1609173131579" duration="199000" />
34 |       <workItem from="1609176050390" duration="677000" />
35 |       <workItem from="1609422430757" duration="1350000" />
36 |     </task>
37 |     <servers />
38 |   </component>
39 |   <component name="TypeScriptGeneratedFilesManager">
40 |     <option name="version" value="3" />
41 |   </component>
42 |   <component name="WindowStateProjectService">
43 |     <state x="425" y="189" key="run.anything.popup" timestamp="1608913562086">
44 |       <screen x="0" y="0" width="1536" height="834" />
45 |     </state>
46 |     <state x="425" y="189" key="run.anything.popup/0.0.1536.834@0.0.1536.834" timestamp="1608913562086" />
47 |   </component>
48 | </project>


--------------------------------------------------------------------------------
/SnakeGame.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <title>Snake</title>
  6 |     <style>
  7 |         body {
  8 |             background: red
  9 |         }
 10 | 
 11 |         canvas {
 12 |             background: white;
 13 |         }
 14 | 
 15 |         h2 {
 16 |             text-align: center;
 17 |         }
 18 |     </style>
 19 | </head>
 20 | <body>
 21 | <div width="600">
 22 |     <canvas width="500" height="500"></canvas>
 23 |     <h2 id="A"></h2>
 24 |     <script>
 25 |         const canvas = document.querySelector("canvas");
 26 |         const ctx = canvas.getContext("2d");
 27 | 
 28 | 
 29 |         const snakeSize = 50;
 30 |         const gameSpeed = 200;
 31 | 
 32 |         let score = 0;
 33 |         let XPos = 0;
 34 |         let YPos = 0;
 35 |         let way = 1;
 36 |         let tail = [{x: XPos, y: YPos}];
 37 |         const rectanglesInRow = canvas.width / snakeSize;
 38 |         const rectanglesInColumn = canvas.height / snakeSize;
 39 | 
 40 | 
 41 |         document.getElementById("A").innerText = score.toString();
 42 | 
 43 |         let foodX;
 44 |         let foodY;
 45 |         randomFood();
 46 | 
 47 | 
 48 |         ctx.fillStyle = "white";
 49 |         ctx.fillRect(0, 0, canvas.height, canvas.width);
 50 | 
 51 |         ctx.fillStyle = ("black");
 52 |         ctx.fillRect(XPos, YPos, snakeSize, snakeSize);
 53 |         document.onkeydown = checkKey;
 54 | 
 55 |         gameLoop()
 56 | 
 57 |         function gameLoop() {
 58 |             move();
 59 |             draw();
 60 |             setTimeout(gameLoop, gameSpeed);
 61 |         }
 62 | 
 63 |         function randomFood() {
 64 |             foodX = Math.floor(Math.random() * rectanglesInRow) * snakeSize;
 65 |             foodY = Math.floor(Math.random() * rectanglesInColumn) * snakeSize;
 66 |         }
 67 | 
 68 |         function checkKey(e) {
 69 | 
 70 |             e = e || window.event;
 71 | 
 72 |             if (e.keyCode == '38') {
 73 |                 // up arrow
 74 |                 if (way != 2) {
 75 |                     way = 1;
 76 |                 }
 77 |             } else if (e.keyCode == '40') {
 78 |                 // down arrow
 79 |                 if (way != 1) {
 80 |                     way = 2;
 81 |                 }
 82 |             } else if (e.keyCode == '37') {
 83 |                 // left arrow
 84 |                 if (way != 4) {
 85 |                     way = 3;
 86 |                 }
 87 |             } else if (e.keyCode == '39') {
 88 |                 // right arrow
 89 |                 if (way != 3) {
 90 |                     way = 4;
 91 |                 }
 92 |             }
 93 |         }
 94 | 
 95 |         function move() {
 96 |             if (way == 1) {
 97 |                 YPos -= snakeSize;
 98 |             } else if (way == 2) {
 99 |                 YPos += snakeSize;
100 |             } else if (way == 3) {
101 |                 XPos -= snakeSize;
102 |             } else if (way == 4) {
103 |                 XPos += snakeSize;
104 |             }
105 |             checkCollision();
106 | 
107 |             tail.push({x: XPos, y: YPos});
108 |         }
109 | 
110 |         function draw() {
111 |             ctx.clearRect(0, 0, canvas.width, canvas.height);
112 | 
113 | 
114 |             drawGrid();
115 | 
116 |             drawTail();
117 | 
118 |             //Snake rectangle
119 |             rectangle("black", XPos, YPos, snakeSize, snakeSize);
120 |             //Food rectangle
121 |             rectangle("blue", foodX, foodY, snakeSize-2, snakeSize-2);
122 | 
123 |         }
124 | 
125 |         function drawTail() {
126 |             tail = tail.slice(-1 * (score + 1));
127 |             for (let i = 0; i < tail.length; i++) {
128 |                 rectangle("grey", tail[i].x, tail[i].y, snakeSize-2, snakeSize-2)
129 |             }
130 | 
131 |         }
132 | 
133 |         function drawGrid() {
134 |             for (let i = 0; i < rectanglesInRow; i++) {
135 |                 for (let j = 0; j < rectanglesInColumn; j++) {
136 |                     rectangle("yellow", snakeSize * i, snakeSize * j, snakeSize - 2, snakeSize - 2);
137 |                 }
138 |                 rectangle("yellow", snakeSize * i, 0, snakeSize - 2, snakeSize - 2);
139 |             }
140 |         }
141 | 
142 |         function rectangle(color, x, y, width, height) {
143 |             ctx.fillStyle = color;
144 |             ctx.fillRect(x, y, width, height);
145 |         }
146 | 
147 |         function checkCollision() {
148 |             // Collision with window boundaries
149 |             if (XPos < 0) {
150 |                 XPos = canvas.width - snakeSize;
151 |             } else if (XPos > canvas.width - snakeSize) {
152 |                 XPos = 0;
153 |             } else if (YPos < 0) {
154 |                 YPos = canvas.height - snakeSize;
155 |             } else if (YPos > canvas.height - snakeSize) {
156 |                 YPos = 0;
157 |             }
158 | 
159 |             foodCollision()
160 | 
161 |             tailCollision()
162 |         }
163 | 
164 |         function foodCollision() {
165 |             if (foodX == XPos && foodY == YPos) {
166 |                 randomFood();
167 |                 addScore();
168 |             }
169 |         }
170 | 
171 |         function tailCollision() {
172 |             tail.forEach((item) => {
173 |                 if (item.x == XPos && item.y == YPos) {
174 |                     alert("gameover");
175 |                     resetGame();
176 |                 }
177 |             })
178 |         }
179 | 
180 |         function addScore() {
181 |             score++;
182 |             document.getElementById("A").innerText = score.toString();
183 |         }
184 | 
185 |         function resetGame()
186 |         {
187 |        location.reload();
188 |         }
189 |     </script>
190 | </div>
191 | </body>
192 | </html>


--------------------------------------------------------------------------------