Question

I'm trying to make a ball jump even in midair, but my code always just teleports to the same spot and then jumps, can anydody tell me how to fix this problem of mine? It needs to be able to jump wherever it is at that exact moment, and i've already tried something with set interval.

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

If I got you correctly you want your ball to go higher and higher. But problem is that you got fixed position where it's starts so where's what you need to change:

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

How can I make a ball jump wherever it is?

1 个答案: