Javascript 我怎样才能使球在任何地方跳跃？

我试图让球在半空中跳跃，但我的代码总是传送到同一个位置然后跳跃，能告诉我如何解决我的这个问题吗？它需要能够在那个确切的时刻跳到任何地方，我已经用设定的间隔尝试了一些东西

var canvas, ctx, container;
canvas = document.createElement('canvas');
ctx = canvas.getContext("2d");
var ball;
var touchGround = false;
var pull= 0.43;
var vy;
var gravity = pull;
var i = Math.floor(Math.random()*11)
color =       ["red", "blue","green","yellow","purple","white","pink","silver","teal","turqu    oise","magenta","cyan"];
console.log(color[i])

function ballMovement() {
  vy += gravity;
  ball.y += vy;
  if (ball.y + ball.radius > canvas.height) {
    ball.y = canvas.height - ball.radius;
    vy = 0;

   var img = document.getElementById('gameOver');
   ctx.drawImage(gameOver, canvas.width/2-436, 100)
   ball.radius = 0;

  }
}

function init() {
  setupCanvas();
  var img = document.getElementById('gameOver');
  img.style.visibility = 'hidden';

  //how high the ball goes
  vy = -19;
  var y1 = 450
  ball = {
    x: canvas.width/2,
    //where the ball starts moving upwards
    y: 480, //here1
    radius: 20,
    status: 0,
    color: color[i]};
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);
  ctx.fillStyle = ball.color;
  ctx.fill();
  ctx.closePath()
  //draw a moving ball
  ballMovement();
}
setInterval(draw, 1000 / 35);

function setupCanvas() {
  container = document.createElement('div');
  container.className = "container";
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  document.body.appendChild(container);
  container.appendChild(canvas);
  ctx.strokeStyle = "#ffffff";
  ctx.lineWidth = 2;
}

window.onclick = function(jump){
  pull + 0.1;
  touchGround = false; 
  init()
  draw()
  ballMovement()
  setupCanvas()
  vy+((canvas.height-canvas.height)-ball.y);
}
//GOAL
//Ball jumps at somewhere in screen, let it jump wherever it is.

我试图让球在半空中跳跃，但我的代码总是传送到同一个位置然后跳跃，能告诉我如何解决我的这个问题吗？它需要能够在那个确切的时刻跳到任何地方，我已经用设定的间隔尝试了一些东西

var canvas, ctx, container;
canvas = document.createElement('canvas');
ctx = canvas.getContext("2d");
var ball;
var touchGround = false;
var pull= 0.43;
var vy;
var gravity = pull;
var i = Math.floor(Math.random()*11)
color =       ["red", "blue","green","yellow","purple","white","pink","silver","teal","turqu    oise","magenta","cyan"];
console.log(color[i])

function ballMovement() {
  vy += gravity;
  ball.y += vy;
  if (ball.y + ball.radius > canvas.height) {
    ball.y = canvas.height - ball.radius;
    vy = 0;

   var img = document.getElementById('gameOver');
   ctx.drawImage(gameOver, canvas.width/2-436, 100)
   ball.radius = 0;

  }
}

function init() {
  setupCanvas();
  var img = document.getElementById('gameOver');
  img.style.visibility = 'hidden';

  //how high the ball goes
  vy = -19;
  var y1 = 450
  ball = {
    x: canvas.width/2,
    //where the ball starts moving upwards
    y: 480, //here1
    radius: 20,
    status: 0,
    color: color[i]};
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);
  ctx.fillStyle = ball.color;
  ctx.fill();
  ctx.closePath()
  //draw a moving ball
  ballMovement();
}
setInterval(draw, 1000 / 35);

function setupCanvas() {
  container = document.createElement('div');
  container.className = "container";
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  document.body.appendChild(container);
  container.appendChild(canvas);
  ctx.strokeStyle = "#ffffff";
  ctx.lineWidth = 2;
}

window.onclick = function(jump){
  pull + 0.1;
  touchGround = false; 
  init()
  draw()
  ballMovement()
  setupCanvas()
  vy+((canvas.height-canvas.height)-ball.y);
}
//GOAL
//Ball jumps at somewhere in screen, let it jump wherever it is.

我试图让球在半空中跳跃，但我的代码总是传送到同一个位置然后跳跃，能告诉我如何解决我的这个问题吗？它需要能够在那个确切的时刻跳到任何地方，我已经用设定的间隔尝试了一些东西

var canvas, ctx, container;
canvas = document.createElement('canvas');
ctx = canvas.getContext("2d");
var ball;
var touchGround = false;
var pull= 0.43;
var vy;
var gravity = pull;
var i = Math.floor(Math.random()*11)
color =       ["red", "blue","green","yellow","purple","white","pink","silver","teal","turqu    oise","magenta","cyan"];
console.log(color[i])

function ballMovement() {
  vy += gravity;
  ball.y += vy;
  if (ball.y + ball.radius > canvas.height) {
    ball.y = canvas.height - ball.radius;
    vy = 0;

   var img = document.getElementById('gameOver');
   ctx.drawImage(gameOver, canvas.width/2-436, 100)
   ball.radius = 0;

  }
}

function init() {
  setupCanvas();
  var img = document.getElementById('gameOver');
  img.style.visibility = 'hidden';

  //how high the ball goes
  vy = -19;
  var y1 = 450
  ball = {
    x: canvas.width/2,
    //where the ball starts moving upwards
    y: 480, //here1
    radius: 20,
    status: 0,
    color: color[i]};
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);
  ctx.fillStyle = ball.color;
  ctx.fill();
  ctx.closePath()
  //draw a moving ball
  ballMovement();
}
setInterval(draw, 1000 / 35);

function setupCanvas() {
  container = document.createElement('div');
  container.className = "container";
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  document.body.appendChild(container);
  container.appendChild(canvas);
  ctx.strokeStyle = "#ffffff";
  ctx.lineWidth = 2;
}

window.onclick = function(jump){
  pull + 0.1;
  touchGround = false; 
  init()
  draw()
  ballMovement()
  setupCanvas()
  vy+((canvas.height-canvas.height)-ball.y);
}
//GOAL
//Ball jumps at somewhere in screen, let it jump wherever it is.

---

如果我猜对了，你希望你的球越来越高。但问题是，它的起点是固定的，所以需要改变的是：

var canvas, ctx, container;
canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 800;
ctx = canvas.getContext("2d");
var ball = {
    y: 480
};
var touchGround = false;
var pull= 0.43;
var vy;
var gravity = pull;
//Creating a variable to know whether our game is running
var gameRunning = 0;
var i = Math.floor(Math.random()*11);
//Adding variable for interval so we can start it with init function
var timer;
color = ["red", "blue","green","yellow","purple","pink","silver","teal","turquoise","magenta","cyan", "black"];

function ballMovement() {
  vy += gravity;
  ball.y += vy;

  if (ball.y + ball.radius > canvas.height) {
   ball.y = canvas.height - ball.radius;
   vy = 0;

   var img = document.getElementById('gameOver');
   ctx.drawImage(gameOver, canvas.width/2-436, 100)
   ball.radius = 0;
   //Stoping the draw function
   clearInterval(timer);
   //Saying the game isn't running
   gameRunning = 0;

  }
}

function init() {
  //Check if canvas already created  
  if(!document.querySelector('.container')){
    setupCanvas()   
  }

  vy = -19;
  var y1 = 450

  ball = {
    x: canvas.width/2,
    y: ball.y,
    radius: 20,
    status: 0,
    color: color[i]
  };

  //Clearing previous interval if it were any and creating a new one
  clearInterval(timer);
  timer = setInterval(draw, 1000 / 60);

  //Saying the game is running
  gameRunning = 1;
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);
  ctx.fillStyle = ball.color;
  ctx.fill();
  ctx.closePath()
  ballMovement();
}


function setupCanvas() {
  container = document.createElement('div');
  container.className = "container";
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  document.body.appendChild(container);
  container.appendChild(canvas);
  ctx.strokeStyle = "#ffffff";
  ctx.lineWidth = 2;
}

window.onclick = function(){
  pull + 0.1;
  touchGround = false; 
  //Check if the game is running or not
  //If it's not running - call init
  if(!gameRunning){
    init(); 
  }
  else{
    //If game is already running - change speed
    vy = -19;
  }
  //I've also removed some function that were starting with init itself

  vy+((canvas.height-canvas.height)-ball.y);
}

---

我到底应该把它放在哪里？请帮帮我，我还是个初学者谢谢，我应该在我的代码中加上你吗？或者说，我应该做些什么来表明你帮了很多忙？