Oh for god mothers sake please let it work!

LICENSE

@@ -1,4 +1,4 @@
-                    GNU GENERAL PUBLIC LICENSE
+GNU GENERAL PUBLIC LICENSE
                        Version 3, 29 June 2007
 
  Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
@@ -671,4 +671,4 @@ into proprietary programs.  If your program is a subroutine library, you
 may consider it more useful to permit linking proprietary applications with
 the library.  If this is what you want to do, use the GNU Lesser General
 Public License instead of this License.  But first, please read
-<https://www.gnu.org/licenses/why-not-lgpl.html>.
+<https://www.gnu.org/licenses/why-not-lgpl.html>.

api/advanced.js

@@ -4,4 +4,4 @@ function sleep(milliseconds) {
   do {
     currentDate = Date.now();
   } while (currentDate - date < milliseconds);
-}
+}

api/game.js

@@ -57,35 +57,80 @@ function startGame() {
 
   game = "running";
 
-  render();
-
-  if(touchdevice) {
-
-    mstick = document.querySelector("#mstick");
-    astick = document.querySelector("#astick");
+
 
-
-    showDOM(mstick);
-    showDOM(astick);
 
-    window.mstick = nipplejs.create({
+  if (touchdevice) {
+
+    //mstick and astick are predefined
+    const mstick = document.querySelector("#mstick");
+    const astick = document.querySelector("#astick");
+
+    window.mstick = {
+      position: {
+        x:0, y:0
+      }, 
+      distance: 0,
+      direction: {
+        degree: 0, radian: 0
+      },
+      moving: false
+    };
+
+    window.astick = {
+      position: {
+        x:0, y:0
+      }, 
+      distance: 0,
+      direction: {
+        degree: 0, radian: 0
+      },
+      moving: false
+    };
+
+    window.mstickInstance = nipplejs.create({
       color: "#000000",
       shape: "square",
       zone: mstick,
       threshold: 0.5,
-      fadeTime: 300
+      fadeTime: 300,
     });
 
-    window.astick = nipplejs.create({
+    window.astickInstance = nipplejs.create({
       color: "#000000",
       shape: "circle",
       zone: astick,
       threshold: 0.5,
-      fadeTime: 300
+      fadeTime: 300,
+    });
+
+    window.mstickInstance.on("move", (event, nipple) => {
+      window.mstick.position = nipple.position;
+      window.mstick.distance = nipple.distance;
+      window.mstick.direction = nipple.angle;
+      window.mstick.moving = true;
+      console.log(window.mstick);
+    });
+
+    window.astickInstance.on("move", (event, nipple) => {
+      window.astick.position = nipple.position;
+      window.astick.distance = nipple.distance;
+      window.astick.direction = nipple.angle;
+      window.astick.moving = true;
+      console.log(window.astick);
+    });
+
+    window.astickInstance.on("end", (event, nipple) => {
+      window.astick.moving = false;
+    });
+
+    window.mstickInstance.on("end", (event, nipple) => {
+      window.mstick.moving = false;
     });
-
   }
 
+  render();
+
   document.title = "Islr.io - Playing";
   hideMenu(document, 0);
   hideMenu(document, 1);

cache.manifest

@@ -0,0 +1,18 @@
+CACHE MANIFEST
+# Cache Manifest Version: 0.1.0
+
+NETWORK:
+https://survivalio.d4rk5id3.repl.co
+https://cdnjs.cloudflare.com
+
+CACHE:
+index.html
+style.css
+script.js
+favicon.ico
+launch.png
+api/game.js
+api/advanced.js
+assets/images/menu/background.png
+assets/images/menu/logo.png
+assets/images/game/player/preview/1.svg

script.js

@@ -14,14 +14,14 @@ window.onkeyup = keyUpF;
 
 var zoom = [];
 $.get("./json/misc/zoom.json", function(data) {
-    zoom = JSON.parse(data);
+  zoom = JSON.parse(data);
 }, "text");
 
 var costume = window.costume;
 
 
 
-function checkWater(){
+function checkWater() {
   return false;
 }
 
@@ -62,7 +62,7 @@ map.svg = new Image();
 map.grid = new Image();
 map.grid.src = "./assets/map/grid.svg";
 
-var currentframe= -1;
+var currentframe = -1;
 
 var lhand = new Object();
 var rhand = new Object();
@@ -71,54 +71,66 @@ function render() {
 
   currentframe++
 
-  map.svg.src = "https://"+window.server_adress+"/map/basic.svg";
-  
+  map.svg.src = "https://" + window.server_adress + "/map/basic.svg";
+
   player.vel.x = 0;
   player.vel.y = 0;
 
-  if(keysDown[69]){
-    player.direction+= 5;
+
+  if (touchdevice) {
+    if(window.mstick.moving){
+      player.vel.x = Math.round(window.mstick.distance /50) * Math.cos(window.mstick.direction.radian);
+      player.vel.y = Math.round(window.mstick.distance /50) * Math.sin(window.mstick.direction.radian);
+    }
+    if(window.astick.moving){
+      player.direction = 90-window.astick.direction.degree;
+    }
+  }
+
+  if (keysDown[69]) {
+    player.direction += 5;
   }
-  if(keysDown[81]){
-    player.direction-= 5;
+  if (keysDown[81]) {
+    player.direction -= 5;
   }
 
-  if(keysDown[87]){
+  if (keysDown[87]) {
     player.vel.y += 1;
   }
-  if(keysDown[65]){
+  if (keysDown[65]) {
     player.vel.x += -1;
   }
-  if(keysDown[83]){
+  if (keysDown[83]) {
     player.vel.y += -1;
   }
-  if(keysDown[68]){
+  if (keysDown[68]) {
     player.vel.x += 1;
   }
 
+
   player.vel.sqrt = Math.sqrt((player.vel.x * player.vel.x) + (player.vel.y * player.vel.y));
 
   camera.zoom = zoom[zoom[0].current];
 
   player.speed = 5;
 
   canvas.width = 4000;
-  canvas.height = (canvas.width / document.body.clientWidth)*document.body.clientHeight;
+  canvas.height = (canvas.width / document.body.clientWidth) * document.body.clientHeight;
 
   middle.x = canvas.width / 2;
   middle.y = canvas.height / 2;
 
-  if(currentframe>=1){
-    if(checkWater()){
+  if (currentframe >= 1) {
+    if (checkWater()) {
       player.speed = 2;
     }
   }
 
-  if(player.vel.sqrt!=0) {
-    player.vel.x = (player.vel.x / player.vel.sqrt)*player.speed;
-    player.vel.y = (player.vel.y / player.vel.sqrt)*player.speed;
+  if (player.vel.sqrt != 0) {
+    player.vel.x = (player.vel.x / player.vel.sqrt) * player.speed;
+    player.vel.y = (player.vel.y / player.vel.sqrt) * player.speed;
   }
-  
+
   player.x += player.vel.x;
   player.y += player.vel.y;
 
@@ -131,56 +143,56 @@ function render() {
 
   ctx.clearRect(0, 0, canvas.width, canvas.height); //reset the canvas every frame before drawing
 
- 
+
   ctx.fillStyle = "rgb(0, 174, 255)";
   ctx.fillRect(0, 0, canvas.width, canvas.height);
 
-  
-
-  ctx.drawImage(map.svg, 
-                (middle.x - ((camera.zoom * 10000) / 2)) + ((camera.zoom) * -camera.x), 
-                (middle.y - ((camera.zoom * 10000) / 2)) + ((camera.zoom) * camera.y), 
-                (10000 * camera.zoom), 
-                (10000 * camera.zoom)
-               );
-
-  ctx.drawImage(map.grid, 
-                (middle.x - ((camera.zoom * 10000) / 2)) + ((camera.zoom) * -camera.x), 
-                (middle.y - ((camera.zoom * 10000) / 2)) + ((camera.zoom) * camera.y), 
-                (10000 * camera.zoom), 
-                (10000 * camera.zoom)
-               );
-
-  
-
-  
-
-  ctx.drawImage(player_costume, 100, 0, 50,50, 
-                (middle.x - ((camera.zoom * player.size) / 2)) + ((camera.zoom) * (-player.x + camera.x)), 
-                (middle.y - ((camera.zoom * player.size) / 2)) + ((camera.zoom) * (player.y - camera.y)), 
-                (camera.zoom * player.size), 
-                (camera.zoom * player.size)
-              );
-
-  lhand.x = (Math.sin((player.direction + 180 - 40) * ( Math.PI / 180 )) * 27);
-  lhand.y = (Math.cos((player.direction + 180 - 40) * ( Math.PI / 180 )) * 27);
-  ctx.drawImage(player_costume, 150, 0, 25, 25, 
-                (middle.x - ((camera.zoom * player.size) / 4)) + ((camera.zoom) * ( -(player.x + lhand.x) + camera.x)), 
-                (middle.y - ((camera.zoom * player.size) / 4)) + ((camera.zoom) * ((player.y + lhand.y) - camera.y)), 
-                ((camera.zoom * player.size)/2), 
-                ((camera.zoom * player.size)/2)
-              );
-
-  rhand.x = (Math.sin((player.direction + 180 + 40) * ( Math.PI / 180 )) * 27);
-  rhand.y = (Math.cos((player.direction + 180 + 40) * ( Math.PI / 180 )) * 27);
-  ctx.drawImage(player_costume, 150, 25, 25, 25, 
-                (middle.x - ((camera.zoom * player.size) / 4)) + ((camera.zoom) * ( -(player.x + rhand.x) + camera.x)), 
-                (middle.y - ((camera.zoom * player.size) / 4)) + ((camera.zoom) * ((player.y + rhand.y) - camera.y)), 
-                ((camera.zoom * player.size)/2), 
-                ((camera.zoom * player.size)/2)
-              );
+
+
+  ctx.drawImage(map.svg,
+    (middle.x - ((camera.zoom * 10000) / 2)) + ((camera.zoom) * -camera.x),
+    (middle.y - ((camera.zoom * 10000) / 2)) + ((camera.zoom) * camera.y),
+    (10000 * camera.zoom),
+    (10000 * camera.zoom)
+  );
+
+  ctx.drawImage(map.grid,
+    (middle.x - ((camera.zoom * 10000) / 2)) + ((camera.zoom) * -camera.x),
+    (middle.y - ((camera.zoom * 10000) / 2)) + ((camera.zoom) * camera.y),
+    (10000 * camera.zoom),
+    (10000 * camera.zoom)
+  );
+
+
+
+
+
+  ctx.drawImage(player_costume, 100, 0, 50, 50,
+    (middle.x - ((camera.zoom * player.size) / 2)) + ((camera.zoom) * (-player.x + camera.x)),
+    (middle.y - ((camera.zoom * player.size) / 2)) + ((camera.zoom) * (player.y - camera.y)),
+    (camera.zoom * player.size),
+    (camera.zoom * player.size)
+  );
+
+  lhand.x = (Math.sin((player.direction + 180 - 40) * (Math.PI / 180)) * 27);
+  lhand.y = (Math.cos((player.direction + 180 - 40) * (Math.PI / 180)) * 27);
+  ctx.drawImage(player_costume, 150, 0, 25, 25,
+    (middle.x - ((camera.zoom * player.size) / 4)) + ((camera.zoom) * (-(player.x + lhand.x) + camera.x)),
+    (middle.y - ((camera.zoom * player.size) / 4)) + ((camera.zoom) * ((player.y + lhand.y) - camera.y)),
+    ((camera.zoom * player.size) / 2),
+    ((camera.zoom * player.size) / 2)
+  );
+
+  rhand.x = (Math.sin((player.direction + 180 + 40) * (Math.PI / 180)) * 27);
+  rhand.y = (Math.cos((player.direction + 180 + 40) * (Math.PI / 180)) * 27);
+  ctx.drawImage(player_costume, 150, 25, 25, 25,
+    (middle.x - ((camera.zoom * player.size) / 4)) + ((camera.zoom) * (-(player.x + rhand.x) + camera.x)),
+    (middle.y - ((camera.zoom * player.size) / 4)) + ((camera.zoom) * ((player.y + rhand.y) - camera.y)),
+    ((camera.zoom * player.size) / 2),
+    ((camera.zoom * player.size) / 2)
+  );
 
   if (game == "running" || game == "paused") {
     requestAnimationFrame(render);
   }
-}
+}

style.css

@@ -145,7 +145,7 @@ canvas {
   height: 100%;
   margin-left: 0px;
   left: 0px;
-  position: relative;
+  position: absolute;
   z-index: 999999999;
 }
 
@@ -156,6 +156,6 @@ canvas {
   height: 100%;
   margin-right: 0px;
   right: 0px;
-  position: relative;
+  position: absolute;
   z-index: 999999999;
 }