Assignment 9

by vzufelt

HTML

<html>
<body>
<canvas id="myCanvas" width="480" height="320"></canvas>
<div id="mousepos"></div>
<div id="rectpos"></div>

<script>
//$('#myCanvas').click(function(e){
//    var offsetX = $('#myCanvas').offset().left;
//    var offsetY = $('#myCanvas').offset().top;
    
//   mouseClicked(e.pageX - offsetX , e.pageY - offsetY);
//}); 

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;

function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, ballRadius, 0, Math.PI*2);
    ctx.fillStyle = "#000000";
    ctx.fill();
    ctx.closePath();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    
    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
        dx = -dx;
    }
    if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
        dy = -dy;
    }
    
    x += dx;
    y += dy;
}

var ball = new Array();
ball[0] = drawBall;

function mouseClicked(mx, my)
{
    $('#mousepos').html(mx + ":" + my);
    
    for (var i=0; i<1; i++)
    {
        if (pointIsInBall(mx, my, ball[i]))
        {
            $('#mousepos').html('Clicked Ball: ' + i);
            ball[i].xstep *= -1;
            ball[i].ystep *= -1;
        }
    }  
}

setInterval(draw, 20);
</script>
</body>
</html>