NOW THE CAR WHEEL MOVE IN BOTH DIRECTION LIKE REAL CAR

THEKINGSTAR · Dec 9, 2023 · 5d392c8 · 5d392c8
1 parent 52d9e27
commit 5d392c8
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 17 deletions.
diff --git a/main_project/car.js b/main_project/car.js
@@ -9,7 +9,7 @@ class Car{
         //define the car speed and direction based on physics
         this.speed=0;
         this.acceleration=0.2;
-        this.maxSpeed=4;
+        this.maxSpeed=3;
         this.friction=0.05;
         this.angel=0;
 
@@ -43,27 +43,45 @@ class Car{
             this.speed=0;
         }
 
-        //Set the controls for left and right
-        //By modifying the car angel not just go to left or right side of the screen
-        if(this.controls.right){
-            this.angel-=0.03;
-        }
-        if(this.controls.left){
-            this.angel+=0.-3;
+
+        //SET THE DIRECTION OF THE WHEEL BASE ON THE DIRECTION OF THE CAR
+        if(this.speed!=0){
+            const flip = this.speed>0?1:-1;
+            /*
+            Set the controls for left and right
+            By modifying the car angel not just go to left or right side of the screen
+            */
+            if(this.controls.left){
+                this.angel+=0.03 * flip;
+            }
+            if(this.controls.right){
+                this.angel-=0.03 * flip;
+            }
         }
 
-
-        this.y-=this.speed;
-    }
+        /*
+        MAKE THE CAR MOVE IN THE DIRECTION OF THE ROTATION BASE ON 
+        SIN OR COS OF THE ANGLE TO THE (ZERO, ZERO) AXIS
+        */
+        this.x-=Math.sin(this.angel) * this.speed;
+        this.y-=Math.cos(this.angel) * this.speed;
 
+    }
+    //Draw the canvas and the car on it
     draw(ctx){
+        ctx.save();
+        ctx.translate(this.x, this.y);
+        ctx.rotate(-this.angel);
+
         ctx.beginPath();
         ctx.rect(
-            this.x - this.width / 2,
-            this.y - this.height / 2,
+            -this.width / 2,
+            -this.height / 2,
             this.width,
             this.height
         );
         ctx.fill();
+
+        ctx.restore();
     }
 }
diff --git a/main_project/controls.js b/main_project/controls.js
@@ -25,8 +25,8 @@ class Controls{
                     this.reverse=true;
                     break;
             }
-            //Check for event caching the keys
-            console.table(this);
+            //Check for event it catching the keys
+            //console.table(this);
         }
         document.onkeyup=(event)=>{
             switch(event.key)
@@ -44,8 +44,8 @@ class Controls{
                     this.reverse=false;
                     break;
             }
-            //Check for event caching the keys
-            console.table(this);
+            //Check for event if it catching the keys
+            //console.table(this);
         }
 
     };