From 82edfd28ce76c3a61031acf71f4309803a33358f Mon Sep 17 00:00:00 2001
From: Nicholas Ramos <111522637+NicholasRamos5@users.noreply.github.com>
Date: Sun, 9 Jul 2023 18:52:16 -0700
Subject: [PATCH] canvas

---
 _notebooks/2023-06-13-Mario.ipynb | 78 +++++++++++++++----------------
 1 file changed, 39 insertions(+), 39 deletions(-)

diff --git a/_notebooks/2023-06-13-Mario.ipynb b/_notebooks/2023-06-13-Mario.ipynb
index ad2cf30..98bc107 100644
--- a/_notebooks/2023-06-13-Mario.ipynb
+++ b/_notebooks/2023-06-13-Mario.ipynb
@@ -716,19 +716,19 @@
    "source": [
     "%%html\n",
     "<style>\n",
-    "    #canvas1 {\n",
+    "    #canvas2 {\n",
     "        margin: 0;\n",
     "        border: 1px solid black;\n",
     "    }\n",
     "</style>\n",
-    "<canvas id=\"canvas1\"></canvas>\n",
+    "<canvas id=\"canvas2\"></canvas>\n",
     "<script>\n",
-    "    const canvas1 = document.getElementById('canvas1');\n",
-    "    const c1 = canvas1.getContext('2d');\n",
-    "    canvas1.width = 770;\n",
-    "    canvas1.height = 300;\n",
-    "    const gravity1 = 1.5;\n",
-    "    class Player1 {\n",
+    "    const canvas2 = document.getElementById('canvas2');\n",
+    "    const c2 = canvas2.getContext('2d');\n",
+    "    canvas2.width = 770;\n",
+    "    canvas2.height = 300;\n",
+    "    const gravity2 = 1.5;\n",
+    "    class Player2 {\n",
     "        constructor() {\n",
     "            this.position = {\n",
     "                x: 100,\n",
@@ -742,20 +742,20 @@
     "            this.height = 30;\n",
     "        }\n",
     "        draw() {\n",
-    "            c1.fillStyle = 'red';\n",
-    "            c1.fillRect(this.position.x, this.position.y, this.width, this.height);\n",
+    "            c2.fillStyle = 'red';\n",
+    "            c2.fillRect(this.position.x, this.position.y, this.width, this.height);\n",
     "        }\n",
     "        update() {\n",
     "            this.draw();\n",
     "            this.position.y += this.velocity.y;\n",
     "            this.position.x += this.velocity.x;\n",
-    "            if (this.position.y + this.height + this.velocity.y <= canvas1.height)\n",
+    "            if (this.position.y + this.height + this.velocity.y <= canvas2.height)\n",
     "                this.velocity.y += gravity1;\n",
     "            else\n",
     "                this.velocity.y = 0;\n",
     "        }\n",
     "    }\n",
-    "    class Platform {\n",
+    "    class Platform2{\n",
     "        constructor(image) {\n",
     "            this.position = {\n",
     "                x: 0,\n",
@@ -766,7 +766,7 @@
     "            this.height = 160;\n",
     "        }\n",
     "        draw() {\n",
-    "            c1.drawImage(this.image, this.position.x, this.position.y);\n",
+    "            c2.drawImage(this.image, this.position.x, this.position.y);\n",
     "        }\n",
     "    }\n",
     "    class Tube {\n",
@@ -784,7 +784,7 @@
     "    }\n",
     "\n",
     "    draw() {\n",
-    "        c.drawImage(this.image, this.position.x, this.position.y)\n",
+    "        c2.drawImage(this.image, this.position.x, this.position.y)\n",
     "    }\n",
     "    \n",
     "    # update() {\n",
@@ -795,10 +795,10 @@
     "\n",
     "    let image = new Image();\n",
     "    image.onload = function() {\n",
-    "        const player1 = new Player1();\n",
-    "        const platform = new Platform(image);\n",
+    "        const player2 = new Player2();\n",
+    "        const platform2 = new Platform2(image);\n",
     "        const tube = new Tube(image)\n",
-    "        const keys1 = {\n",
+    "        const keys2 = {\n",
     "            right: {\n",
     "                pressed: false\n",
     "            },\n",
@@ -807,47 +807,47 @@
     "            }\n",
     "        };\n",
     "\n",
-    "        function animate1() {\n",
-    "            requestAnimationFrame(animate1);\n",
-    "            c1.clearRect(0, 0, canvas1.width, canvas1.height);\n",
-    "            player1.update();\n",
-    "            platform.draw();\n",
+    "        function animate2() {\n",
+    "            requestAnimationFrame(animate2);\n",
+    "            c2.clearRect(0, 0, canvas2.width, canvas2.height);\n",
+    "            player2.update();\n",
+    "            platform2.draw();\n",
     "            tube.draw();\n",
-    "            if (keys1.right.pressed) {\n",
-    "                player1.velocity.x = 5;\n",
-    "            } else if (keys1.left.pressed) {\n",
-    "                player1.velocity.x = -5;\n",
+    "            if (keys2.right.pressed) {\n",
+    "                player2.velocity.x = 5;\n",
+    "            } else if (keys2.left.pressed) {\n",
+    "                player2.velocity.x = -5;\n",
     "            } else {\n",
-    "                player1.velocity.x = 0;\n",
+    "                player2.velocity.x = 0;\n",
     "            }\n",
     "            if (\n",
-    "                player1.position.y + player1.height <= platform.position.y &&\n",
-    "                player1.position.y + player1.height + player1.velocity.y >= platform.position.y &&\n",
-    "                player1.position.x + player1.width >= platform.position.x &&\n",
-    "                player1.position.x <= platform.position.x + platform.width\n",
+    "                player2.position.y + player2.height <= platform2.position.y &&\n",
+    "                player2.position.y + player2.height + player2.velocity.y >= platform2.position.y &&\n",
+    "                player2.position.x + player2.width >= platform2.position.x &&\n",
+    "                player2.position.x <= platform2.position.x + platform2.width\n",
     "            ) {\n",
-    "                player1.velocity.y = 0;\n",
+    "                player2.velocity.y = 0;\n",
     "            }\n",
     "        }\n",
     "\n",
-    "        animate1();\n",
+    "        animate2();\n",
     "\n",
     "        addEventListener('keydown', ({ keyCode }) => {\n",
     "            switch (keyCode) {\n",
     "                case 65:\n",
     "                    console.log('left');\n",
-    "                    keys1.left.pressed = true;\n",
+    "                    keys2.left.pressed = true;\n",
     "                    break;\n",
     "                case 83:\n",
     "                    console.log('down');\n",
     "                    break;\n",
     "                case 68:\n",
     "                    console.log('right');\n",
-    "                    keys1.right.pressed = true;\n",
+    "                    keys2.right.pressed = true;\n",
     "                    break;\n",
     "                case 87:\n",
     "                    console.log('up');\n",
-    "                    player1.velocity.y -= 20;\n",
+    "                    player2.velocity.y -= 20;\n",
     "                    break;\n",
     "            }\n",
     "        });\n",
@@ -856,18 +856,18 @@
     "            switch (keyCode) {\n",
     "                case 65:\n",
     "                    console.log('left');\n",
-    "                    keys1.left.pressed = false;\n",
+    "                    keys2.left.pressed = false;\n",
     "                    break;\n",
     "                case 83:\n",
     "                    console.log('down');\n",
     "                    break;\n",
     "                case 68:\n",
     "                    console.log('right');\n",
-    "                    keys1.right.pressed = false;\n",
+    "                    keys2.right.pressed = false;\n",
     "                    break;\n",
     "                case 87:\n",
     "                    console.log('up');\n",
-    "                    player1.velocity.y -= 20;\n",
+    "                    player2.velocity.y -= 20;\n",
     "                    break;\n",
     "            }\n",
     "        });\n",