141 lines
4.4 KiB
JavaScript
141 lines
4.4 KiB
JavaScript
function distance(p1, p2) {
|
|
return Math.sqrt((p1.x-p2.x)**2 + (p1.y-p2.y)**2);
|
|
}
|
|
function directionalScale(p1, value) {
|
|
if (Math.abs(p1.x) >= Math.abs(p1.y)) {
|
|
const k = Math.abs(p1.x)/Math.abs(p1.y);
|
|
const output = {};
|
|
output.x = Math.sign(p1.x)*value;
|
|
output.y = Math.sign(p1.y)*value*k;
|
|
return output;
|
|
} else {
|
|
const k = Math.abs(p1.y)/Math.abs(p1.x);
|
|
const output = {};
|
|
output.y = Math.sign(p1.y)*value;
|
|
output.x = Math.sign(p1.x)*value*k;
|
|
return output;
|
|
}
|
|
}
|
|
class N {
|
|
constructor(world, mass=1, x=0, y=window.innerHeight - 43, bounce=0.7) {
|
|
this.pos = {};
|
|
this.vel = {};
|
|
world.addObject(this);
|
|
this.world = world;
|
|
this.mass = mass || 1;
|
|
this.pos.x = x || 0;
|
|
this.pos.y = y || window.innerHeight - 43;
|
|
this.vel.x = 0;
|
|
this.vel.y = 0;
|
|
this.bounce = bounce;
|
|
this.element = document.createElement("div");
|
|
this.element.classList.add("anN");
|
|
this.element.innerText = "n";
|
|
document.body.appendChild(this.element);
|
|
|
|
}
|
|
draw() {
|
|
this.vel.y -= this.world.gravity;
|
|
this.vel.x -= this.vel.x < 0 ? -this.world.airResistance * this.vel.x**2 : this.world.airResistance * this.vel.x**2;
|
|
this.vel.y -= this.vel.y < 0 ? -this.world.airResistance * this.vel.y**2 : this.world.airResistance * this.vel.y**2;
|
|
this.pos.x += this.vel.x;
|
|
this.pos.y += this.vel.y;
|
|
if (this.pos.x < 0 || this.pos.x > (window.innerWidth - 20)) {
|
|
this.vel.x = -this.vel.x*this.bounce;
|
|
this.vel.y = this.vel.y*this.bounce;
|
|
if (this.pos.x < 0) {
|
|
this.pos.x = 0;
|
|
} else {
|
|
this.pos.x = window.innerWidth - 20;
|
|
}
|
|
}
|
|
if (this.pos.y < -9 || this.pos.y > (window.innerHeight - 25)) {
|
|
this.vel.y = -this.vel.y*this.bounce;
|
|
this.vel.x = this.vel.x*this.bounce;
|
|
if (this.pos.y < -9) {
|
|
this.pos.y = -9;
|
|
} else {
|
|
this.pos.y = window.innerHeight - 25;
|
|
}
|
|
}
|
|
/*if (mouseDown) {
|
|
if (distance(this.pos, {x: cursorX, y: cursorY}) > 5) {
|
|
const force = directionalScale({
|
|
x: cursorX - this.pos.x,
|
|
y: cursorY - this.pos.y
|
|
}, distance(this.pos, {x: cursorX, y: cursorY}) ** -1);
|
|
this.vel.x += force.x * 1;
|
|
document.getElementById("xForce").value = force.x+1;
|
|
this.vel.y += force.y * 1;
|
|
document.getElementById("yForce").value = force.y+1;
|
|
} else {
|
|
this.vel.x = 0;
|
|
this.vel.y = 0;
|
|
}
|
|
}*/
|
|
if (mouseDown) {
|
|
this.nudge((cursorX - this.pos.x)/50, (cursorY - this.pos.y)/50);
|
|
}
|
|
this.element.style.left = this.pos.x + "px";
|
|
this.element.style.bottom = this.pos.y + "px";
|
|
}
|
|
nudge(x=0,y=0) {
|
|
this.vel.x += x;
|
|
this.vel.y += y;
|
|
}
|
|
|
|
}
|
|
class World {
|
|
draw() {
|
|
this.objects.forEach(e => e.draw());
|
|
}
|
|
addObject(object) {
|
|
this.objects.push(object);
|
|
}
|
|
constructor(gravity=1, airResistance) {
|
|
this.gravity = gravity;
|
|
this.airResistance = airResistance || 0.001;
|
|
this.objects = [];
|
|
}
|
|
}
|
|
let world;
|
|
let n;
|
|
let cursorX;
|
|
let cursorY;
|
|
let mouseDown = false;
|
|
let mouseDownEver = false;
|
|
document.onmousedown = function(e) {
|
|
if (e.button === 0) {
|
|
mouseDown = true;
|
|
mouseDownEver = true;
|
|
document.getElementById("hint").innerText = "";
|
|
}
|
|
};
|
|
document.onmouseup = function(e) {
|
|
if (e.button === 0) {
|
|
mouseDown = false;
|
|
}
|
|
};
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
world = new World();
|
|
n = new N(world);
|
|
setInterval(() => {world.draw()}, 10);
|
|
setTimeout(() => {
|
|
if (!mouseDownEver) {
|
|
document.getElementById("hint").innerText = "This works best on a PC. Try clicking/holding your mouse. ;)"
|
|
}
|
|
}, 3000)
|
|
});
|
|
document.addEventListener("mousemove", (e) => {
|
|
cursorX = e.pageX;
|
|
cursorY = window.innerHeight - e.pageY;
|
|
});
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
let webSocket = new WebSocket("ws://localhost:8081/socket");
|
|
webSocket.addEventListener("message", (e) => {
|
|
let nudgeReq = JSON.parse(e.data);
|
|
n.nudge(nudgeReq[0] / 10, nudgeReq[1] / 10);
|
|
});
|
|
});
|