From 52e676c245078731cb08e7eb0e2183d047f40a6f Mon Sep 17 00:00:00 2001
From: Abhay <80220229+EpicGamer007@users.noreply.github.com>
Date: Mon, 14 Jun 2021 02:22:39 +0000
Subject: [PATCH] Added sensitivity option
---
README.md | 6 +++---
src/public/scripts/script.js | 12 +++++++++--
src/public/styles/style.css | 39 ++++++++++++++++++++++++++++++++++++
src/views/index.ejs | 4 ++++
4 files changed, 56 insertions(+), 5 deletions(-)
diff --git a/README.md b/README.md
index 9822ca0..49179f1 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
A parkour game where you run away from elmo! With a leaderboard.
## The Game ##
-Your goal is to run as far as you can before falling down or elmo eating you.
+Your goal is to run as far as you can before falling down or elmo eating you. Kind of like temple run (If you know what that is, pog).
* WASD to move
* W - Forward
@@ -28,8 +28,8 @@ There are also different kinds of platforms:
Make sure to check out the leaderboard at `/leaderboard`. If you want your name on it, make sure to login with replit ;).
## Feedback (Work in Progress) ##
-
-* Add sensitivity option
+* Currently working on achievements
+* ~~Add sensitivity option~~ (Done 6/13/2021)
* Add arrow or some way to indicate which way to go at the start.
* Github auth (because only 9 year olds use replit)
diff --git a/src/public/scripts/script.js b/src/public/scripts/script.js
index f543738..455d10a 100644
--- a/src/public/scripts/script.js
+++ b/src/public/scripts/script.js
@@ -26,6 +26,14 @@ const canvas = document.getElementById('c');
canvas.width = innerHeight * 4 / 3;
canvas.height = innerHeight;
+const sensitivityFactorElem = document.querySelector("#sensitivity > input");
+
+let sensitivityFactor = 200 - sensitivityFactorElem.value;
+
+sensitivityFactorElem.oninput = () => {
+ sensitivityFactor = 200 - sensitivityFactorElem.value;
+}
+
const renderer = new Three.WebGLRenderer(
{ canvas, antialias: true }
);
@@ -315,8 +323,8 @@ onkeyup = e => {
onmousemove = e => {
if (document.pointerLockElement) {
- player.rotation.y -= e.movementX / 100;
- camera.rotation.x -= e.movementY / 100;
+ player.rotation.y -= e.movementX / sensitivityFactor; // this is all we need to change for sensitivity
+ camera.rotation.x -= e.movementY / sensitivityFactor; // default was 100 before, remember that ig, ok
}
}
diff --git a/src/public/styles/style.css b/src/public/styles/style.css
index d2b7880..0e8df52 100644
--- a/src/public/styles/style.css
+++ b/src/public/styles/style.css
@@ -75,4 +75,43 @@ a {
right: 50%;
z-index: 15;
color: ghostwhite;
+}
+
+.slider {
+ -webkit-appearance: none;
+ width: 100%;
+ height: 15px;
+ border-radius: 5px;
+ background: #d3d3d3;
+ outline: none;
+ opacity: 0.7;
+ -webkit-transition: .2s;
+ transition: opacity .2s;
+}
+
+.slider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 25px;
+ height: 25px;
+ border-radius: 50%;
+ background: #04AA6D;
+ cursor: pointer;
+}
+
+.slider::-moz-range-thumb {
+ width: 25px;
+ height: 25px;
+ border-radius: 50%;
+ background: #04AA6D;
+ cursor: pointer;
+}
+
+#sensitivity p {
+ margin-bottom: 0px;
+}
+
+#sensitivity {
+ position: relative;
+ top: 200px;
}
\ No newline at end of file
diff --git a/src/views/index.ejs b/src/views/index.ejs
index 483b03c..41e9f69 100644
--- a/src/views/index.ejs
+++ b/src/views/index.ejs
@@ -25,6 +25,10 @@