diff --git a/index.html b/index.html
new file mode 100644
index 0000000..ee3ebd2
--- /dev/null
+++ b/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+ Movement controller
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/inputHandler.js b/inputHandler.js
new file mode 100644
index 0000000..093a915
--- /dev/null
+++ b/inputHandler.js
@@ -0,0 +1,14 @@
+addEventListener("keydown",function(e){
+ if(e.code === 'KeyD'){vx = 5; }
+ if(e.code === 'KeyA'){vx = -5;}
+ if(e.code === 'KeyS'){vy = 5;}
+ if(e.code === 'KeyW'){vy = -5;}
+});
+
+addEventListener("keyup",function(e){
+ if(e.code ==='keyD'){vx = 0; }
+ if(e.code ==='keyA'){vx = 0; }
+ if(e.code === 'KeyS'){vy = 0;}
+ if(e.code === 'KeyW'){vy = 0;}
+
+})
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..9d1afcf
--- /dev/null
+++ b/script.js
@@ -0,0 +1,21 @@
+console.log("main js loaded");
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+let x = 0;
+let y = 0;
+let vx = 0;
+let vy = 0;
+
+
+
+function update(){
+ ctx.clearRect(0, 0, canvas.width, canvas.height );
+ x += vx;
+ y += vy;
+ if (x < 0 || x + 50 > canvas.width) vx = -vx; // reverse direction if rectangle hits the edge
+ if (y < 0 || y + 50 > canvas.height) vy = -vy; // reverse direction if rectangle hits the edge
+ ctx.fillRect(x, y, 50, 50);
+ requestAnimationFrame(update)
+}
+
+update();
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..e69de29