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