Javascript Same Ball? or not

I made a ball game in javascript and a canvas where u can jump around whit WASD how to add a second ball whit the same exact stats only using the arrow keys instead


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

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

var x = innerHeight / 2;
var y = innerWidth / 4;
var dx = 0;
var dy= 0;
var radius = 30;

var gravity = 0.2;
var friction = 0.85;
var jump = 0.85;

var keyA = false;
var keyD = false;
var keyW = false;
var keyS = false;

var airTime = true;
var middle = innerHeight / 2;
var fallTime = false;

window.addEventListener("keyup", checkKeyUp, false);
window.addEventListener("keydown", checkKeyPressed, false);

function checkKeyUp(e) {
  if (e.keyCode == "83"){
      KeyS = false;
  }
  else if (e.keyCode == "87") {
      {
      keyW = false;
    }
  }
  else if(e.keyCode == "68") {
    keyD = false;
  }
  else if(e.keyCode == "65") {
      keyA = false;
  }
}

function checkKeyPressed(e) {
  if (e.keyCode == "83"){
      KeyS = true;
  }
  else if (e.keyCode == "87") {
      if(this.y + this.radius + this.dy > canvas.height - 32 || this.y + this.radius + this.dy > canvas.height - 33
      || this.y + this.radius + this.dy > canvas.height - 34 || this.y + this.radius + this.dy > canvas.height - 35
      || this.y + this.radius + this.dy > canvas.height - 30 || this.y + this.radius + this.dy > canvas.height - 31){
      keyW = true;
    }
  }
  else if(e.keyCode == "68") {
      keyD = true;
  }
  else if(e.keyCode == "65") {
      keyA = true;
  }
}


function animate(){
  requestAnimationFrame(animate);
  context.clearRect(0, 0, innerWidth, innerHeight);

  this.x = x;
  this.y = y;
  this.dx = dx;
  this.dy = dy;
  this.radius = radius;

  if (this.y + this.radius + this.dy > canvas.height - 30) {
    this.dy = -this.dy;
    this.dy = this.dy * friction;
    this.dx = this.dx * friction;
  } else {
    this.dy += gravity;
  }

  if (this.x + this.radius >= canvas.width || this.x - this.radius <= 0) {
    this.dx = -this.dx * friction;
  }
  this.x += this.dx;
  this.y += this.dy;
  console.log(y)

  move();
  function move() {
      if(keyA == true){
          x -= 8;
      }
      else if(keyD == true){
        x += 8;
      }
      else if(keyW == true){
        y -= 3 + (3 * jump);
        if(airTime == true){
       if(y = middle + (middle / 2) ){
          airTime = false;
          if(airTime = false){
            keyW = false;
          }
        }
      }
    }
  }
  draw();
  function draw() {

    context.beginPath();
    context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    context.fillStyle = 'black';
    context.fill();
  }
}

animate();

When I tested out your existing code on a sample canvas, only the left and right seemed to work.

W only works if ur standing still for a breaf second idk why tho

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.