Initial commit
Grnscrnr's live version
This commit is contained in:
Greenscreener
Vojtěch Káně
commit
ba54156da9
22
controller/controller.html
Normal file
22
controller/controller.html
Normal file
@ -0,0 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>The Fancy N</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="./main.css">
|
||||
<script src="controller.js"></script>
|
||||
<meta name="viewport" content="width=300px, initial-scale=1">
|
||||
<style>
|
||||
body {
|
||||
touch-action: none;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="slingshot">
|
||||
<span class="n">n </span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
50
controller/controller.js
Normal file
50
controller/controller.js
Normal file
@ -0,0 +1,50 @@
|
||||
let mouseDown = false;
|
||||
let mouseDownEver = false;
|
||||
document.onmousedown = function(e) {
|
||||
if (e.button === 0) {
|
||||
mouseDown = true;
|
||||
mouseDownEver = true;
|
||||
}
|
||||
};
|
||||
document.onmouseup = function(e) {
|
||||
if (e.button === 0) {
|
||||
mouseDown = false;
|
||||
document.getElementById("slingshot").classList.add("ungrabbed");
|
||||
}
|
||||
};
|
||||
document.ontouchend = function(e) {
|
||||
document.getElementById("slingshot").classList.add("ungrabbed");
|
||||
};
|
||||
document.ontouchstart = function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
};
|
||||
function distance(p1, p2) {
|
||||
return Math.sqrt((p1.x-p2.x)**2 + (p1.y-p2.y)**2);
|
||||
}
|
||||
|
||||
document.addEventListener("mousemove", (e) => {
|
||||
if (mouseDown) {
|
||||
document.getElementById("slingshot").classList.remove("ungrabbed");
|
||||
cursorX = e.pageX;
|
||||
cursorY = window.innerHeight - e.pageY;
|
||||
const slingshot = document.getElementById("slingshot");
|
||||
slingshot.style.width = distance({x: cursorX, y: cursorY}, {
|
||||
x: window.innerWidth / 2,
|
||||
y: window.innerHeight / 2
|
||||
}) + "px";
|
||||
const angle = cursorX >= window.innerWidth / 2 ? -Math.atan((window.innerHeight / 2 - cursorY) / (window.innerWidth / 2 - cursorX)) : (-Math.atan((window.innerHeight / 2 - cursorY) / (window.innerWidth / 2 - cursorX)) - Math.PI);
|
||||
slingshot.style.transform = "rotate(" + angle + "rad)";
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
document.addEventListener("touchmove", (e) => {
|
||||
document.getElementById("slingshot").classList.remove("ungrabbed");
|
||||
cursorX = e.touches[0].clientX;
|
||||
cursorY = window.innerHeight - e.touches[0].clientY;
|
||||
const slingshot = document.getElementById("slingshot");
|
||||
slingshot.style.width = distance({x: cursorX, y: cursorY}, {x: window.innerWidth/2, y: window.innerHeight/2}) + "px";
|
||||
const angle = cursorX >= window.innerWidth/2 ? -Math.atan((window.innerHeight/2 - cursorY)/(window.innerWidth/2 - cursorX)) : (-Math.atan((window.innerHeight/2 - cursorY)/(window.innerWidth/2 - cursorX)) - Math.PI);
|
||||
slingshot.style.transform = "rotate(" + angle + "rad)";
|
||||
});
|
||||
52
controller/main.css
Normal file
52
controller/main.css
Normal file
@ -0,0 +1,52 @@
|
||||
.anN {
|
||||
font-family: 'Roboto Slab', serif;
|
||||
font-size: xx-large;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: fixed; }
|
||||
|
||||
#slingshot {
|
||||
position: fixed;
|
||||
height: 20px;
|
||||
left: 50%;
|
||||
top: calc(50% - 10px);
|
||||
width: 50px;
|
||||
border: saddlebrown solid 5px;
|
||||
border-right: chocolate solid 15px;
|
||||
border-left: #3e1f12 solid 5px;
|
||||
text-align: right;
|
||||
font-family: 'Roboto Slab', serif;
|
||||
font-size: 23px;
|
||||
line-height: 0px;
|
||||
writing-mode: vertical-rl;
|
||||
transform: rotate(90deg);
|
||||
transform-origin: left center;
|
||||
-webkit-touch-callout: none;
|
||||
/* iOS Safari */
|
||||
-webkit-user-select: none;
|
||||
/* Safari */
|
||||
-khtml-user-select: none;
|
||||
/* Konqueror HTML */
|
||||
-moz-user-select: none;
|
||||
/* Firefox */
|
||||
-ms-user-select: none;
|
||||
/* Internet Explorer/Edge */
|
||||
user-select: none;
|
||||
/* Non-prefixed version, currently supported by Chrome and Opera */ }
|
||||
#slingshot.ungrabbed {
|
||||
width: 0 !important;
|
||||
transition: width 0.1s cubic-bezier(0.02, 0.9, 0.64, 0.98); }
|
||||
#slingshot.ungrabbed > .n {
|
||||
animation: n-fling .2s ease-out .1s; }
|
||||
@keyframes n-fling {
|
||||
0% {
|
||||
right: 0; }
|
||||
50% {
|
||||
right: 100px; }
|
||||
100% {
|
||||
right: 0; } }
|
||||
#slingshot .n {
|
||||
position: relative;
|
||||
right: 0px; }
|
||||
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
14
index.html
Normal file
14
index.html
Normal file
@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>The Fancy N</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="./main.css">
|
||||
<script src="main.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="hint"></div>
|
||||
</body>
|
||||
</html>
|
||||
52
main.css
Normal file
52
main.css
Normal file
@ -0,0 +1,52 @@
|
||||
.anN {
|
||||
font-family: 'Roboto Slab', serif;
|
||||
font-size: xx-large;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: fixed; }
|
||||
|
||||
#slingshot {
|
||||
position: fixed;
|
||||
height: 20px;
|
||||
left: 50%;
|
||||
top: calc(50% - 10px);
|
||||
width: 50px;
|
||||
border: saddlebrown solid 5px;
|
||||
border-right: chocolate solid 15px;
|
||||
border-left: #3e1f12 solid 5px;
|
||||
text-align: right;
|
||||
font-family: 'Roboto Slab', serif;
|
||||
font-size: 23px;
|
||||
line-height: 0px;
|
||||
writing-mode: vertical-rl;
|
||||
transform: rotate(90deg);
|
||||
transform-origin: left center;
|
||||
-webkit-touch-callout: none;
|
||||
/* iOS Safari */
|
||||
-webkit-user-select: none;
|
||||
/* Safari */
|
||||
-khtml-user-select: none;
|
||||
/* Konqueror HTML */
|
||||
-moz-user-select: none;
|
||||
/* Firefox */
|
||||
-ms-user-select: none;
|
||||
/* Internet Explorer/Edge */
|
||||
user-select: none;
|
||||
/* Non-prefixed version, currently supported by Chrome and Opera */ }
|
||||
#slingshot.ungrabbed {
|
||||
width: 0 !important;
|
||||
transition: width 0.1s cubic-bezier(0.02, 0.9, 0.64, 0.98); }
|
||||
#slingshot.ungrabbed > .n {
|
||||
animation: n-fling .2s ease-out .1s; }
|
||||
@keyframes n-fling {
|
||||
0% {
|
||||
right: 0; }
|
||||
50% {
|
||||
right: 100px; }
|
||||
100% {
|
||||
right: 0; } }
|
||||
#slingshot .n {
|
||||
position: relative;
|
||||
right: 0px; }
|
||||
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
132
main.js
Normal file
132
main.js
Normal file
@ -0,0 +1,132 @@
|
||||
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;
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user