Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Sam Bazalo
Sam Bazalo
34 Points
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
Sam Bazalo
Sam Bazalo
34 Points

Cheers Richie McCaw. guru!