diff --git a/_notebooks/2023-06-13-Mario.ipynb b/_notebooks/2023-06-13-Mario.ipynb
new file mode 100644
index 0000000..33cae12
--- /dev/null
+++ b/_notebooks/2023-06-13-Mario.ipynb
@@ -0,0 +1,180 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<style>\n",
+       "    body {\n",
+       "        margin: 0;\n",
+       "        background-color: #c0fdfb;\n",
+       "        display: flex;\n",
+       "        align-items: center;\n",
+       "        justify-content: center;\n",
+       "        height: 100vh\n",
+       "    }\n",
+       "</style>\n",
+       "<canvas></canvas>\n"
+      ],
+      "text/plain": [
+       "<IPython.core.display.HTML object>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "%%html\n",
+    "<style>\n",
+    "    body {\n",
+    "        margin: 0;\n",
+    "        background-color: #c0fdfb;\n",
+    "        display: flex;\n",
+    "        align-items: center;\n",
+    "        justify-content: center;\n",
+    "        height: 100vh\n",
+    "    }\n",
+    "</style>\n",
+    "<canvas></canvas>"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "application/javascript": "const canvas = document.querySelector('canvas');\nconst c = canvas.getContext('2d');\ncanvas.width = 600;\ncanvas.height = 576;\n\nlet gravity = 2;\n\nclass Player {\n  constructor() {\n    this.speed = 10;\n    this.position = {\n      x: 100,\n      y: canvas.height - 100\n    };\n    this.velocity = {\n      x: 0,\n      y: 0\n    };\n    this.width = 30;\n    this.height = 30;\n    this.color = 'red';\n  }\n  draw() {\n    c.fillStyle = this.color;\n    c.fillRect(\n      this.position.x,\n      this.position.y,\n      this.width,\n      this.height\n    );\n  }\n  update() {\n    this.position.y += this.velocity.y;\n    this.position.x += this.velocity.x;\n    if (this.position.y + this.height >= canvas.height) {\n      this.position.y = canvas.height - this.height;\n      this.velocity.y = 0;\n    } else if (this.position.y <= 0) {\n      this.position.y = 0;\n      this.velocity.y = 0;\n    }\n    if (this.position.x + this.width >= canvas.width) {\n      this.position.x = canvas.width - this.width;\n      this.velocity.x = 0;\n    } else if (this.position.x <= 0) {\n      this.position.x = 0;\n      this.velocity.x = 0;\n    }\n      \n    if (this.position.y + this.height < canvas.height) {\n        this.velocity.y += gravity;\n    }\n    this.draw();\n  }\n}\nlet player = new Player();\nfunction animate() {\n  requestAnimationFrame(animate);\n  c.clearRect(0, 0, canvas.width, canvas.height);\n  player.update();\n}\nanimate();\nfunction handleKeyDown(event) {\n  if (event.key === 'w' || event.key === 'W') {\n    player.velocity.y = -30;\n  } else if (event.key === 's' || event.key === 'S') {\n    player.velocity.y = player.speed;\n  } else if (event.key === 'ArrowLeft') {\n    player.velocity.x = -player.speed;\n  } else if (event.key === 'ArrowRight') {\n    player.velocity.x = player.speed;\n  }\n}\nfunction handleKeyUp(event) {\n  if (\n    event.key === 'w' ||\n    event.key === 's' ||\n    event.key === 'ArrowLeft' ||\n    event.key === 'ArrowRight'\n  ) {\n    player.velocity.x = 0;\n  }\n}\ndocument.addEventListener('keydown', handleKeyDown);\ndocument.addEventListener('keyup', handleKeyUp);\n",
+      "text/plain": [
+       "<IPython.core.display.Javascript object>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "%%javascript\n",
+    "const canvas = document.querySelector('canvas');\n",
+    "const c = canvas.getContext('2d');\n",
+    "canvas.width = 600;\n",
+    "canvas.height = 576;\n",
+    "\n",
+    "let gravity = 2;\n",
+    "\n",
+    "class Player {\n",
+    "  constructor() {\n",
+    "    this.speed = 10;\n",
+    "    this.position = {\n",
+    "      x: 100,\n",
+    "      y: canvas.height - 100\n",
+    "    };\n",
+    "    this.velocity = {\n",
+    "      x: 0,\n",
+    "      y: 0\n",
+    "    };\n",
+    "    this.width = 30;\n",
+    "    this.height = 30;\n",
+    "    this.color = 'red';\n",
+    "  }\n",
+    "  draw() {\n",
+    "    c.fillStyle = this.color;\n",
+    "    c.fillRect(\n",
+    "      this.position.x,\n",
+    "      this.position.y,\n",
+    "      this.width,\n",
+    "      this.height\n",
+    "    );\n",
+    "  }\n",
+    "  update() {\n",
+    "    this.position.y += this.velocity.y;\n",
+    "    this.position.x += this.velocity.x;\n",
+    "    if (this.position.y + this.height >= canvas.height) {\n",
+    "      this.position.y = canvas.height - this.height;\n",
+    "      this.velocity.y = 0;\n",
+    "    } else if (this.position.y <= 0) {\n",
+    "      this.position.y = 0;\n",
+    "      this.velocity.y = 0;\n",
+    "    }\n",
+    "    if (this.position.x + this.width >= canvas.width) {\n",
+    "      this.position.x = canvas.width - this.width;\n",
+    "      this.velocity.x = 0;\n",
+    "    } else if (this.position.x <= 0) {\n",
+    "      this.position.x = 0;\n",
+    "      this.velocity.x = 0;\n",
+    "    }\n",
+    "      \n",
+    "    if (this.position.y + this.height < canvas.height) {\n",
+    "        this.velocity.y += gravity;\n",
+    "    }\n",
+    "    this.draw();\n",
+    "  }\n",
+    "}\n",
+    "let player = new Player();\n",
+    "function animate() {\n",
+    "  requestAnimationFrame(animate);\n",
+    "  c.clearRect(0, 0, canvas.width, canvas.height);\n",
+    "  player.update();\n",
+    "}\n",
+    "animate();\n",
+    "function handleKeyDown(event) {\n",
+    "  if (event.key === 'w' || event.key === 'W') {\n",
+    "    player.velocity.y = -30;\n",
+    "  } else if (event.key === 's' || event.key === 'S') {\n",
+    "    player.velocity.y = player.speed;\n",
+    "  } else if (event.key === 'ArrowLeft') {\n",
+    "    player.velocity.x = -player.speed;\n",
+    "  } else if (event.key === 'ArrowRight') {\n",
+    "    player.velocity.x = player.speed;\n",
+    "  }\n",
+    "}\n",
+    "function handleKeyUp(event) {\n",
+    "  if (\n",
+    "    event.key === 'w' ||\n",
+    "    event.key === 's' ||\n",
+    "    event.key === 'ArrowLeft' ||\n",
+    "    event.key === 'ArrowRight'\n",
+    "  ) {\n",
+    "    player.velocity.x = 0;\n",
+    "  }\n",
+    "}\n",
+    "document.addEventListener('keydown', handleKeyDown);\n",
+    "document.addEventListener('keyup', handleKeyUp);\n"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "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"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}