From 8f39ce45bc10460a2bcb385f93c1e8414c9d8899 Mon Sep 17 00:00:00 2001
From: Nicholas Ramos <111522637+NicholasRamos5@users.noreply.github.com>
Date: Tue, 1 Aug 2023 13:40:39 -0700
Subject: [PATCH] platform initial

---
 _notebooks/2023-08-01-Mario-Platform.ipynb | 331 +++++++++++++++++++++
 1 file changed, 331 insertions(+)
 create mode 100644 _notebooks/2023-08-01-Mario-Platform.ipynb

diff --git a/_notebooks/2023-08-01-Mario-Platform.ipynb b/_notebooks/2023-08-01-Mario-Platform.ipynb
new file mode 100644
index 0000000..42efc5c
--- /dev/null
+++ b/_notebooks/2023-08-01-Mario-Platform.ipynb
@@ -0,0 +1,331 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<style>\n",
+       "    #canvas {\n",
+       "        margin: 0;\n",
+       "        border: 1px solid black;\n",
+       "    }\n",
+       "</style>\n",
+       "<canvas id=\"canvas\"></canvas>\n",
+       "<script>\n",
+       "    let canvas = document.getElementById('canvas');\n",
+       "    let c = canvas.getContext('2d');\n",
+       "    canvas.width = 770;\n",
+       "    canvas.height = 300;\n",
+       "\n",
+       "    let gravity = 1.5;\n",
+       "\n",
+       "    class Player {\n",
+       "        constructor() {\n",
+       "            this.position = {\n",
+       "                x: 100,\n",
+       "                y: 100\n",
+       "            };\n",
+       "            this.velocity = {\n",
+       "                x: 0,\n",
+       "                y: 0\n",
+       "            };\n",
+       "            this.width = 30;\n",
+       "            this.height = 30;\n",
+       "        }\n",
+       "\n",
+       "        draw() {\n",
+       "            c.fillStyle = 'red';\n",
+       "            c.fillRect(this.position.x, this.position.y, this.width, this.height);\n",
+       "        }\n",
+       "\n",
+       "        update() {\n",
+       "            this.draw();\n",
+       "            this.position.y += this.velocity.y;\n",
+       "            this.position.x += this.velocity.x;\n",
+       "\n",
+       "            if (this.position.y + this.height + this.velocity.y <= canvas.height)\n",
+       "                this.velocity.y += gravity;\n",
+       "            else \n",
+       "                this.velocity.y = 0;\n",
+       "        }\n",
+       "    }\n",
+       "\n",
+       "    class Platform {\n",
+       "        constructor(image) {\n",
+       "            this.position = {\n",
+       "                x: 0,\n",
+       "                y: 200\n",
+       "            }\n",
+       "            this.image = image;\n",
+       "            this.width = 540;\n",
+       "            this.height = 160;\n",
+       "        }\n",
+       "        draw() {\n",
+       "            c.drawImage(this.image, this.position.x, this.position.y);\n",
+       "        }\n",
+       "    }\n",
+       "\n",
+       "    let image = new Image();\n",
+       "    let platform = new Platform(image);\n",
+       "    player = new Player();\n",
+       "    let keys = {\n",
+       "        right: {\n",
+       "            pressed: false\n",
+       "        },\n",
+       "        left: {\n",
+       "            pressed: false\n",
+       "        }\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",
+       "            ) {\n",
+       "                player1.velocity.y = 0;\n",
+       "            }\n",
+       "\n",
+       "    function animate() {\n",
+       "        requestAnimationFrame(animate);\n",
+       "        c.clearRect(0, 0, canvas.width, canvas.height);\n",
+       "\n",
+       "        platform.draw();\n",
+       "        player.update();\n",
+       "\n",
+       "        if (keys.right.pressed && player.position.x + player.width <= canvas.width - 50) {\n",
+       "            player.velocity.x = 15;\n",
+       "        } else if (keys.left.pressed && player.position.x >= 50) {\n",
+       "            player.velocity.x = -15;\n",
+       "        } else {\n",
+       "            player.velocity.x = 0;\n",
+       "        }\n",
+       "    }\n",
+       "\n",
+       "    animate();\n",
+       "\n",
+       "    addEventListener('keydown', ({ keyCode }) => {\n",
+       "        switch (keyCode) {\n",
+       "            case 65:\n",
+       "                console.log('left');\n",
+       "                keys.left.pressed = true;\n",
+       "                break;\n",
+       "            case 83:\n",
+       "                console.log('down');\n",
+       "                break;\n",
+       "            case 68:\n",
+       "                console.log('right');\n",
+       "                keys.right.pressed = true;\n",
+       "                break;\n",
+       "            case 87:\n",
+       "                console.log('up');\n",
+       "                player.velocity.y -= 20;\n",
+       "                break;\n",
+       "        }\n",
+       "    });\n",
+       "\n",
+       "    addEventListener('keyup', ({ keyCode }) => {\n",
+       "        switch (keyCode) {\n",
+       "            case 65:\n",
+       "                console.log('left');\n",
+       "                keys.left.pressed = false;\n",
+       "                break;\n",
+       "            case 83:\n",
+       "                console.log('down');\n",
+       "                break;\n",
+       "            case 68:\n",
+       "                console.log('right');\n",
+       "                keys.right.pressed = false;\n",
+       "                break;\n",
+       "            case 87:\n",
+       "                console.log('up');\n",
+       "                player.velocity.y = -20;\n",
+       "                break;\n",
+       "        }\n",
+       "    })\n",
+       "\n",
+       "    image.src = 'https://samayass.github.io/samayaCSA/images/platform.png'\n",
+       "\n",
+       "</script>\n"
+      ],
+      "text/plain": [
+       "<IPython.core.display.HTML object>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "%%html\n",
+    "<style>\n",
+    "    #canvas {\n",
+    "        margin: 0;\n",
+    "        border: 1px solid black;\n",
+    "    }\n",
+    "</style>\n",
+    "<canvas id=\"canvas\"></canvas>\n",
+    "<script>\n",
+    "    let canvas = document.getElementById('canvas');\n",
+    "    let c = canvas.getContext('2d');\n",
+    "    canvas.width = 770;\n",
+    "    canvas.height = 300;\n",
+    "\n",
+    "    let gravity = 1.5;\n",
+    "\n",
+    "    class Player {\n",
+    "        constructor() {\n",
+    "            this.position = {\n",
+    "                x: 100,\n",
+    "                y: 100\n",
+    "            };\n",
+    "            this.velocity = {\n",
+    "                x: 0,\n",
+    "                y: 0\n",
+    "            };\n",
+    "            this.width = 30;\n",
+    "            this.height = 30;\n",
+    "        }\n",
+    "\n",
+    "        draw() {\n",
+    "            c.fillStyle = 'red';\n",
+    "            c.fillRect(this.position.x, this.position.y, this.width, this.height);\n",
+    "        }\n",
+    "\n",
+    "        update() {\n",
+    "            this.draw();\n",
+    "            this.position.y += this.velocity.y;\n",
+    "            this.position.x += this.velocity.x;\n",
+    "\n",
+    "            if (this.position.y + this.height + this.velocity.y <= canvas.height)\n",
+    "                this.velocity.y += gravity;\n",
+    "            else \n",
+    "                this.velocity.y = 0;\n",
+    "        }\n",
+    "    }\n",
+    "\n",
+    "    class Platform {\n",
+    "        constructor(image) {\n",
+    "            this.position = {\n",
+    "                x: 0,\n",
+    "                y: 200\n",
+    "            }\n",
+    "            this.image = image;\n",
+    "            this.width = 540;\n",
+    "            this.height = 160;\n",
+    "        }\n",
+    "        draw() {\n",
+    "            c.drawImage(this.image, this.position.x, this.position.y);\n",
+    "        }\n",
+    "    }\n",
+    "\n",
+    "    let image = new Image();\n",
+    "    let platform = new Platform(image);\n",
+    "    player = new Player();\n",
+    "    let keys = {\n",
+    "        right: {\n",
+    "            pressed: false\n",
+    "        },\n",
+    "        left: {\n",
+    "            pressed: false\n",
+    "        }\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",
+    "            ) {\n",
+    "                player1.velocity.y = 0;\n",
+    "            }\n",
+    "\n",
+    "    function animate() {\n",
+    "        requestAnimationFrame(animate);\n",
+    "        c.clearRect(0, 0, canvas.width, canvas.height);\n",
+    "\n",
+    "        platform.draw();\n",
+    "        player.update();\n",
+    "\n",
+    "        if (keys.right.pressed && player.position.x + player.width <= canvas.width - 50) {\n",
+    "            player.velocity.x = 15;\n",
+    "        } else if (keys.left.pressed && player.position.x >= 50) {\n",
+    "            player.velocity.x = -15;\n",
+    "        } else {\n",
+    "            player.velocity.x = 0;\n",
+    "        }\n",
+    "    }\n",
+    "\n",
+    "    animate();\n",
+    "\n",
+    "    addEventListener('keydown', ({ keyCode }) => {\n",
+    "        switch (keyCode) {\n",
+    "            case 65:\n",
+    "                console.log('left');\n",
+    "                keys.left.pressed = true;\n",
+    "                break;\n",
+    "            case 83:\n",
+    "                console.log('down');\n",
+    "                break;\n",
+    "            case 68:\n",
+    "                console.log('right');\n",
+    "                keys.right.pressed = true;\n",
+    "                break;\n",
+    "            case 87:\n",
+    "                console.log('up');\n",
+    "                player.velocity.y -= 20;\n",
+    "                break;\n",
+    "        }\n",
+    "    });\n",
+    "\n",
+    "    addEventListener('keyup', ({ keyCode }) => {\n",
+    "        switch (keyCode) {\n",
+    "            case 65:\n",
+    "                console.log('left');\n",
+    "                keys.left.pressed = false;\n",
+    "                break;\n",
+    "            case 83:\n",
+    "                console.log('down');\n",
+    "                break;\n",
+    "            case 68:\n",
+    "                console.log('right');\n",
+    "                keys.right.pressed = false;\n",
+    "                break;\n",
+    "            case 87:\n",
+    "                console.log('up');\n",
+    "                player.velocity.y = -20;\n",
+    "                break;\n",
+    "        }\n",
+    "    })\n",
+    "\n",
+    "    image.src = 'https://samayass.github.io/samayaCSA/images/platform.png'\n",
+    "\n",
+    "</script>"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.10.9"
+  },
+  "orig_nbformat": 4
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}