这是我第一次使用jQuery的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;
}<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<canvas id="canvas-for-ball" height="800px" width="800px"></canvas>您正在尝试将数学运算直接应用于修饰符 get 和 set(水平速度/垂直速度(;
myBall.HorizontalSpeed--;
尝试将此行更新为;
myBall._ySpeed--;
或;
myBall.HorizontalSpeed(myBall._ySpeed--);