October 09, 2020
Code the Snake Game using HTML and Javascript
Hi friends I am very happy to share the snake game script. It is really cool and joy, actually the movement of snake is based on CSS px value.snake.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset = "utf-8"/>
5 <title>Snake Games</title>
6 <style>
7 #board {
8 width: 400px;
9 height: 400px;
10 position: relative;
11 background: black;
12 }
13
14 .snake {
15 width: 20px;
16 height: 20px;
17 position: absolute;
18 background-color: green;
19 text-align: center;
20 }
21
22 #apple {
23 width: 20px;
24 height: 20px;
25 position: absolute;
26 background-color: red;
27 top:120px;
28 left:80px;
29 }
30 </style>
31 </head>
32 <body>
33 <div id="board">
34 <div id="apple"></div>
35 <div class="snake"></div>
36 </div>
37 <div>
38 <p>Created by <a href = "https://www.algoberry.com" target="_blank">Algoberry</a></p>
39 </div>
40 </body>
41 </html>
42 <script>
43
44 //Object Declaration
45 var boardobj;
46 var appleobj;
47 var snakeobj;
48
49 //Variable Declaration
50 var portionSize = 20; //Same portion size should be set to snake (width, height) & apple (width, height)
51
52 var boardTop = 400; //Board top position
53 var boardLeft = 400; //Board left position
54
55 var appleTop = 120; //Default apple top position
56 var appleLeft = 80; //Default apple left position
57
58 var getSnakeTop = 0;
59 var getSnakeLeft = 0;
60
61 var counter = 0;
62 var snakeLength = 0;
63
64 function starter() {
65 boardobj = document.getElementById("board");
66 appleobj = document.getElementById("apple");
67 snakeobj = document.getElementById("board").getElementsByClassName("snake");
68 snakeobj[0].style.top = "0px";
69 snakeobj[0].innerHTML = snakeLength;
70 snakeobj[0].style.left = "0px";
71 }
72
73 function run() {
74 //Get current snake position
75 getSnakeTop = snakeobj[0].style.top;
76 getSnakeTop = getSnakeTop.replace("px","");
77 getSnakeTop = parseInt(getSnakeTop);
78
79 getSnakeLeft = snakeobj[0].style.left;
80 getSnakeLeft = getSnakeLeft.replace("px","");
81 getSnakeLeft = parseInt(getSnakeLeft);
82
83 if(getSnakeTop == appleTop || getSnakeLeft < appleLeft || getSnakeLeft > appleLeft) { //snake and apple are present in same column
84 //---
85 if(getSnakeLeft < appleLeft) {
86 getSnakeLeft = getSnakeLeft + portionSize;
87 }
88 else
89 {
90 getSnakeLeft = getSnakeLeft - portionSize;
91 }
92 if(getSnakeLeft < 0) {
93 getSnakeLeft = boardLeft-portionSize;
94 }
95 else if(getSnakeLeft == boardLeft) {
96 getSnakeLeft = 0;
97 }
98
99 if(getSnakeTop == appleTop && getSnakeLeft == appleLeft) {
100 eat();
101 }
102 else
103 {
104 follow();
105 snakeobj[0].style.left = getSnakeLeft+"px";
106 }
107 //---
108 }
109 else if(getSnakeLeft == appleLeft || getSnakeTop < appleTop || getSnakeTop > appleTop) { //snake and apple are present in same row
110 //---
111 if(getSnakeTop < appleTop) {
112 getSnakeTop = getSnakeTop + portionSize;
113 }
114 else
115 {
116 getSnakeTop = getSnakeTop - portionSize;
117 }
118 if(getSnakeTop < 0) {
119 getSnakeTop = boardTop-portionSize;
120 }
121 else if(getSnakeTop == boardTop) {
122 getSnakeTop = 0;
123 }
124
125 if(getSnakeTop == appleTop && getSnakeLeft == appleLeft) {
126 eat();
127 }
128 else
129 {
130 follow();
131 snakeobj[0].style.top = getSnakeTop+"px";
132 }
133 //---
134 }
135 }
136
137 function follow() {
138 if(snakeLength >= 1) {
139 counter = snakeLength;
140 while(counter > 0) {
141 if(snakeobj[counter-1].style.left == getSnakeLeft+"px" && snakeobj[counter-1].style.top == getSnakeTop+"px") {
142 snakeobj[0].style.backgroundColor = "blue";
143 snakeobj[counter-1].style.backgroundColor = "blue";
144 clearInterval(runObj);
145 alert("Snake Clashed");
146 break;
147 }
148 else
149 {
150 snakeobj[counter].style.left = snakeobj[counter-1].style.left;
151 snakeobj[counter].style.top = snakeobj[counter-1].style.top;
152 counter = counter - 1;
153 }
154 }
155 }
156 }
157
158 function eat() {
159 //Increase snake body after ate apple.
160 snakeLength = snakeLength + 1;
161 newobj = document.createElement("div");
162 newobj.innerHTML = snakeLength;
163 newobj.classList.add("snake");
164 boardobj.appendChild(newobj);
165
166 newobj.style.top = snakeobj[snakeLength-1].style.top;
167 newobj.style.left = snakeobj[snakeLength-1].style.left;
168
169 follow();
170
171 snakeobj[0].style.top = appleTop+"px";
172 snakeobj[0].style.left = appleLeft+"px";
173
174 //Set new place for apple
175 appleTop = Math.floor((Math.random() * (boardTop - portionSize)) + 1);
176 appleTop = appleTop%portionSize;
177 if(appleTop >= 1) {
178 appleTop = portionSize*appleTop;
179 }
180 appleLeft = Math.floor((Math.random() * (boardLeft - portionSize)) + 1);
181 appleLeft = appleLeft%portionSize;
182 if(appleLeft >= 1) {
183 appleLeft = portionSize*appleLeft;
184 }
185 appleobj.style.top = appleTop+"px";
186 appleobj.style.left = appleLeft+"px";
187 }
188
189 //Start Point
190 starter();
191 var runObj = setInterval(run,100);
192 </script>
No comments:
Post a Comment