2
\$\begingroup\$

Here is another example of a moving ball. I would like to see how to make it more efficient and better. I think that moving the variables to the top of the function would be better but then I tried this and it would not work as good as it did.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH5EX9: Moving In Circle</title>
<script src="modernizr.js"></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);  
function eventWindowLoaded() {
    canvasApp();

}

function canvasApp() {
    var radius = 100;
    var circle = {centerX:250, centerY:250, radius:125, angle:0}
    var ball = {x:0, y:0,speed:.1};

    theCanvas = document.getElementById('canvasOne');
    context = theCanvas.getContext('2d');

  function  drawScreen () {

        context.fillStyle = '#EEEEEE';
        context.fillRect(0, 0, theCanvas.width, theCanvas.height);
        //Box
        context.strokeStyle = '#000000'; 
        context.strokeRect(1,  1, theCanvas.width-2, theCanvas.height-2);

        ball.x = circle.centerX + Math.cos(circle.angle) * circle.radius;
        ball.y = circle.centerY + Math.sin(circle.angle) * circle.radius;

        circle.angle += ball.speed;

        context.fillStyle = "#000000";
        context.beginPath();
        context.arc(ball.x,ball.y,15,0,Math.PI*2,true);
        context.closePath();
        context.fill();
    }

    function gameLoop() {
            window.setTimeout(gameLoop, 20);
            drawScreen()    
        }

    gameLoop();
}

</script>

</head>
<body>  
<div style="position: absolute; top: 50px; left: 50px;">
   <canvas id="canvasOne" width="500" height="500">
    Your browser does not support the HTML 5 Canvas. 
   </canvas>
</div>
</body>
</html>
Improve this question
\$\endgroup\$
3
  • \$\begingroup\$ Please make sure your code works before having it reviewed. If it does not work, head over to StackOverflow \$\endgroup\$
    – Joseph
    Apr 2, 2014 at 6:58
  • 2
    \$\begingroup\$ It does work on this code I tried it \$\endgroup\$
    – Doug Hauf
    Apr 2, 2014 at 12:50
  • \$\begingroup\$ In my mind, you are duping your questions, the changes in code are minimal between your 3 versions of the dropping ball. \$\endgroup\$
    – konijn
    Apr 2, 2014 at 15:43

1 Answer 1

Reset to default
1
\$\begingroup\$

Your Script

Handlers

Unless your handlers are called somewhere else, you can just embed them

window.addEventListener('load', function () {
    canvasApp();
});

requestAnimationFrame

There's this timer function called requestAnimationFrame that is better than setTimeout and setInterval. It's more optimized for animations, aiming 60fps when possible. But it's prefixed in other browsers, check for compatibility first.

(function gameLoop() {
    window.requestAnimationFrame(gameLoop);
    drawScreen();
    // All other loop functions here
}());

Common gotchas in JS

  • Never forget semi-colons, even when JS allows you to forget them.
  • Remember using var when declaring variables. Unless you have them in some upper scope, if you forget them, they automatically become globals - and that's bad practice.

Conclusion

There was little to go by, but here's what I got

function canvasApp() {
    var radius = 100;
    var circle = {
        centerX: 250,
        centerY: 250,
        radius: 30,
        angle: 0
    }
    var ball = {
        x: 0,
        y: 0,
        speed: .1
    };

    var theCanvas = document.getElementById('canvasOne');
    var context = theCanvas.getContext('2d');

    function drawScreen() {

        context.fillStyle = '#EEEEEE';
        context.fillRect(0, 0, theCanvas.width, theCanvas.height);

        //Box
        context.strokeStyle = '#000000';
        context.strokeRect(1, 1, theCanvas.width - 2, theCanvas.height - 2);

        ball.x = circle.centerX + Math.cos(circle.angle) * circle.radius;
        ball.y = circle.centerY + Math.sin(circle.angle) * circle.radius;

        circle.angle += ball.speed;

        context.fillStyle = "#000000";
        context.beginPath();
        context.arc(ball.x, ball.y, 15, 0, Math.PI * 2, true);
        context.closePath();
        context.fill();
    }

    (function gameLoop() {
        window.requestAnimationFrame(gameLoop);
        drawScreen();
        // All other loop functions here
    }());
}

window.addEventListener('load', function () {
    canvasApp();
});
Improve this answer
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.