locked
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 :)

    Friday, June 22, 2012 4:31 PM

All replies

  • 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)

    Friday, June 22, 2012 6:43 PM
    Moderator
  • 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 ... :(




    • Edited by WanbooUIT Saturday, June 23, 2012 5:20 AM
    Saturday, June 23, 2012 5:19 AM