jQuery Keydown事件使球消失

时间:2018-10-22 14:39:21

标签: javascript jquery event-handling keydown

这是我第一次使用jQuery的>>> import numpy as np >>> >>> class By_Row: ... def __getitem__(self, idx): ... y, *x = (np.arange(i.start, i.stop, i.step) for i in idx) ... return y.repeat(np.fromiter((i.size for i in x), int, y.size)), np.concatenate(x) ... >>> >>> b_ = By_Row() >>> >>> A = sum(np.ogrid[:600:100, :12]) >>> A array([[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], [100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111], [200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211], [300, 301, 302, 303, 304, 305, 306, 307, 308, 309, 310, 311], [400, 401, 402, 403, 404, 405, 406, 407, 408, 409, 410, 411], [500, 501, 502, 503, 504, 505, 506, 507, 508, 509, 510, 511]]) >>> A[b_[2:5, 2:4, 3:7, 0:11]] array([202, 203, 303, 304, 305, 306, 400, 401, 402, 403, 404, 405, 406, 407, 408, 409, 410]) 事件。我按照讲师的指示进行,但活动仍无法正常进行。我已尽一切努力。

该应用程序将执行,但是每当我按箭头键时,移动的球就会消失在稀薄的空气中。箭头键用于增加/减小运动球的速度。

keydown
// Gets a handle to the element with id canvasOne.
var canvas = document.getElementById("canvas-for-ball");
// Get a 2D context for the canvas.
var ctx = canvas.getContext("2d");

// The vertical location of the ball.
var y = 15;
var x = 25;
//data of ball
var ballRadius = 20;
var ySpeed = 1;
var xSpeed = 1;
var slices = 7;

class Ball {
  constructor(x, y, ballRadius, ySpeed, xSpeed, slices) {
    this._x = x;
    this._y = y
    this._ballRadius = ballRadius;
    this._ySpeed = ySpeed;
    this._xSpeed = xSpeed;
    this._slices = slices;
  } //endConstructor

  // setter for ySpeed
  set VerticleSpeed(val) {
    this._ySpeed = val;
  }

  //getter/setter for y
  get VerticlePosition() {
    return this._y;
  }

  // setter for xSpeed
  set HorizontalSpeed(val) {
    this._xSpeed = val;
  }

  //getter/setter for y
  get HorizontalPosition() {
    return this._x;
  }

  //dont need 'function' keyword infront of a function -- Note for the future
  drawball() {
    //variables for slicing beachball
    var newX = 20;
    var newY = 20;
    var i = 0;

    ctx.beginPath();
    //outer circle
    ctx.arc(this._x, this._y, this._ballRadius, 0, 2 * Math.PI);
    //inner circle (for beachball)
    ctx.arc(this._x, this._y, this._ballRadius * 0.85, 0, 2 * Math.PI);
    //draw line from center to edge
    ctx.moveTo(this._x, this._y);
    ctx.lineTo(this._x + this._ballRadius, this._y);
    ctx.stroke();

    //loop to draw slices
    for (i = 1; i < this._slices; i++) {
      newX = this._ballRadius * Math.cos((i * 2 * Math.PI) / this._slices) + this._x;
      newY = this._ballRadius * Math.sin((i * 2 * Math.PI) / this._slices) + this._y;
      ctx.moveTo(newX, newY);
      ctx.lineTo(this._x, this._y);
      ctx.closePath();
      ctx.stroke();
    }

    //colors ball orange
    ctx.fillStyle = "rgb(255, 165, 0)";
    ctx.fill();
    ctx.stroke();
  } //endDrawball

  draw() {
    ctx.clearRect(1, 1, 800, 800);
    this.drawball();
  } //endDraw

  move() {
    // Update the y+x location.
    this._y += this._ySpeed;
    this._x += this._xSpeed;

    //bounce if its outside the bounds x and y
    if (myBall.VerticlePosition > canvas.height) {
      myBall.VerticleSpeed = -ySpeed;
    } else if (myBall.VerticlePosition <= 0) {
      myBall.VerticleSpeed = ySpeed;
    }

    if (myBall.HorizontalPosition > canvas.width) {
      myBall.HorizontalSpeed = -xSpeed;
    } else if (myBall.HorizontalPosition <= 0) {
      myBall.HorizontalSpeed = xSpeed;
    }


    //console.log("Ball position y/x", this._y, this._x);
  }

} //endBall

// Add a Javascript event listener to the keypress event.
window.addEventListener("keypress", function(event) {
  // Just log the event to the console.
  console.log(event);
});

//keypresses with jQuery
$(document.body).on('keydown', function(e) {
  console.log(e.which);
  switch (e.which) {
    // key code for left arrow
    case 37:
      console.log('left arrow key pressed!');
      myBall.HorizontalSpeed--;
      break;
      //key code for up arrow
    case 38:
      console.log('up arrow key pressed!');
      myBall.VerticleSpeed++;
      break;
      // key code for right arrow
    case 39:
      console.log('right arrow key pressed!');
      myBall.HorizontalSpeed++;
      break;
      // key code for down arrow
    case 40:
      console.log('down arrow key pressed!');
      myBall.VerticleSpeed--;
      break;
  }
});

// A function to repeat every time the animation loops.
function repeatme() {
  // Draw the ball (stroked, not filled).
  myBall.draw();
  myBall.move();

  window.requestAnimationFrame(repeatme);
}

// create an instance of class
let myBall = new Ball(x, y, ballRadius, ySpeed, xSpeed, slices)
// Get the animation going.
repeatme();
body {
  background-color: white;
}

canvas {
  border: 3px solid black;
}

1 个答案:

答案 0 :(得分:1)

您正尝试将数学运算直接应用于修饰符get和set( Horizo​​ntalSpeed / VerticalSpeed );

myBall.HorizontalSpeed--;

尝试将此行更新为;

myBall._ySpeed--;

或者;

myBall.HorizontalSpeed(myBall._ySpeed--);