added movable object with directional keys

web/game.js

@@ -1,18 +1,36 @@
-
+size = 50;
+posX = 500;
+posY = 300;
 // the function setup() is called once when the page is loaded
-function setup(){
+function setup() {
     // create a canvas element and append it to the body
-    createCanvas(1250, 600);    
+    createCanvas(1000, 600);
-    
+    frameRate(120);
     // disable the outline of shapes
     noStroke();
 }
 
+function keyPressed() {
+    if (keyIsDown(LEFT_ARROW)) {
+        posX -= 5;
+    }
+    if (keyIsDown(RIGHT_ARROW)) {
+        posX += 5;
+    }
+    if (keyIsDown(UP_ARROW)) {
+        posY -= 5;
+    } 
+    if (keyIsDown(DOWN_ARROW)) {
+        posY += 5;
+    }
+}
 // the function draw() is called every frame
-function draw(){
+function draw() {
+    keyPressed();
     // clear the background with a transparent black color
-    background(0,0,0,10);
+    background(0, 0, 0, 10);
 
     // draw a circle at the mouse position
-    circle(mouseX, mouseY, 50);
+
+    circle(posX, posY, size);
 }