Please Help Me. Making a 2 dimensional game from html and javascript

Question

Please help me. I am watching "Coding your first HTML 5 game" (https://teamtreehouse.com/library/coding-your-first-html5-game). With what I have so far it says I should have a white canvas with a gray background and a black rectangle on the left side of the canvas, but the rectangle fill isn't there. Can you help? Here's is the code so far.

HTML 5

<!DOCTYPE html>
<html>
<head>
    <title>My Game</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script src="game.js"></script>
</body>
</html>

CSS

body {
    background: #999999;
}
canvas {
    display: block;
    background: #FFFFFF;
     margin: 0 auto;
}

JAVASCRIPT

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) {
                    window.setTimeout(callback, 1000/60);
                };

function init() {
    requestAnimFrame(update);
}
function update() { 

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

    requestAnimFrame(update);
}

Answer 1 · 2015-03-21T03:15:50Z

March 21, 2015 3:15am

Isaac, I gave you the answer to this in your other thread that you ignored. Here is the thread https://teamtreehouse.com/forum/im-making-my-first-html-5-game-following-the-video-perfectly-but-javascript-wont-create-a-rectangle-in-the-canvas and here is the same answer again:

The fillRect method only takes 4 parameters: x, y, width, height (respectively). You set the color with the fillStyle property like so:

//Either outside of the update() function like this:
context.fillStyle = "#000";
function update() {
    //Or you can do inside the update() function
    //It's up to you although it will be cached outside of the function
    //So that it doesn't get reset each time the function is called
    //context.fillStyle = "#000";
    context.fillRect(10, 10, 40, 380);  
    requestAnimFrame(update);
}

Welcome to the Treehouse Community

Looking to learn something new?

Isaac Oleksiuk

Isaac Oleksiuk

Please Help Me. Making a 2 dimensional game from html and javascript

1 Answer

Marcus Parsons

Marcus Parsons