Ucząc się JavaScript postanowiłem zrobić sobie przeglądarkową symulację padającego śniegu. Jednakże natrafiam na jakiś błąd, który nie pozwala ujrzeć efektów mojej pracy. Domyślam się, że błąd dotyczy zakresu zmiennych. Mam nadzieję, że ktoś podpowie mi co robię źle.

Zawartość pliku snow.html:


<html>  
  <head>  
    <title>Simple game with HTML5 Canvas</title>  
  <style>  
	#c {
		border: 1px solid black;
		position: absolute;
		left: 180px;
		background-color: white;
	}
	
	body {
		background-color: rgb(238,238,238);
	}
  </style>  
  </head>  
  <body>
    <canvas id="c" width="900px" height="500px"></canvas>
    <script src="snow.js"></script>  
  </body>  
</html>  


Zawartość pliku: snow.js:


	function createContext() {
		
		var canv = document.getElementById("c");
		var ctx = false;
		
		if (canv.getContext)
		{
			ctx = canv.getContext("2d");
		} else {
			alert("Error!");
		}
		
		return ctx;
	}
	
	
	var ctx = createContext();
	var WIDTH = document.getElementById("c").width;
	var HEIGHT = document.getElementById("c").height;
	var snowBalls = new Array(); // array containing objects of snowBall class
	
	ctx.fillStyle = "rgba(123,123,123,0.5)";
	
	// function that let create a new object
	
	
	function snowBall(radius,amplitude,freq) {
		this.radius = radius;
		this.amplitude = amplitude;
		this.freq = freq;
		this.draw = function() {
			x = this.x;
			y = this.y;
			rad = this.radius;
			ampli = this.amplitude;
			freq = this.freq;
			
			ctx.beginPath();
			ctx.arc(x,y,rad,0,Math.PI*2,true);
			ctx.fill();
		}
		
		this.angle = 1;
		this.x = parseInt(Math.random()*WIDTH);
		this.y = 0;
	}
	
	var createSnow = function() {
		for (var i=0;i<20;++i)
		{
			rad = parseInt(Math.floor(Math.random()*100+10));
			amp = parseInt(Math.floor(Math.random()*5+1));
			fre = parseInt(Math.floor(Math.random()*5+1));
			snowBalls[i] = new snowBall(rad,amp,fre);
		}
	}();
	
	setInterval(function(){
		for (i=0;i<snowBalls.length;++i)
		{
			snowBalls[i].draw();
			(snowBalls[i].y)++;
		}
		ctx.clearRect(0,0,WIDTH,HEIGHT);
	},32);