javascript - p1.movement is not a function

Question

so I've been trying to figure this out for about 8hrs now. I have class. it has a function. I called the function. it says the function does not exist. what?

here's the code:

class Player1 extends Character{
    constructor(maxHealth,maxEnergy,sprites,x,y,vel,facingRight){
    super(maxHealth,maxEnergy,sprites,x,y,vel,facingRight);
    }
    //move
    movement() {
        window.onkeydown = function (e){
            window.addEventListener('keydown', function (e) {
                keys = (keys || []);
                keys[e.keyCode] = (e.type == "keydown");
            })
            window.addEventListener('keyup', function (e) {
                keys[e.keyCode] = (e.type == "keydown");            
            })
            //vertical
            if (keys && keys[87])
            {   
                if(this.y-this.vel>0)
                {
                    this.moveUp(); 
                }
            }
            else if (keys && keys[83]) 
            {   
                if(this.y+this.vel<444)
                {
                    this.moveDown();
                } 
            }
            //horizontal
            if (keys && keys[65]) 
            {   if(this.x-this.vel>0)
                {
                    this.moveLeft();
                }
            }
            if(keys && keys[68])
            {
                if(this.x+this.vel>screenWidth)
                {
                    this.moveRight();
                }
            }
            //charge
            if(keys && keys[66])
            {   
                this.charge();
            }
            //shoot
            if(keys && keys[32])
            {
                if(this.shootDelay==0){
                    if(this.blastCount<10){
                        this.shoot();
                    }
                } else if (this.shootDelay>5)
                {
                    this.shootDelay=0;
                }
                this.shootDelay++;
            }
            if(!(keys && keys[32])&&!(keys && keys[66])&&!(keys && keys[68])&&!(keys && keys[65])&&!(keys && keys[83])&&!(keys && keys[87])){
                this.idle();
            }
        }
        if(this.dead==true)
        {
            this.dead();
        } 
    }
};

so I don't understand why it fails to acknowledge the function when its clearly there. this is the function that is called when the window loads.

window.onload = function () {
    let p1 = new Player1(100, 100, GokuSpriteList, 24, 492, 5, true);
    let p2 = new Player2(100, 100, GokuBlackSpriteList, 1000, 492, 5, false);
    getSprites();
    update(p1, p2);
};

this is the function that updates the canvas screen. this is also where the movement function is called.

function update(p1,p2) 
{
    var c=document.getElementById("screen");
    var ctx=c.getContext("2d");

    clearCanvas(ctx);

    p1.movement();
    p2.movement();

    p1.draw(ctx);
    p2.draw(ctx);

    p1.removeBlast();
    p2.removeBlast();

    for(i=0;i<p1.blastCount;i++)
    {
        p1.blastList[i].draw(ctx);
    }
    for(i=0;i<p2.blastCount;i++)
    {
        p2.blastList[i].draw(ctx);
    }

    requestAnimationFrame(update);
};

let me know if you guys figure it out. I'll go study for my math test. Thanks.

标签： javascripthtml5-canvas

Answer 1

p1, p2您正在失去使用时的参考requestAnimationFrame(update)

您不能将参数传递给更新函数，requestAnimationFrame(update)因此您需要以另一种方式维护引用。

有很多方法可以保留参考。简单的方法是制作p1，p2全球化，但这并不总是最好的方法。

你可以使用闭包来保持它们。有关更多信息，请参阅代码注释。

function update(p1,p2) {
    const c=document.getElementById("screen");
    const ctx=c.getContext("2d");
    requestAnimationFrame(update); // calls the inner update to start the animation

    function update() { // this inner function remebers variables from the outer function
                        // which is called closing over, or closure.
                        // That means that p1,p2, c, and ctx are remembered by this function
                        // as long as it keeps calling  requestAnimationFrame(update)
      clearCanvas(ctx);

      p1.movement();
      p2.movement();

      p1.draw(ctx);
      p2.draw(ctx);

      p1.removeBlast();
      p2.removeBlast();

      for(i=0;i<p1.blastCount;i++)
      {
          p1.blastList[i].draw(ctx);
      }
      for(i=0;i<p2.blastCount;i++)
      {
          p2.blastList[i].draw(ctx);
      }

      requestAnimationFrame(update);  // calls the inner function
  }
}