added tick delta and punching

img/world/biome/forest/boulder.svg

@@ -59,7 +59,7 @@
      id="layer1">
     <path
        sodipodi:type="star"
-       style="fill:#8b8b91;fill-opacity:1;stroke:#6d6d72;stroke-width:2.59721;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       style="fill:#8b8b91;fill-opacity:1;stroke:#6d6d72;stroke-width:2.64583336;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
        id="path12"
        sodipodi:sides="10"
        sodipodi:cx="92.604164"
@@ -88,9 +88,9 @@
        inkscape:flatsided="true"
        inkscape:rounded="0"
        inkscape:randomized="0"
-       inkscape:transform-center-x="1.603063e-06"
+       inkscape:transform-center-x="1.4068344e-06"
        d="m 158.91637,77.606113 -3.84887,41.841707 -27.70774,31.58834 -40.983199,9.26931 -38.604462,-16.59029 -21.480137,-36.11296 3.84887,-41.841712 27.70774,-31.588343 40.983195,-9.269306 38.604463,16.590292 z"
-       transform="matrix(1.0204298,0.33678241,-0.33678241,1.0204298,29.295566,-33.079341)"
+       transform="matrix(0.87102117,0.28747162,-0.28747162,0.87102117,38.565043,-14.677095)"
-       inkscape:transform-center-y="-3.1093821e-06" />
+       inkscape:transform-center-y="-2.8935958e-06" />
   </g>
 </svg>

script/client.js

@@ -2,6 +2,7 @@ var canvas;
 var canvas_center = new vector(0, 0);
 var mouse_position = new vector(0, 0);
 var camera = new vector(0, 0);
+var lastupdate = Date.now();
 
 function load_image(path) {
   let image = new Image();
@@ -63,8 +64,12 @@ function init() {
 }
 
 function tick() {
+    let now = Date.now();
+    let delta = now - lastupdate;
+    lastupdate = now;
+
 	resize_canvas(canvas);
-	game_tick();
+	game_tick(delta);
 }
 
 function game_ready() {

script/game.js

@@ -174,22 +174,26 @@ function do_collisions() {
 	});
 }
 
-function do_movement() {
+function do_movement(delta) {
 	if (keys_pressed["KeyW"]) {
-		player.position.y -= player_speed / fps;
+		player.position.y -= player_speed / delta;
 	}
 	if (keys_pressed["KeyS"]) {
-		player.position.y += player_speed / fps;
+		player.position.y += player_speed / delta;
 	}
 	if (keys_pressed["KeyA"]) {
-		player.position.x -= player_speed / fps;
+		player.position.x -= player_speed / delta;
 	}
 	if (keys_pressed["KeyD"]) {
-		player.position.x += player_speed / fps;
+		player.position.x += player_speed / delta;
 	}
 
 	//rotation
 	player.rotation = canvas_center.rotation_to(mouse_position) + rotation_offset;
+
+	if (mouse_down && !punching) {
+		interact();
+	}
 }
 
 document.onmousemove = function(e) {
@@ -199,9 +203,9 @@ document.onmousemove = function(e) {
 	mouse_position.y = e.pageY;
 }
 
-function game_tick() {
+function game_tick(delta) {
 	//calculations
-	do_movement();
+	do_movement(delta);
 	do_collisions();
 	move_camera();
 
@@ -310,4 +314,37 @@ function send_position_to_server() {
 		clearInterval(update_server_tick);
 		console.log("disconnected from server");
 	}
+}
+
+//interaction
+var interact_interval;
+var punching = false;
+var mouse_down = false;
+document.body.onmousedown = function() { 
+	mouse_down = true;
+}
+document.body.onmouseup = function() {
+	mouse_down = false;
+}
+function interact() {
+	if (!punching) {
+		punching = true;
+		interact_interval = setInterval(interaction_animation, 1000/fps, Date.now());
+	}
+}
+
+function inter_anim_curve(x) {
+	return -15*Math.pow(x-0.25, 2)+1;
+}
+
+function interaction_animation(start_time) {
+	let now = Date.now();
+	let x = (now - start_time)/1000;
+	//console.log(inter_anim_curve(x));
+	rotation_offset = inter_anim_curve(x)/2;
+	if (x >= 0.5) {
+		clearInterval(interact_interval);
+		rotation_offset = 0;
+		punching = false;
+	}
 }