Question

我正在尝试使用html5画布创建一个非常基本的JavaScript游戏。所以，我创建了一个主要的播放器＆＃34; class＆＃34;在实例化和调用＆＃34; init方法＆＃34;时，应该在画布上创建一个红色圆圈。最后，它也可以通过箭头键控制，为此，我尝试将事件监听器添加到文档中，检查keydown / keyup，然后更改布尔值，如leftPressed = true;基于此，displace方法（在setInterval函数绘制中调用）旨在更新红色圆圈的位置，这就是我的问题 - 在打开index.html文件时，创建了红色圆圈，但是当我按箭头键，我无法动弹。任何帮助将不胜感激，请原谅我的无知，我在一周前开始javascript。

这是包含播放器＆＃34;类＆＃34;：

的js代码

canvas = document.getElementById("surface");
ctx = canvas.getContext("2d");

//user controlled player class

player = function(x,y,dx,dy,radius) {
    this.x = x;
    this.y = y;
    this.speedx = dx;
    this.speedy = dy;
    this.radius = radius;

    this.leftPressed = false;
    this.rightPressed = false;
    this.upPressed = false;
    this.downPressed = false;

    document.addEventListener("keydown",this.onKeyDown,false);
    document.addEventListener("keyup",this.onKeyUp,false);


    this.init = function() {
        ctx.beginPath();
        ctx.arc(this.x,this.y,this.radius,0,Math.PI*2);
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.closePath();
    }

    this.onKeyDown = function(e) {
        if (e.keyCode == 37) {
            this.leftPressed = true;
        }
        if (e.keyCode == 38) {
            this.upPressed = true;
        }
        if (e.keyCode == 39) {
            this.rightPressed = true;
        }
        if (e.keyCode == 40) {
            this.downPressed = true;
        }
    }
    this.onKeyUp = function(e) {
        if (e.keyCode == 37) {
            this.leftPressed = false;
        }
        if (e.keyCode == 38) {
            this.upPressed = false;
        }
        if (e.keyCode == 39) {
            this.rightPressed = false;
        }
        if (e.keyCode == 40) {
            this.downPressed = false;
        }
    }
    this.displace = function() {
        if (this.leftPressed) {
            this.x -= this.speedx;
        }
        if (this.rightPressed) {
            this.x += this.speedx;
        }
        if (this.downPressed) {
            this.y -= this.speedy;
        }
        if (this.upPressed) {
            this.y += this.speedy;
        }
    }

}

这是main.js代码：

canvas = document.getElementById("surface");
ctx = canvas.getContext("2d");

ctx.fillStyle = "black";
ctx.fillRect(0,0,canvas.width,canvas.height);



player1 = new player(500,500,7,7,25);


function draw() {
    ctx.fillStyle = "black";
    ctx.fillRect(0,0,canvas.width,canvas.height);

    player1.init();
    player1.displace();
}

setInterval(draw,10);

Answer 1

这看起来像是一个经典的Javascript错误：$('#form').submit(function(e) { //on form submit event var emptyInputs = $(this).find("input, select") //find input and select as I see in your html .not('[type="hidden"]') //not hidden .filter(function() { //get all empty return $(this).val() == ""; }); if (emptyInputs.length) { //if any empty alert('please fill all fields'); //show message e.preventDefault(); //prevent post form } }); function postvalue(id) { $('#value').val(id); }关键字并不像您期望的那样行事。

在此代码中：

this

function C() { this.prop = true; this.get = function() { return this.prop; } } var obj = new C();将返回obj.get()，但true将返回var get = obj.get; get()。关于为什么在这里有点疯狂的确切解释，但一般来说，最简单的答案是不要引用成员函数以便稍后执行。相反，做这样的事情：

undefined

这是有效的，因为lambda语法不会与document.addEventListener("keydown", e => { this.onKeyDown(e); }, false);混淆。如果你想支持pre-lambda JS，你可以做一些稍微丑陋的版本：

this

或使用var self = this; document.addEventListener("keydown", function(e) { self.onKeyDown(e); }, false);来修复它。

简而言之，有很多解决方案，但要了解所有这些解决方案，您需要很好地理解Javascript稍微古怪的原型继承系统。

Javascript事件监听器不会更新布尔值

1 个答案: