update

Author: ViachikT

Snow.js

@@ -1,5 +1,30 @@
-$(document).ready(function () {
-    window.onload = function () {
+
+let icon = '';
+
+fetch('http://dataservice.accuweather.com/forecasts/v1/daily/1day/324505?apikey=SD3IOUbAchPsZCz6KJoAfdoReCkm2wbk&metric=true')
+    .then(function (resp) { return resp.json() })
+    .then(function data(data) {
+        console.log(data);
+        icon = data.DailyForecasts[0].Day.Icon;
+        const elem = document.getElementById('icon');
+        elem.src = `https://www.accuweather.com/images/weathericons/${icon}.svg`
+        atr = elem.getAttribute('src')
+        console.log(atr);
+        elem.onload = function () {
+            var canvas = document.getElementById("canvas_icon");
+            var ctx = canvas.getContext("2d");
+            ctx.drawImage(elem, 100, 100);
+        };
+        interval = setInterval(elem.onload, 33)
+    })
+    .catch(function () { });
+
+console.log(icon);
+
+if (icon === 29 || (icon >= 19 && icon <= 23)) {
+
+    $(document).ready(function () {
+
         //canvas init
         var canvas = document.getElementById("canvas");
         var ctx = canvas.getContext("2d");
@@ -75,6 +100,8 @@ $(document).ready(function () {
 
         //animation loop
         setInterval(draw, 33);
-    }
 
-})
+
+    })
+
+}

app.js

@@ -1,12 +1,17 @@
+
+
 let canvas = document.getElementById("Canvas");
 let ctx = canvas.getContext("2d");
 //Variables
+function mathRendom() {
+    return Math.round(Math.random() * 23 + 1) * cell;
+}
 let cell = 20;
 let score = 0;
-let deltaX = Math.round(Math.random() * 23 + 1) * cell;
-let deltaY = Math.round(Math.random() * 23 + 1) * cell;
-let fx = Math.round(Math.random() * 23 + 1) * cell;
-let fy = Math.round(Math.random() * 23 + 1) * cell;
+let deltaX = mathRendom();
+let deltaY = mathRendom();
+let fx = mathRendom();
+let fy = mathRendom();
 //snake boody
 let snake = [];
 snake[0] = {
@@ -21,6 +26,8 @@ snake[2] = {
     x: deltaX - cell * 2,
     y: deltaY
 };
+
+
 function drawSnake() {
     for (i = 0; i < snake.length; i++) {
         ctx.beginPath();
@@ -49,7 +56,6 @@ function drawSnake() {
 
     }
 }
-drawSnake()
 /*apple drawl*/
 function food() {
     ctx.beginPath();
@@ -58,7 +64,7 @@ function food() {
     ctx.fillStyle = "#fa0a0a";
     ctx.fill();
 };
-food();
+
 
 //Collapse
 function eatTail(head, arr) {
@@ -126,15 +132,15 @@ function drawEyes() {
         ctx.fill();
     }
 }
-drawEyes()
+
 function reDraw() {
     for (i = 0; i < snake.length; i++) {
         while (snake[i].x == fx && snake[i].y == fy) {
             fx = Math.round(Math.random() * 23 + 1) * cell, fy = Math.round(Math.random() * 23 + 1) * cell
         }
     }
 }
-reDraw();
+
 
 //Igra
 function drawGame() {
@@ -146,19 +152,15 @@ function drawGame() {
 
     if (deltaX > canvas.width + cell) {
         deltaX = -cell;
-        return deltaX;
     }
     if (deltaX < -cell) {
         deltaX = canvas.width + cell;
-        return deltaX;
     }
     if (deltaY > canvas.height + cell) {
         deltaY = -cell;
-        return deltaY;
     }
     if (deltaY < -cell) {
         deltaY = canvas.height + cell;
-        return deltaY;
     }
     if (dir == "left") deltaX -= cell;
     if (dir == "right") deltaX += cell;
@@ -172,7 +174,7 @@ function drawGame() {
     function eat() {
         if (newHead.x === fx && newHead.y === fy) {
             score += 1
-            return fx = Math.round(Math.random() * 23 + 1) * cell, fy = Math.round(Math.random() * 23 + 1) * cell;
+            return fx = mathRendom(), fy = mathRendom();
 
         } else {
             snake.pop();
@@ -189,15 +191,23 @@ function drawGame() {
 }
 
 let game = '';
-let b1 = document.querySelector('.b1');
+let start = document.querySelector('.start');
 
-b1.onclick = function f1() {
+start.onclick = () => {
     if (game == '') {
         game = setInterval(drawGame, 200);
-        b1.innerHTML = 'RESTART'
+        start.innerHTML = 'RESTART'
     }
     else {
         document.location.reload(true);
     }
 }
 
+function init() {
+    drawSnake();
+    food();
+    //   drawEyes();
+    reDraw();
+}
+
+init();

index.html

@@ -9,10 +9,12 @@
 
 <body>
     <div class="container">
-        <button class="b1">START</button>
+        <button class="start">START</button>
         <canvas id="canvas" width="500" height="500"></canvas>
         <canvas id="Canvas" width="500" height="500"></canvas>
+        <canvas id="canvas_icon" width="500" height="500"></canvas>
     </div>
+    <img id="icon" class="hidden" src="" alt="">
 
 
 
@@ -23,6 +25,7 @@
 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+    <!-- <script src="weather.js"></script> -->
     <script src="Snow.js"></script>
     <script src="app.js"></script>
 

style.css

@@ -13,17 +13,27 @@ body {
     background: #eee;
     display: block;
   position: absolute;
+  z-index: 1;
 }
 #Canvas {
   background:transparent;
   display: block;
 position: absolute;
-z-index: 1;
+z-index: 3;
 }
-.b1 {
+#canvas_icon {
+  background:transparent;
+  display: block;
+position: absolute;
+z-index: 2;
+}
+.start {
   position: absolute;
   left: 200px;
   top: -30px;
   width: 100px;
   height: 30px;
 } 
+.hidden {
+  visibility: hidden;
+}

weather.js

@@ -0,0 +1,21 @@
+
+
+fetch('http://dataservice.accuweather.com/forecasts/v1/daily/1day/324505?apikey=SD3IOUbAchPsZCz6KJoAfdoReCkm2wbk&metric=true')
+    .then(function (resp) { return resp.json() })
+    .then(function (data) {
+        console.log(data);
+        const icon = data.DailyForecasts[0].Day.Icon;
+        const elem = document.getElementById('icon');
+        elem.src = `https://www.accuweather.com/images/weathericons/${icon}.svg`
+        atr = elem.getAttribute('src')
+        console.log(atr);
+        elem.onload = function () {
+            var canvas = document.getElementById("canvas_icon");
+            var ctx = canvas.getContext("2d");
+            ctx.drawImage(elem, 100, 100);
+        };
+        ik = setInterval(elem.onload, 33)
+
+
+    })
+    .catch(function () { });