눈이 내릴 때의 문제

나는 HTML5 캔버스에 대해 더 많이 배우고 배경이 떨어지는 눈으로 페이지를 만들 것을 결심했습니다. 나는 이것을 동적으로 할 수 있기를 바란다. 나는 캔버스 등으로 객체를 움직이는 방법을 알고 이것을 수동으로 할 수있다. 이것이 의미하는 바는 한 번에 페이지에있는 눈송이의 수를 제어하고 코드를 복사하여 붙여 넣지 않아도되는 변수를 변경하기 만하면된다는 것입니다. 내 구문이 개체와 루프 중 일부에 맞으면 100 % 확실하지 않습니다.눈이 내릴 때의 문제

처음으로이 안내를 듣고 눈을 뛸 수있는 방법을 찾지 못했습니다. 누군가가 그 중 하나를 알게되고 훌륭한 링크를 제공한다면. 지금까지 제 코드가 있습니다. 내가 코멘트에서 언급 한 바와 같이

<!DOCTYPE html> 
<html> 
<head> 
<title>Obese</title> 
<style type="text/css"> 
    body 
{ 
    background-color:black; 
    } 
</style> 
</head> 
<body> 
<script type="text/javascript"> 
    function vp(woh) 
    { 
     var viewportwidth; 
     var viewportheight; 

     if (typeof window.innerWidth != 'undefined') 
     { 
      viewportwidth = window.innerWidth, 
      viewportheight = window.innerHeight 
     } 

     else if (typeof document.documentElement != 'undefined' 
      && typeof document.documentElement.clientWidth != 
      'undefined' && document.documentElement.clientWidth != 0) 
     { 
      viewportwidth = document.documentElement.clientWidth, 
      viewportheight = document.documentElement.clientHeight 
     } 

     else 
     { 
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth, 
       viewportheight = document.getElementsByTagName('body')[0].clientHeight 
     } 
      if (woh == 'w') 
      { 
       return viewportwidth; 
      } 
      else if (woh == 'h') 
      { 
       return viewportheight; 
      } 
      else 
      { 
       return false; 
      } 

     } 
    function snowflake() 
    { 
     this.x = Math.random() * canvas.width; 
     this.y = 0; 
     var toberadius = Math.random() * 50; 
     this.radius = toberadius + 10; 
     this.color = "white"; 
     var tobefallingSpeed = Math.random() * 100; 
     this.fallingSpeed = tobefallingSpeed + 30; 
     numberofSnowflakes++; 
    } 
    function update(m) 
    { 
     if (snowflakes < numberofSnowflakes) 
     { 
      for (i=0;i<numberofSnowflakes;i++) 
      { 
       sf[i] = new snowflake(); 
       snowflakes = i; 
      } 
     } 
     for (c=0;c<snowflakes;c++) 
     { 
      sf[m].y += sf[m].fallingSpeed * m; 
     } 
    } 
    function render() 
    { 
     for (b=0;b<snowflakes;b++) 
     { 
      ctx.fillStyle = "#FFFFFF"; 
      ctx.fillRect(sf[b].x,sf[b].y,sf[b].radius,sf[b].radius); 
     } 
    } 
    function main() 
    { 
     alert('asdf'); 
     now = Date.now(); 
     delta = now - then; 
     update(delta/1000); 
     render(); 
     then = now; 
    } 
    then = Date.now(); 
    var int = self.setInterval("main()",1); 
    var canvas = document.createElement("canvas"); 
    var ctx = canvas.getContext("2d"); 
    canvas.width = vp('w'); 
    canvas.height = vp('h'); 
    document.body.appendChild(canvas); 

    var numberofSnowflakes = 50; 
    var snowflakes = 0; 
    var sf = new Object(); 


</script> 
</body> 
</html>

출처

2012-06-29 user1491975

당신이 눈송이를 복원 할 때, 당신은 단지'numberofSnowflakes를 작성해서는 안됩니다 - 대신'numberofSnowflakes' 금액의 완전히 새로운 세트의 snowflakes'을? 그런 다음 다시, 대신 재활용 할 수 있습니다. – TheZ

나는 Scriptaculous를 사용하여 몇 년 전에 만들었습니다. Canvas + HTML5를 사용하는 것과 같은 방법은 아니지만 재미있는 일이었습니다. http://preview.moveable.com/JM/jameslab/Snow/ –

눈이 보이기 시작한다면 http://www.somethinghitme.com/2011/10/05/jquery-snowfall-1-5-update- 지금은 눈이 쌓인/내 기여입니다. – Loktar

, 나는 실제로 내 자신의 눈 플러그인 그게 몇 웹 사이트, Blog post 및 Github에 사용되어 만들었습니다. 그래서 불필요한 Im이 효과의 팬 :).

아래 코드는 시작해야합니다.

Working Version

function vp(woh) 
    { 
     var viewportwidth; 
     var viewportheight; 

     if (typeof window.innerWidth != 'undefined') 
     { 
      viewportwidth = window.innerWidth, 
      viewportheight = window.innerHeight 
     } 

     else if (typeof document.documentElement != 'undefined' 
      && typeof document.documentElement.clientWidth != 
      'undefined' && document.documentElement.clientWidth != 0) 
     { 
      viewportwidth = document.documentElement.clientWidth, 
      viewportheight = document.documentElement.clientHeight 
     } 

     else 
     { 
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth, 
       viewportheight = document.getElementsByTagName('body')[0].clientHeight 
     } 
      if (woh == 'w') 
      { 
       return viewportwidth; 
      } 
      else if (woh == 'h') 
      { 
       return viewportheight; 
      } 
      else 
      { 
       return false; 
      } 

     } 
    function snowflake() 
    { 
     this.x = Math.random() * canvas.width; 
     this.y = Math.random() * canvas.height; 
     this.radius = Math.random()*2; 
     this.color = "white"; 
     var tobefallingSpeed = Math.random() * 100; 
     this.fallingSpeed = tobefallingSpeed + 30; 
    } 
    function render() 
    { 
     ctx.clearRect(0,0,canvas.width, canvas.height); 
     for (b=0;b<snowflakes;b++) 
     { 
      sf[b].y+=0.4; 
      if(sf[b].y> canvas.height){ 
      sf[b].y = 0; 
      } 
      ctx.fillStyle = "#FFFFFF"; 
      ctx.fillRect(sf[b].x,sf[b].y,sf[b].radius,sf[b].radius); 
     } 
    } 
    function main() 
    { 
     now = Date.now(); 
     delta = now - then; 
     render(); 
     then = now; 
    } 
    then = Date.now(); 
    var int = self.setInterval(main,1); 
    var canvas = document.createElement("canvas"); 
    var ctx = canvas.getContext("2d"); 
    canvas.width = vp('w'); 
    canvas.height = vp('h'); 
    document.body.appendChild(canvas); 

    var numberofSnowflakes = 100; 
    var sf = []; 

    for (i=0;i<numberofSnowflakes;i++) 
    { 
     sf[i] = new snowflake(); 
     snowflakes = i; 
    }

출처

2012-06-29 20:57:28 Loktar

많은 도움을 주신 Loktar에게 감사드립니다. 다른 플러그인도 볼 수 있습니다. – user1491975

눈이 내릴 때의 문제

답변

관련 문제