按下键后如何跳转，Arrow-Up，

Question

有人能帮我完成这段代码吗？ this.update1 未完成 .. 我想从底部跳球。我想添加 eventListener 但我不确定如何全部编写。我在 youtube 上查看了一些教程，但是有人增加了速度、力量……我很困惑……请保持简单


var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d'); 

canvas.width = innerWidth ;  
canvas.height = innerHeight  ;


function Ball(x, y, dy, radius, color) {
    this.x = x;   // pozition x
    this.y = y;   // pozition y
  this.dy = dy  // direction y up/down 
    this.radius = radius;  
    this.color = color;


    this.update1 = function() { 
    
        this.draw();
    }

 
    this.draw = function() {
        c.beginPath();
        c.arc(this.x, this.y, this.radius, 0, Math.PI * 2); 
        c.fillStyle = this.color;
        c.fill();
        c.closePath();
    };
}

let ball1  

function init() {          
  ball1 = new Ball(canvas.width / 2 , canvas.height - 50 , 1 , 50    , 'blue')
}

function animate() {
    requestAnimationFrame(animate);
    c.clearRect(0, 0, canvas.width, canvas.height);
    ball1.update1()  // blue
}

init();
animate();

Answer 1

您可以在文档中为向上箭头添加一个事件侦听器，然后按如下方式更新球的 y 坐标：

var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d'); 

canvas.width = innerWidth ;  
canvas.height = innerHeight  ;


function Ball(x, y, dy, radius, color) {
    this.x = x;   // pozition x
    this.y = y;   // pozition y
  this.dy = dy  // direction y up/down 
    this.radius = radius;  
    this.color = color;


    this.update1 = function() { 
    
        this.draw();
    }

 
    this.draw = function() {
        c.beginPath();
        c.arc(this.x, this.y, this.radius, 0, Math.PI * 2); 
        c.fillStyle = this.color;
        c.fill();
        c.closePath();
    };
}

let ball1  

function init() {          
  ball1 = new Ball(canvas.width / 2 , canvas.height - 50 , 1 , 50    , 'blue')
}

function animate() {
    requestAnimationFrame(animate);
    c.clearRect(0, 0, canvas.width, canvas.height);
    ball1.update1()  // blue
}

init();
animate();  

// 1) Add an event listener to listen on the 'keydown' event on the document:
document.addEventListener("keydown", e =>{

  // 2) If the key pressed is the up arrow, then update the y coordinate of the ball
  if (e.keyCode === 38 ){
     ball1.y -= 10;
  }

})

<canvas></canvas>

按下键后如何跳转，Arrow-Up，

How to make jump after key down, Arrow-Up ,

javascript

canvas