JSFiddle - React, Tailwind, and code Playground

by apoucoz

JavaScript

//Случайное число из диапазона
   function Random(min, max){
     return Math.random() * (max - min) + min;
   }
   //Если загрузилась страница
   window.onload = function(){
   
     var canva = document.getElementById("canvas");
	 //Растянем канву на весь экран
	  canva.width = screen.width;
	  canva.height = screen.height;
	   
	 var context = canva.getContext("2d");
	 
	 //Массив снежинок
	 var flakes = [];
	 //Класс снежинки
	 function flake(x,y){
	   this.x = x;
	   this.y = y;
	   this.w = 1;
	   
	 }
	 
	 flake.prototype.draw = function(){
	   	var Img = new Image();
	    Img.src = "flake.png";
	    context.drawImage(Img,this.x,this.y,20,20);
	 }
	 
	 //Заполним массив снежинками
	 for(var i=0;i<150;i++)flakes[i] = new flake(100+i*20*Math.random(),Math.round(Random(-100,100))*20);
	
	
	 function Render(){
	   context.clearRect(0, 0, canvas.width, canvas.height);
	   context.fillStyle="#5390c9";
	   context.fillRect(0,0,canvas.width, canvas.height)
	   	var Img = new Image();
	    Img.src = "http://i.imgur.com/TtppH.png";
	    context.drawImage(Img,canvas.width/2-207,canvas.height/2-300);
	   
          
	   
	   for(var i=0;i<150;i++){
	     if(flakes[i].y-50 > canvas.width) flakes[i].y = Math.round(Random(-100,-10))*20; 
	     if (i%2==0) flakes[i].y += 1 ; else flakes[i].y += 2; 
		 if (i%2==0) flakes[i].x += Math.cos(flakes[i].w++/20); else flakes[i].x += Math.sin(flakes[i].w++/15);
		 flakes[i].draw();
	   }	 
	 }
	
   
     setInterval(Render,1000/25);   
   }