added border collision and more variables

web/game.js

@@ -1,36 +1,46 @@
-size = 50;
-posX = 500;
-posY = 300;
+size = 10;
+radius = size/2;
+cirX = 500
+cirY = 300;
+xmax = 1000;
+ymax = 600;
+speed = 3;
 // the function setup() is called once when the page is loaded
 function setup() {
     // create a canvas element and append it to the body
-    createCanvas(1000, 600);
-    frameRate(120);
+    createCanvas(xmax, ymax);
+    frameRate(1200);
     // disable the outline of shapes
     noStroke();
 }
 
 function keyPressed() {
-    if (keyIsDown(LEFT_ARROW)) {
-        posX -= 5;
+    if (keyIsDown(LEFT_ARROW) && cirX > 0+radius) {
+        cirX -= speed;
     }
-    if (keyIsDown(RIGHT_ARROW)) {
-        posX += 5;
+    if (keyIsDown(RIGHT_ARROW) && cirX < xmax-radius) {
+        cirX += speed;
     }
-    if (keyIsDown(UP_ARROW)) {
-        posY -= 5;
+    if (keyIsDown(UP_ARROW) && cirY > 0+radius) {
+        cirY -= speed;
     } 
-    if (keyIsDown(DOWN_ARROW)) {
-        posY += 5;
+    if (keyIsDown(DOWN_ARROW) && cirY < ymax-radius) {
+        cirY += speed;
     }
 }
+
+function collision() {
+
+}
+
 // the function draw() is called every frame
 function draw() {
     keyPressed();
     // clear the background with a transparent black color
-    background(0, 0, 0, 10);
+    background(0, 0, 0, 100);
 
     // draw a circle at the mouse position
 
-    circle(posX, posY, size);
+    circle(constrain(cirX,0+radius,xmax-radius), constrain(cirY,0+radius,ymax-radius), size);
+    square(100,100,100,10);
 }