tube attempt 2

_notebooks/2023-06-13-Mario.ipynb

@@ -809,41 +809,35 @@
     "        }\n",
     "    }\n",
     "    class Tube {\n",
-    "    constructor( { x, y, image, width, height } ) {\n",
+    "    constructor( { x, y, imageTube, width, height } ) {\n",
     "        this.position = {\n",
-    "            x, // X-coordinate of the tube's position\n",
-    "            y // Y-coordinate of the tube's position\n",
+    "            x, \n",
     "        }\n",
-    "        this.image = new Image() // Create a new Image object for the tube\n",
-    "        this.image.src = image // Set the source of the tube's image\n",
-    "        this.width = width // Width of the tube\n",
-    "        this.height = height // Height of the tube\n",
+    "        this.image = imageTube\n",
+    "        this.width = width\n",
+    "        this.height = height\n",
     "        this.velocity = {\n",
-    "            x: 0 // Velocity in the X-direction (initially 0)\n",
+    "            x: 0\n",
     "        }\n",
-    "        this.image.onload = () => {\n",
-    "            // Optional: If width and height are not provided, use the image's natural dimensions\n",
+    "        this.imageTube.onload = () => {\n",
     "            if (!width) {\n",
     "                this.width = this.image.naturalWidth;\n",
     "            }\n",
     "            if (!height) {\n",
     "                this.height = this.image.naturalHeight;\n",
     "            }\n",
     "        }\n",
-    "\n",
-    "        // this.width = image.width\n",
-    "        // this.height = image.height\n",
     "    }\n",
     "\n",
     "    draw() {\n",
-    "        c.drawImage(this.image, this.position.x, this.position.y, this.width, this.height) // Draw the tube on the canvas\n",
+    "        c.drawImage(this.imageTube, this.position.x, this.position.y, this.width, this.height)\n",
     "    }\n",
     "    \n",
     "    update() {\n",
-    "        this.position.x += this.velocity.x // Update the X-coordinate of the tube's position\n",
-    "        this.draw() // Draw the updated tube on the canvas\n",
+    "        this.position.x += this.velocity.x\n",
+    "        this.draw()\n",
+    "    }\n",
     "    }\n",
-    "}\n",
     "\n",
     "    let image = new Image();\n",
     "    image.onload = function() {\n",
@@ -858,11 +852,23 @@
     "            }\n",
     "        };\n",
     "\n",
+    "        tubes = [\n",
+    "        new Tube( {\n",
+    "            x: 10, \n",
+    "            y: 10,\n",
+    "            imageTube,\n",
+    "            width: 175,\n",
+    "            height: 200\n",
+    "        } )]\n",
+    "\n",
     "        function animate1() {\n",
     "            requestAnimationFrame(animate1);\n",
     "            c1.clearRect(0, 0, canvas1.width, canvas1.height);\n",
     "            player1.update();\n",
     "            platform.draw();\n",
+    "            tubes.forEach(tube => {\n",
+    "                tube.update();\n",
+    "            })\n",
     "            if (keys1.right.pressed) {\n",
     "                player1.velocity.x = 5;\n",
     "            } else if (keys1.left.pressed) {\n",
@@ -878,17 +884,7 @@
     "            ) {\n",
     "                player1.velocity.y = 0;\n",
     "            }\n",
-    "\n",
-    "            let tubes = []\n",
     "            \n",
-    "            tubes = [\n",
-    "        new Tube( { // Create new Tube objects and add them to the tubes array\n",
-    "            x: 3350, \n",
-    "            y: 317,\n",
-    "            image: 'images/tube.png',\n",
-    "            width: 175,\n",
-    "            height: 200\n",
-    "        } )]\n",
     "        }\n",
     "\n",
     "        animate1();\n",
@@ -935,6 +931,8 @@
     "    };\n",
     "\n",
     "    image.src = 'https://samayass.github.io/samayaCSA/images/platform.png';\n",
+    "    imageTube.src = 'https://NicholasRamos5.github.io/VSCodings/images/MarioItems/tube.png';\n",
+    "    \n",
     "\n",
     "</script>"
    ]