Can' draw Image in "JavaScript and HTML5 touch game sample"

Question

I had downloaded

JavaScript and HTML5 touch game sample

http://code.msdn.microsoft.com/windowsapps/Sample-Game-9303b5c6/view/Discussions#content

and then i went to file game.js and in function draw of it.. i had write

this.gameContext.drawImage(....) but can't draw it... so debug tell me "missmatch error"

Who can help me,plz :)

Answer 1

You would need to provide a lot more detail to get help.  What code did you modify and how did you modify it?

---

Jeff Sanders (MSFT)

Answer 2

OK..

JavaScript and HTML5 touch game sample

http://code.msdn.microsoft.com/windowsapps/Sample-Game-9303b5c6/view/Discussions#content

I want to draw 1 images to the screen then... in "game.js"

// Called to get list of assets to pre-load
    getAssets: function () {
        // To add asset to a list of loading assets follow the the examples below
        var assets = {
            sndBounce: { object: null, fileName: "/sounds/bounce.wav", fileType: AssetType.audio, loop: false },
            backgroundImage: { object: null, fileName: "/images/background.jpg", fileType: AssetType.image },
            //// sndMusic: { object: null, fileName: "/sounds/music", fileType: AssetType.audio, loop: true }
        };
        return assets;
    }

Here.. i want to load image to assetManager... so i define it here... and then ... i want to draw it to screen...

// Main game render loop
    draw: function () {
        this.gameContext.clearRect(0, 0, gameCanvas.width, gameCanvas.height);

        // TODO: Sample game rendering to be replaced

        // Draws on canvas a circle of radius 20 at the coordinates defined by position attribute
        this.gameContext.beginPath();
        this.gameContext.fillStyle = "#FFFFFF";
        this.gameContext.arc(this.state.position.x, this.state.position.y, 20, 0, Math.PI * 2, true);
        this.gameContext.closePath();
        this.gameContext.fill();

        // Draw the current score
        this.gameContext.fillStyle = "#FFFF99";
        this.gameContext.font = "bold 48px Segoe UI";
        this.gameContext.textBaseline = "middle";
        this.gameContext.textAlign = "right";
        this.gameContext.fillText(this.state.score, gameCanvas.width - 5, 20);

        // Draw a ready or game over or paused indicator
        if (this.state.gamePhase === "ready") {
            this.gameContext.textAlign = "center";
            this.gameContext.fillText("READY", gameCanvas.width / 2, gameCanvas.height / 2);
        } else if (this.state.gamePhase === "ended") {
            this.gameContext.textAlign = "center";
            this.gameContext.fillText("GAME OVER", gameCanvas.width / 2, gameCanvas.height / 2);
        } else if (this.state.gamePaused) {
            this.gameContext.textAlign = "center";
            this.gameContext.fillText("PAUSED", gameCanvas.width / 2, gameCanvas.height / 2);
        }

        // Draw the number of bounces remaining
        this.gameContext.fillStyle = "#FF8040";
        this.gameContext.textAlign = "left";
        this.gameContext.fillText(Math.max(this.state.bounceLimit - this.state.bounce, 0), 5, 20);
        //My draw Image
        this.gameContext.drawImage(...);
      


    }

but it can't draw it ... :(