Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Sam Bazalo
Sam Bazalo
34 Points

What are the vertical red lines in the tutorial code?

I am having trouble with some of my code. I am doing the 'code your first HTML5 Game' with Randy Hoyt.

https://teamtreehouse.com/library/coding-your-first-html5-game

What are the vertical red lines he has at the end of the window. lines, about 11:50 in to the video?

I am getting an error pointing to the line after all these window. lines so I think I have missed something.

Here's my code

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d")

imgFrog = new Image();
imgFrog.src = "Images/mikethefrog.png";
imgFrog.addEventListener("load",init, false);

var requestAnimFrame = 
    window.requestAnimationFrame 
    window.webkitRequestAnimationFrame
    window.mozRequestAnimationFrame
    window.oRequestAnimationFrame
    window.msRequestAnimationFrame
    function (callback) {                                //Receiving a console error on this line//
        window.setTimeout(callback, 1000/60);
    };

function init() {
    requestAnimFrame(update);
}

function update() {
    context.fillRect( 10, 10, 40, 380, "#000000");

    requestAnimFrame(update);

}

1 Answer

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Sam,

Those lines represent the logical OR operator. You can fix your code by adding these operators just like in the video - two vertical bars.

var requestAnimFrame = 
    window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function (callback) {                                //Receiving a console error on this line//
        window.setTimeout(callback, 1000/60);
    };

As Randy explains, requestAnimationFrame does not have standard support across browsers. If a browser doesn't recognize the first value window.requestAnimationFrame then it will try the next value, all the way down to actually defining a custom requestAnimationFrame if needed.

Hope this helps,

Cheers

Sam Bazalo
Sam Bazalo
34 Points

Cheers Richie McCaw. guru!