well my balls sometimes stick to the walls... and thats not good any ideas on how to get it to stop doing that?
<!DOCTYPE HTML>
<html>
<head>
<title>Canvas Example</title>
</head>
<body>
<h1 style="text-align: center; color: red; font-size: 40px;">Animation on the Canvas</h1>
<h1 style="text-align: center; color: red; font-size: 35px;">HTML5</h1>
<div style="text-align: center;">
<canvas id="this_canvas" width="200" height="200" style="border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border: 15px solid #00ff00;"></canvas>
</div>
<script type="text/javascript">
var context = document.getElementById('this_canvas').getContext('2d');
var ball_array = new Array();
function begin(){
for(var i=0;i<50;i++){
var temp=new ball();
ball_array.push(temp);
}
}
function ball(){
this.x=Math.random()*context.canvas.width;
this.y=Math.random()*context.canvas.height;
this.radius = Math.floor((Math.random()*30)+1);
this.color = '#' + Math.random().toString(16).substring(4);
this.vx = (Math.random()-0.5)*0.1;
this.vy = (Math.random()-0.5)*0.1;
//if ball is created outside of the canvas move it back in
if (this.x - this.radius <= 0) {
this.x = this.x + 40;
}
if (this.x + this.radius >= context.canvas.width) {
this.x = this.x - 40;
}
if (this.y - this.radius <= 0) {
this.y = this.y + 40;
}
if (this.y + this.radius >= context.canvas.height) {
this.y = this.y - 40;
}
this.move=ball_move;
this.draw=ball_draw;
}
function ball_move(){
this.x+=this.vx;
this.y+=this.vy;
}
function ball_draw(){
var i;
for (i in ball_array){
context.beginPath();
context.fillStyle = ball_array[i].color;
context.arc(ball_array[i].x,ball_array[i].y,ball_array[i].radius,0,Math.PI*2);
context.lineWidth = 1;
context.fill();
if ((ball_array[i].x - ball_array[i].radius) <= 0 || (ball_array[i].x + ball_array[i].radius) >= this_canvas.width) {
ball_array[i].vx = -ball_array[i].vx;
}
if ((ball_array[i].y - ball_array[i].radius) <= 0 || (ball_array[i].y + ball_array[i].radius) >= this_canvas.height) {
ball_array[i].vy = -ball_array[i].vy;
}
ball_array[i].x += ball_array[i].vx;
ball_array[i].y += ball_array[i].vy;
}
}
function going(){
// erase ball
context.beginPath();
context.fillStyle = '#00fff0';
context.rect(0,0,context.canvas.width,context.canvas.height);
context.fill();
//move
var x;
for(x in ball_array){
ball_array[x].move();
ball_array[x].draw();
}
}
function resize_can(){
context.canvas.width=window.innerWidth-200;
context.canvas.height=window.innerHeight/2;
}
window.onresize=resize_can;
onLoad=resize_can();
onLoad=begin();
setInterval(going,10);
</script>
</body>
</html>