Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2013
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Why does my game loop not work?

    Okay, so I'm trying to use Canvas to make a simple little thing where you can move a ball around using the Wii U GamePad. If you don't know, the Wii U has a web browser which is capable of reading controller input. Here's all the info. It's really neat ^_^

    Anyway, I've got my code and everything works fine except for the loop, and I just can't tell why. Here, first just look at my code. Bear with me, I'm just copy-pasting the whole thing.
    Code:
    <!DOCTYPE html><html><body>
    
    
    
    <script type="text/javascript">
    
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 854;
    canvas.height = 480;
    document.body.appendChild(canvas);
    // Creates the canvas and sticks it on the page.
    
    
    var circleX = 427;
    var circleY = 240;
    // Starts the circle in the center of the canvas.
    // I'll try "var circleX = canvas.width / 2" after I'm sure everything else works. One thing at a time.
    
    
    function moveCircle(){
    circleX = circleX + wiiu.gamepad.lStickX + wiiu.gamepad.rStickX;
    circleY = circleY + wiiu.gamepad.lStickY + wiiu.gamepad.rStickY;}
    // Moves the circle if the Wii U Gamepad analog sticks are being moved.
    
    
    function clearScreen(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);}
    // Erases the canvas. Kind of...kind of an obvious one, there >_>
    
    
    function drawCircle(){
    ctx.beginPath();
    ctx.arc(circleX, circleY, 10, 0, Math.PI*2, true);
    ctx.fill();}
    // Draws a filled circle with radius 10 at (circleX,circleY)
    
    
    </script></body></html>
    Okay, if I follow this up by simply posting the code...
    Code:
    setInterval(moveCircle, 10);
    setInterval(drawCircle, 100);
    setInterval(clearScreen, 500);
    ...it works! I can move the circle around fine and dandy. Note that I had to offset the intervals so that you could see the circle; if I had them all at 10 milliseconds, it'd blink too fast.

    But, if, instead of the previous code, I do this...
    Code:
    function jamesLoopton(){
    moveCircle();
    clearScreen();
    drawCircle();}
    // The game loop.
    
    
    setInterval(jamesLoopton, 10);
    // Runs jamesLoopton every ten milliseconds.
    ...it doesn't work! Nothing does anything, I just stare at a blank canvas.

    What am I doing wrong, why doesn't this work?

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts
    You are calling moveCircle(), clearScreen() and drawCircle() without setInterval so they will be executed almost instantaneously at the same time and you won't see the output. Why did you remove the setInterval for each?

  • #3
    New Coder
    Join Date
    Mar 2013
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Nevermind, it works now. I'm not sure why, the loop is the same. Funny how code fixes itself sometimes. Here's the working script. You can try it using the W3C TryIt editor.

    Code:
    <!DOCTYPE html><html><body>
    
    
    
    <script type="text/javascript">
    
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 854;
    canvas.height = 480;
    document.body.appendChild(canvas);
    // Creates the canvas and sticks it on the page.
    
    
    var circleX = canvas.width / 2;
    var circleY = canvas.height / 2;
    var circleRadius = 24;
    var circleColor = "#FF0000";
    // Starts the circle in the center of the canvas.
    
    
    function initializeGamePad(){
    wiiu.gamepad.update();}
    // Required to access GamePad controls.
    
    
    function moveCircle(){
    circleX += (wiiu.gamepad.lStickX * 4) + (wiiu.gamepad.rStickX * 4);
    circleY -= (wiiu.gamepad.lStickY * 4) + (wiiu.gamepad.rStickY * 4);}
    // Moves the circle if the Wii U Gamepad analog sticks are being moved. Use both for SuperSpeed :p
    
    
    function noClip(){
    if (circleX - circleRadius < 0){circleX = circleRadius;}
    if (circleX + circleRadius > canvas.width){circleX = circleRadius;}
    if (circleY - circleRadius < 0){circleY = circleRadius;}
    if (circleY + circleRadius > canvas.height){circleY = circleRadius;}}
    // Stops the circle from going off the edge of the canvas.
    
    
    function clearScreen(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);}
    // Erases the canvas. Kind of...kind of an obvious one, there >_>
    
    
    function drawCircle(){
    ctx.beginPath();
    ctx.arc(circleX, circleY, circleRadius, 0, Math.PI*2, true);
    ctx.fillStyle=circleColor;
    ctx.fill();}
    // Draws a filled circle with radius 24 at (circleX, circleY).
    
    
    function changeCircleSize(){
    if (wiiu.gamepad.hold & 2048)
    {circleRadius -= 1};
    if (wiiu.gamepad.hold & 1024)
    {circleRadius += 1};}
    
    
    function jamesLoopton(){
    initializeGamePad();
    moveCircle();
    noClip();
    changeCircleSize();
    clearScreen();
    drawCircle();}
    // The game loop.
    
    
    setInterval(jamesLoopton, 16);
    // Runs the game loop every sixteen milliseconds. Almost synchs up with 60 FPS.
    
    
    </script></body></html>
    Edit: Updated the code to prevent the circle going outside the borders of the canvas.
    Last edited by SomethingFunny; 04-18-2013 at 03:30 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •