Question

所以我正在制作一个html 5游戏，而我正试图让“怪物”移动它自己。 “英雄”移动得很好，但“怪物”不会。问题可能出在更新或渲染方法中，但我对于我所缺少的东西感到茫然。

    ////////////////////////////////////Canvases////////////////////////////////////

    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 988;
    canvas.height = 480;
    document.body.appendChild(canvas);

    ////////////////////////////////////Map Fields//////////////////////////////////

    var mapCordsX = 0;
    var mapCordsY = 0;

    //to save the area code when the player is in a building
    var oldMapCordsX = 0;
    var oldMapCordsY = 0;

    //////////////////////////////////Images////////////////////////////////////////

    // Background image
    var bgReady = false;
    var bgImage1 = new Image();
    bgImage1.onload = function() {
        bgReady = true;
    };

    //images for backgorunds. 
    bgImage1.src = "images/background.png"; // Background images


    // Hero image
    var heroReady = false;
    var heroImage = new Image();
    heroImage.onload = function() {
        heroReady = true;
    };
    heroImage.src = "images/sprite01south.png";  //Hero Images


    // Enemyimage
    var monsterReady = false;
    var monsterImage = new Image();
    monsterImage.onload = function() {
        monsterReady = true;
    };
    monsterImage.src = "images/monster.png";     //Enemy images\

    //////////////////////////////////Images////////////////////////////////////////



    ////////////////////////////////Global Objects//////////////////////////////////

    // Game objects
    var hero = {
        speed: 256, // movement in pixels per second
        x: canvas.width / 2,
        y: canvas.height / 2

    };
    var monster = {
        speed: 256,
        x: canvas.width / 2,
        y: canvas.height / 2

    };
    var monstersCaught = 0;

    /////////////////////////// Handle keyboard controls////////////////////////////
    var keysDown = {};

    addEventListener("keydown", function(e) {
        keysDown[e.keyCode] = true;
    }, false);

    addEventListener("keyup", function(e) {
        delete keysDown[e.keyCode];
    }, false);



    ///////////////////////////////Map Methods//////////////////////////////////////
    var resetNorth = function() {
        hero.y = 440;
        mapCordsY += 1;
    };
    var resetEast = function() {
        hero.x = 0;
        mapCordsX += 1;
    };
    var resetWest = function() {
        hero.x = canvas.width;
        mapCordsX += 1;
    };
    var resetSouth = function() {
        hero.y = 0;
        mapCordsY -= 1;
    };


    // resetCenter the game when the player catches a monster
    var resetCenter = function() {
        hero.x = canvas.width / 2;
        hero.y = canvas.height / 2;

        // Throw the monster somewhere on the screen randomly
        monster.x = 32 + (Math.random() * (canvas.width - 64));
        monster.y = 32 + (Math.random() * (canvas.height - 64));
    };


    //////////////////////////////////Update Method/////////////////////////////////

   var update = function(modifier) {
    //key events
    if (38 in keysDown) { // Player holding up
        hero.y -= hero.speed * modifier;
        heroImage.src = "images/sprite01north.PNG";
    }
    if (40 in keysDown) { // Player holding down
        hero.y += hero.speed * modifier;
        heroImage.src = "images/sprite01south.PNG";
    }
    if (37 in keysDown) { // Player holding left
        hero.x -= hero.speed * modifier;
        heroImage.src = "images/sprite01west.PNG";
    }
    if (39 in keysDown) { // Player holding right
        hero.x += hero.speed * modifier;
        heroImage.src = "images/sprite01east.PNG";
    }



    var goblin1 = 0;

    if (goblin1 < 10){
      monster.x -= monster.speed * modifier;
    }
    else if (goblin1 <20 ){
      monster.x += monster.speed * modifier;
    }
    else if (goblin1 < 30){
      monster.y -= monster.speed * modifier;
    }
    else {
      monster.y += monster.speed * modifier;
    }

    goblin1++;

    if(goblin1 > 40){
      goblin1=0;
    }

        //Map change event triggers
        if (hero.y >= 440) {
            resetSouth();
        } else if (hero.y <= 0) {
            resetNorth();
        }
        if (hero.x <= 0) {
            resetWest();
        } else if (hero.x >= 988) {
            resetEast();
        }
        //map change events
        if (mapCordsX === -1 && mapCordsY === 0) {
            bgImage1.src = "images/background(-1,0).png";
        }
        //a lot more to come as I get backgrounds    
        // Are they touching?
        if (
            hero.x <= (monster.x + 32) && monster.x <= (hero.x + 32) && hero.y <= (monster.y + 32) && monster.y <= (hero.y + 32)) {
            ++monstersCaught;
            resetCenter();
        }
    };


    ////////////////////// Update game objects graphics/////////////////////////////



    // Draw everything
    var render = function() {
        if (bgReady) {
            ctx.drawImage(bgImage1, 0, 0);
        }

        if (heroReady) {
            ctx.drawImage(heroImage, hero.x, hero.y);
        }

        if (monsterReady) {
            ctx.drawImage(monsterImage, monster.x, monster.y);
        }
        // Score
        ctx.fillStyle = "rgb(250, 250, 250)";
        ctx.font = "24px Helvetica";
        ctx.textAlign = "left";
        ctx.textBaseline = "top";
        ctx.fillText("Enemies Slayed : " + monstersCaught, 32, 32);
    };  
    //////////////////////////////////The main game loop////////////////////////////
    var main = function() {
        var now = Date.now();
        var delta = now - then;

        update(delta / 1000);
        render();

        then = now;

        // Request to do this again ASAP
        requestAnimationFrame(main);
    };

    // Cross-browser support for requestAnimationFrame
    var w = window;
    requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

    // Let's play this game!
    var then = Date.now();
    resetCenter();
    main();

Answer 1

如果删除此if / else语句会发生什么？

 //if (monsterReady) {
        ctx.drawImage(monsterImage, monster.x, monster.y);
//     }

您是否正在改变代码中其他部分的var monsterReady？

Html游戏，在调用函数时让图像移动

1 个答案: