Skip to content

Commit

Permalink
no image onload
Browse files Browse the repository at this point in the history
  • Loading branch information
@NicholasRamos5
NicholasRamos5 committed Jul 26, 2023
1 parent ee91dc8 commit 26bcd18
Showing 1 changed file with 278 additions and 10 deletions.
288 changes: 278 additions & 10 deletions _notebooks/2023-06-13-Mario.ipynb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,9 @@
"Player and Platform using Extends"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Player Original"
]
},
{
"cell_type": "code",
"execution_count": 78,
"execution_count": 5,
"metadata": {},
"outputs": [
{
Expand All @@ -48,7 +41,7 @@
" canvas.width = 770;\n",
" canvas.height = 300;\n",
"\n",
" const gravity = 1.5;\n",
" let gravity = 1.5;\n",
"\n",
" class Player {\n",
" constructor() {\n",
Expand Down Expand Up @@ -81,7 +74,7 @@
" }\n",
" }\n",
"\n",
" const player = new Player();\n",
" player = new Player();\n",
" const keys = {\n",
" right: {\n",
" pressed: false\n",
Expand Down Expand Up @@ -272,6 +265,281 @@
"</script>"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Player Original"
]
},
{
"cell_type": "code",
"execution_count": 78,
"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",
" const 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",
" const player = new Player();\n",
" const keys = {\n",
" right: {\n",
" pressed: false\n",
" },\n",
" left: {\n",
" pressed: false\n",
" }\n",
" };\n",
"\n",
" function animate() {\n",
" requestAnimationFrame(animate);\n",
" c.clearRect(0, 0, canvas.width, canvas.height);\n",
" player.update();\n",
"\n",
" if (keys.right.pressed) {\n",
" player.velocity.x = 15;\n",
" } else if (keys.left.pressed) {\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",
"</script>\n"
],
"text/plain": [
"<IPython.core.display.HTML object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%html\n",
"<style>\n",
" #canvas1 {\n",
" margin: 0;\n",
" border: 1px solid black;\n",
" }\n",
"</style>\n",
"<canvas id=\"canvas1\"></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",
" 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",
" draw() {\n",
" c1.fillStyle = 'red';\n",
" c1.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",
" this.velocity.y += gravity1;\n",
" else\n",
" this.velocity.y = 0;\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",
" c1.drawImage(this.image, this.position.x, this.position.y);\n",
" }\n",
" }\n",
"\n",
" let image = new Image();\n",
"\n",
" const player1 = new Player1();\n",
" const platform = new Platform(image);\n",
" const keys1 = {\n",
" right: {\n",
" pressed: false\n",
" },\n",
" left: {\n",
" pressed: false\n",
" }\n",
" };\n",
"\n",
" function animate1() {\n",
" requestAnimationFrame(animate1);\n",
" c1.clearRect(0, 0, canvas1.width, canvas1.height);\n",
" player1.update();\n",
" platform.draw();\n",
" if (keys1.right.pressed) {\n",
" player1.velocity.x = 5;\n",
" } else if (keys1.left.pressed) {\n",
" player1.velocity.x = -5;\n",
" } else {\n",
" player1.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",
" ) {\n",
" player1.velocity.y = 0;\n",
" }\n",
" }\n",
"\n",
" animate1();\n",
"\n",
" addEventListener('keydown', ({ keyCode }) => {\n",
" switch (keyCode) {\n",
" case 65:\n",
" console.log('left');\n",
" keys1.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",
" break;\n",
" case 87:\n",
" console.log('up');\n",
" player1.velocity.y -= 20;\n",
" break;\n",
" }\n",
" });\n",
"\n",
" addEventListener('keyup', ({ keyCode }) => {\n",
" switch (keyCode) {\n",
" case 65:\n",
" console.log('left');\n",
" keys1.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",
" break;\n",
" case 87: \n",
" console.log('up');\n",
" player1.velocity.y -= 20;\n",
" break;\n",
" }\n",
" });\n",
"\n",
" image.src = 'https://samayass.github.io/samayaCSA/images/platform.png';\n",
"\n",
"</script>"
]
},
{
"cell_type": "code",
"execution_count": 79,
Expand Down

0 comments on commit 26bcd18

Please sign in to comment.