Как я могу сделать прыжок мяча, где бы он ни находился?

Question

Я пытаюсь заставить мяч прыгать даже в воздухе, но мой код всегда просто телепортируется в одно и то же место, а затем прыгает, кто-нибудь может сказать мне, как решить эту мою проблему? Он должен быть в состоянии прыгать, где бы он ни находился в данный момент, и я уже что-то пробовал с заданным интервалом.

Я пытаюсь заставить мяч прыгать даже в воздухе, но мой код всегда просто телепортируется в одно и то же место, а затем прыгает, кто-нибудь может сказать мне, как решить мою проблему? Он должен быть в состоянии прыгать, где бы он ни находился в данный момент, и я уже что-то пробовал с заданным интервалом.

Я пытаюсь заставить мяч прыгать даже в воздухе, но мой код всегда просто телепортируется в одно и то же место, а затем прыгает, может кто-нибудь сказать мне, как решить эту мою проблему? Он должен быть в состоянии прыгать, где бы он ни находился в данный момент, и я уже что-то пробовал с заданным интервалом.

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.

Answer 1

Если я правильно вас понял, вы хотите, чтобы ваш мяч поднимался все выше и выше. Но проблема в том, что вы получили фиксированную позицию, где она начинается, и где то, что вам нужно изменить:

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);
}