Drop The Ball v2

by 79brue

JavaScript

var DB= window.localStorage;

document.write('<div id="canvasArea"> </div> 단계를 선택할 때에는, 방향키 및 엔터만 사용하세요. (위쪽 방향키로 월드 선택 취소가 가능합니다.)<br /> 게임 중에는, 점선 위의 원하는 지역을 클릭해 공을 추가하세요. <br /> R키를 눌러 단계를 다시 시작할 수 있습니다. Q키로 단계에서 나갈 수 있습니다.<br />저장은 자동입니다.<br /><br /><br />');

var canvasArea = document.getElementById('canvasArea');
canvasArea.innerHTML = '<canvas id="myCanvas" width="720" height="480" style="border:1px solid #000000;"> </canvas>';
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

const restitution = 0.9;

var abs = function(x) {
  if (x < 0) return -x;
  return x;
};

var SQR = function(x) {
  return x * x;
}

var max = function(x, y){
  if(x<y) return y;
  return x;
}

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

var changeCoordinates = function(p, deg) {
  return new Point(p.x * Math.cos(deg) + p.y * Math.sin(deg),
    p.y * Math.cos(deg) - p.x * Math.sin(deg));
}

class Sphere {
  constructor(x, y, r, movable) {
    this.type = 'Sphere';
    this.center = new Point(x, y);
    this.r = r;
    this.movable = movable;
    this.vx = 0;
    this.vy = 0;
    this.exist = 1;

    if (movable) {
      this.mass = Math.PI * r * r;
    } else this.mass = 1e20;

    console.log(this.mass);
  }

  updateLocation() {
    if (!this.movable) return;
    if (this.center.x - this.r < 0) {
      this.vx = abs(this.vx) * restitution;
      this.center.x = this.r;
    }
    if (this.center.x + this.r > 720) {
      this.vx = -abs(this.vx) * restitution;
      this.center.x = 720 - this.r;
    }
    if (this.center.y - this.r < 0) {
      this.vy = abs(this.vy) * restitution;
      this.center.y = this.r;
    }
    if (this.center.y + this.r > 480) {
      this.vy = -abs(this.vy) * restitution;
      this.center.y = 480 - this.r;
    }

    this.vy += 0.98 * 1.7; // g = 9.8m/s^2
    this.center.x += 0.01 * this.vx;
    this.center.y += 0.01 * this.vy;
  }

  drawInCanvas() {
    ctx.strokeStyle = "black";
   ...