Currently delving into the world of game programming, I've been struggling with this exercise. I can't seem to figure out why the circle won't stop in the center of the box within the update function. What am I missing?
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var circleX = 100;
var circleY = 100;
var circleR = 50;
var circleC = 'yellow';
var circleSpeedX = 65;
var circleSpeedY = 45;
var rectX = 650;
var rectY = 450;
var rectW = 110;
var rectH = 110;
var rectC = 'red';
function clear()
{
context.clearRect(0,0,canvas.width, canvas.height);
}
function drawRect(rectX,rectY,rectW,rectH,rectC)
{
context.fillStyle = rectC;
context.fillRect(rectX,rectY,rectW,rectH);
}
function drawCircle(circleX,circleY,circleR,circleC)
{
context.fillStyle = circleC;
context.beginPath();
context.arc(circleX,circleY,circleR,0,2 * Math.PI);
context.fillStyle = 'orange';
context.fill();
}
function update()
{
}
function draw()
{
clear();
drawRect(0,0,canvas.width,canvas.height,'black');
drawRect(rectX,rectY,rectW,rectH,rectC);
drawCircle(circleX,circleY,circleR,circleC);
}
function loop()
{
update();
draw(rectX, rectY, circleX, circleY);
setTimeout(loop, 30);
}
loop();