Question

在下面的代码中，按C或V可以更改该球的速度。按V〜10次，并在5-10秒后按箭头按钮。我的错误在哪里？

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;

function circle(x, y, radius, fillCircle) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2, false);
  if (fillCircle) {
    ctx.fill();
  } else {
    ctx.stroke();
  }
};

function ball() {
  this.speed = 5;
  this.x = width / 2;
  this.y = height / 2;
  this.xSpeed = this.speed;
  this.ySpeed = 0;
  this.size = 5;
};
ball.prototype.move = function() {
  this.x += this.xSpeed;
  this.y += this.ySpeed;

  if (this.x < 0) {
    this.x = width;
  } else if (this.x > width) {
    this.x = 0;
  }

  if (this.y > height) {
    this.y = 0;
  } else if (this.y < 0) {
    this.y = height;
  }
};
ball.prototype.draw = function() {
  circle(this.x, this.y, this.size, true);
};
ball.prototype.setDirection = function(direction) {
  if (direction === "up") {
    this.xSpeed = 0;
    this.ySpeed = -this.speed;
  } else if (direction === "down") {
    this.xSpeed = 0;
    this.ySpeed = this.speed;
  } else if (direction === "right") {
    this.xSpeed = this.speed;
    this.ySpeed = 0;
  } else if (direction === "left") {
    this.xSpeed = -this.speed;
    this.ySpeed = 0;
  } else if (direction === "stop") {
    this.xSpeed = 0;
    this.ySpeed = 0;
  }
};
ball.prototype.doCommand = function(direction) {
  if (direction === "X") {
    this.size += 2;
  } else if (direction === "Z") {
    this.size -= 2;
  } else if (direction === "C") {
    this.speed -= 2;
  } else if (direction === "V") {
    this.speed += 2;
  }
  if (this.speed < 0) {
    this.speed = 1;
  }
  if (this.size < 0) {
    this.size = 1;
  }
}
var Ball = new ball();
var commands = ["Z", "X", "C", "V"];

var keyActions = {
  32: "stop",
  37: "left",
  38: "up",
  39: "right",
  40: "down",
  90: "Z",
  88: "X",
  67: "C",
  86: "V"
};

$("body").keydown(function(event) {
  var direction = keyActions[event.keyCode];
  for (var n = 0; n < commands.length; n++) {
    if (direction === commands[n]) {
      Ball.doCommand(direction);
    } else {
      Ball.setDirection(direction);
    }
  };
});
setInterval(function() {
  ctx.clearRect(0, 0, width, height);
  Ball.draw();
  Ball.move();
  ctx.strokeRect(0, 0, width, height);
}, 30);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<canvas id="canvas" width="400" height="400"></canvas>

Answer 1

我已经更新了您的代码。

keydown处理程序中的第一件事，我们不需要循环。我已经改变了。我也更新了Do Command。这是问题所在：您没有在doCommand中更新xspeed和yspeed，因为我对c＆v所做的更改。我希望这就是您的期望。

请找到更新的代码。

render() {
    const { responseData, Movietitle, selectedProject } = this.state;
    const selectedMovie = responseData.find(item => item.id === Movietitle);

    return (
        <Picker
            mode="dialog"
            selectedValue={selectedProject}
            onValueChange={project => this.setState({ selectedProject: project })}
        >
            { 
                selectedMovie.project.map((project, projectIndex) => (
                    <Picker.Item label={project} value={project} key={`${Movietitle}-${projectIndex}`} />
                ))
            }
        </Picker>
    );
}

jQuery按下箭头按钮后获取我的按钮

1 个答案: