added chasing projectile

web/game.js

@@ -72,21 +72,20 @@ const width = 1000;
 const height = 600;
 
 // Player variables
-let Playerposx = 500;
-let Playerposy = 300;
 const playerSize = 10;
 let radius = playerSize / 2;
-let playerX = 500
+let playerPosX = 500
-let playerY = 300;
+let playerPosY = 300;
 let playerSpeed = 3;
 
 
 let squareX = 100;
 let squareY = 100;
 const squareSize = 100;
-let startPosX;
+
-let startPosY;
+let shotSpeed = 2;
-let shotSpeed = 5;
+let projectile;
+let shot = false;
 
 // the function setup() is called once when the page is loaded
 function setup() {
@@ -99,36 +98,40 @@ function setup() {
 }
 
 function keyPressed() {
-    if (keyIsDown(LEFT_ARROW) && playerX > 0+radius) {
+    if (keyIsDown(LEFT_ARROW) && playerPosX > 0 + radius) {
-        playerX -= playerSpeed;
+        playerPosX -= playerSpeed;
     }
-    if (keyIsDown(RIGHT_ARROW) && playerX < width-radius) {
+    if (keyIsDown(RIGHT_ARROW) && playerPosX < width - radius) {
-        playerX += playerSpeed;
+        playerPosX += playerSpeed;
     }
-    if (keyIsDown(UP_ARROW) && playerY > 0+radius) {
+    if (keyIsDown(UP_ARROW) && playerPosY > 0 + radius) {
-        playerY -= playerSpeed;
+        playerPosY -= playerSpeed;
     }
-    if (keyIsDown(DOWN_ARROW) && playerY < height-radius) {
+    if (keyIsDown(DOWN_ARROW) && playerPosY < height - radius) {
-        playerY += playerSpeed;
+        playerPosY += playerSpeed;
     }
 }
 
 async function Movementloop() {
     if (booleanArray[1]) {
-        playerX += playerSpeed;}
+        playerPosX += playerSpeed;
+    }
     if (booleanArray[3]) {
-        playerX -= playerSpeed;}
+        playerPosX -= playerSpeed;
+    }
     if (booleanArray[2]) {
-        playerY += playerSpeed;}
+        playerPosY += playerSpeed;
+    }
     if (booleanArray[0]) {
-        playerY -= playerSpeed;}
+        playerPosY -= playerSpeed;
+    }
 }
 
 function object_collision() {
     var squareCenterX = squareX + squareSize / 2;
     var squareCenterY = squareY + squareSize / 2;
 
-    var distance = dist(playerX, playerY, squareCenterX, squareCenterY);
+    var distance = dist(playerPosX, playerPosY, squareCenterX, squareCenterY);
 
     if (distance < squareSize / 2 + radius) {
         squareX = random(0, width - squareSize);
@@ -136,30 +139,35 @@ function object_collision() {
     }
 }
 
-async function shoot(startPosX, startPosY) {
+function shoot(directionX, directionY) {
-    circle(startPosX, startPosY, 30);
+    shot = true;
-    let shootingCirclePos = createVector(startPosX, startPosY);
+    circle(500, 100, 50);
-    let targetCirclePos = createVector(playerX, playerY);
 
-    let direction = p5.Vector.sub(targetCirclePos, shootingCirclePos);
+    if (!projectile) {
+        // Set the initial position of the projectile to the player's position
+        projectile = createVector(500, 100);
+    }
+
+    // Draw the small circle (projectile)
+    fill(255, 0, 0);
+    circle(projectile.x, projectile.y, 5);
+
+    // Move the projectile towards the movable circle
+    let target = createVector(directionX, directionY);
+    let direction = target.copy().sub(projectile);
     direction.normalize();
     direction.mult(shotSpeed);
-
+    projectile.add(direction);
-    shootingCirclePos.add(direction);
-
-    circle(shootingCirclePos.x, shootingCirclePos.y, 5);
 }
 
 // the function draw() is called every frame
 function draw() {
     keyPressed();
-    // clear the background with a transparent black color
     background(0, 0, 0, 100);
-    shoot(500,100);
 
-    // draw a circle at the mouse position
+    circle(constrain(playerPosX, 0 + radius, width - radius), constrain(playerPosY, 0 + radius, height - radius), playerSize);
-
+    // square(squareX,squareY,squareSize);
-    circle(constrain(playerX,0+radius,width-radius), constrain(playerY,0+radius,height-radius), playerSize);
-    square(squareX,squareY,squareSize);
     object_collision();
+
+    shoot(playerPosX, playerPosY);
 }