Orbit ball

by Raul Bojalil

HTML

<div id="debug">Debug</div>
<canvas width="600" height="1000"></canvas>

JavaScript

//Html elements
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var $debug = document.getElementById("debug");

//Constants
var initialJumpAcceleration = -15;
var groundY = 400;
var gravity = 0.03;
var movementSpeed = 0.2;
var maxGravityAcceleration = 10;
var levelWidth = 600;
var isDrawing = false;
var boundings = canvas.getBoundingClientRect();

//State
var player = {
	x: 100, y: 0, w: 10, h: 30, jumps: 0, powerups: 0, isMovingLeft: false, isMovingRight: false,
  isJumping: false, wantsToJump: false, isFalling: false, isJumpHeld: false, gravityAcceleration: 0, xAcceleration: 0,
  rotationTimer: 0,
};

var pixels = [];

  function setMouseCoordinates(event) {
    mouseX = event.clientX - boundings.left;
    mouseY = event.clientY - boundings.top;
  }

  function getDistance(x1, y1, x2, y2) {
    let y = x2 - x1;
    let x = y2 - y1;

    return Math.sqrt(x * x + y * y);
	}
  
  function extendLine(newX, newY) {
  
     pixels.push({ x: newX, y: newY });
  	 var totalDistance = 0;
     
     for (var i=0; i < pixels.length - 1; i++) {
      var distance = getDistance(pixels[i].x, pixels[i].y, pixels[i+1].x, pixels[i+1].y);
      pixels[i + 1].distance = distance;
     	totalDistance += distance;
     }
     
     if (totalDistance > 100) {
     	pixels.pop();
     }
  	
    //if (pixels.length > 30) {
    	//pixels.shift();
    //}
  }

  canvas.addEventListener('mousedown', function(event) {
  	pixels = [];
    setMouseCoordinates(event);
    isDrawing = true;

    // Start Drawing
    //ctx.beginPath();
    //ctx.moveTo(mouseX, mouseY);
    extendLine(mouseX, mouseY);
  });

  // Mouse Move Event
  canvas.addEventListener('mousemove', function(event) {
    setMouseCoordinates(event);

    if(isDrawing){
      //ctx.lineTo(mouseX, mouseY);
      //ctx.stroke();
    	extendLine(mouseX, mouseY);
    }
  });

  // Mouse Up Event
  canvas.addEventListener('mouseup', function(event) {
    const first = pixels.shift();
    const last...