Question

美好的一天，我似乎遇到了代码问题。我一定错过了一些东西，但我找不到它...... 我在开头有2个eventListeners，用于添加和删除`keysDown array'中的键......

我有一个自定义对象：

function Vector(x,y) {
    this.x = x;
    this.y = y;
    this.translate = function(x,y){
         this.x += x;
         this.y += y;
    };
}

然后我有一个返回一个新Vector对象的自定义函数：

function Input() {
    var v = new Vector(0,0);
    if(keysDown["w".toCharCode(0)]) {
        v.y = 1;
    } else if (keysDown["s".toCharCode(0)]) {
        v.y = -1;
    }
    return v;
}

然后我有一个以每秒60次的间隔运行的重复函数，在此我希望使用收到的输入翻译我的向量：

var charPosition = new Vector(5,5);

setInterval(function(){

    var input = Input();
    charPosition.translate(input.x, input.y);

},(1000/60));

当我在区间函数内的单独var inputX，var inputY处理输入时，输入工作正常。但是只要我从中提取它并从中创建一个返回类型，我就不会以这种方式得到它的输出。

以下是该脚本的完整来源：

    <script>
    addEventListener("keydown", function(e){
        keysDown[e.keyCode] = true;
    },false);
    addEventListener("keyup", function(e){
        delete keysDown[e.keyCode];
    },false);

    var canvasWidth = 640;
    var canvasHeight = 480;

    var canvas = document.getElementById("canvas");

    var keysDown = {};
    var oldKeysDown = {};

    function Vector(x,y){
        this.x = x;
        this.y = y;

        this.lerp = function(startVector,endVector,percent){
            var v = new Vector();
            v.x = startVector.x + percent * ( endVector.x - startVector.x);
            v.y = startVector.y + percent * ( endVector.y - startVector.y);
            return v;
        };

        this.translate = function(x,y){
            this.x += x;
            this.y += y;
        };

        this.toString = function(){
            return "("+this.x+":"+this.y+")";
        };

        this.set = function(x,y){
            this.x = x;
            this.y = y;
        };

    }

    function Entity(){
        // Instantiate entity variables
        this.position = new Vector();
        this.sprite = new Image();
        this.velocity = new Vector();
        this.entityID = "";
        this.entity = "";

        // Entity update function
        // This is where code-side movement and collision detection should be done.
        this.update = function(){
            this.position.translate(this.velocity.x,this.velocity.y);

            // Detect screen-edge
            if(this.position.x - this.sprite.width / 2 < 0)
            {
                this.position.x = 0+(this.sprite.width/2);
            }
            if(this.position.x + this.sprite.width / 2 > canvasWidth)
            {
                this.position.x = canvasWidth-(this.sprite.width/2);
            }
            if(this.position.y - this.sprite.height / 2 < 0)
            {
                this.position.y = 0+(this.sprite.height/2);
            }
            if(this.position.y + this.sprite.height / 2 > canvasHeight)
            {
                this.position.y = canvasHeight-(this.sprite.height/2);
            }
        };

        this.init = function(elementID)
        {
            this.elementID = elementID;
            this.entity = document.getElementById(this.elementID);
            this.position.x = canvasWidth/2-(char.sprite.width/2);
            this.position.y = canvasHeight/2-(char.sprite.height/2);
            this.entity.style.left = (this.position.x - this.sprite.width/2) + "px";
            this.entity.style.bottom = (this.position.y - this.sprite.height/2)+ "px";
            this.entity.innerHTML = "<img src='" + this.sprite.src + "' alt='0'>";
        };

        // Entity draw method - This ensures that the object on the webpage is updated to the same as the code-values;
        this.draw = function(){
            this.entity.style.left = (this.position.x - this.sprite.width/2) + "px";
            this.entity.style.bottom = (this.position.y - this.sprite.height/2)+ "px";
        };
    }

    function Input(){
        var v = new Vector(0,0);
        if(keysDown['W'.charCodeAt(0)]){
            v.y = 1;
        }else if (keysDown['S'.charCodeAt(0)]){
            v.y = -1;
        }

        if(keysDown['D'.charCodeAt(0)]){
            v.x = 1;
        }else if (keysDown['A'.charCodeAt(0)]){
            v.x = -1;
        }

        return v;
    }

    // Initializing a new character
    var char = new Entity();
    char.sprite.src = "spr_character.png";
    char.init("character");

    // This is where the magic happen, this is set to try and run at 60 frames per second (1000ms/60frames)
    setInterval(function(){
        var inp = Input();

        // Doing console.log(inp.toString()) returns the correct input

        char.position.translate(inp.x,inp.y);

        char.update();
        char.draw();

    },(1000/60));

    </script>

Answer 1

似乎我通过稍微更改函数Input（）解决了这个问题。

自：

function Input(){
    var v = new Vector(0,0);
    if(keysDown['W'.charCodeAt(0)]){
        v.y = 1;
    }else if (keysDown['S'.charCodeAt(0)]){
        v.y = -1;
    }

    if(keysDown['D'.charCodeAt(0)]){
        v.x = 1;
    }else if (keysDown['A'.charCodeAt(0)]){
        v.x = -1;
    }

    return v;
}

要：

function Input(){
    this.v = new Vector(0,0);
    if(keysDown['W'.charCodeAt(0)]){
        this.v.y = 1;
    }else if (keysDown['S'.charCodeAt(0)]){
        this.v.y = -1;
    }

    if(keysDown['D'.charCodeAt(0)]){
        this.v.x = 1;
    }else if (keysDown['A'.charCodeAt(0)]){
        this.v.x = -1;
    }

    return this.v;
}

我想通过使用this.v代替var v更改内容？

但令人烦恼的是，我可以很好地阅读输出，但它不能在第一个代码上使用它。

但那是另一天，现在，我已经解决了！

感谢大家的意见:-D :-D

JS - 不能使用自定义对象的返回值

1 个答案: