Skip to content

Commit

Permalink
nw attempt
Browse files Browse the repository at this point in the history
  • Loading branch information
@NicholasRamos5
NicholasRamos5 committed Jul 10, 2023
1 parent 48ee641 commit c88f9fa
Showing 1 changed file with 148 additions and 135 deletions.
283 changes: 148 additions & 135 deletions _notebooks/2023-06-13-Mario.ipynb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -737,79 +737,80 @@
],
"source": [
"%%html\n",
"<style>\n",
" #canvas2 {\n",
" margin: 0;\n",
" border: 1px solid black;\n",
" }\n",
"</style>\n",
"<canvas id=\"canvas2\"></canvas>\n",
"<script>\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",
"\n",
" class Player2 {\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",
" <style>\n",
" #canvas2 {\n",
" margin: 0;\n",
" border: 1px solid black;\n",
" }\n",
" draw() {\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 <= canvas2.height)\n",
" this.velocity.y += gravity2;\n",
" else\n",
" this.velocity.y = 0;\n",
" }\n",
" }\n",
" </style>\n",
" <canvas id=\"canvas2\"></canvas>\n",
"\n",
" class Platform2 {\n",
" constructor(image) {\n",
" this.position = {\n",
" x: 0,\n",
" y: 200\n",
" <script>\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",
"\n",
" class Player2 {\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",
" 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 <= canvas2.height)\n",
" this.velocity.y += gravity2;\n",
" else\n",
" this.velocity.y = 0;\n",
" }\n",
" this.image = image;\n",
" this.width = 540;\n",
" this.height = 160;\n",
" }\n",
" draw() {\n",
" c2.drawImage(this.image, this.position.x, this.position.y);\n",
" }\n",
" }\n",
" class Tube {\n",
" constructor(image) {\n",
" this.position = {\n",
" x: 10,\n",
" y: 10\n",
"\n",
" class Platform2 {\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",
" c2.drawImage(this.image, this.position.x, this.position.y);\n",
" }\n",
" this.image = image;\n",
" this.width = 540;\n",
" this.height = 160;\n",
" }\n",
" draw() {\n",
" c2.drawImage(this.image, this.position.x, this.position.y);\n",
" class Tube {\n",
" constructor(image) {\n",
" this.position = {\n",
" x: 10,\n",
" y: 10\n",
" }\n",
" this.image = image;\n",
" this.width = 540;\n",
" this.height = 160;\n",
" }\n",
" draw() {\n",
" c2.drawImage(this.image, this.position.x, this.position.y);\n",
" }\n",
" }\n",
" }\n",
"\n",
" const image2 = new Image();\n",
" const imageTube = new Image();\n",
" const image2 = new Image();\n",
" const imageTube = new Image();\n",
"\n",
" const player2 = new Player2();\n",
" const platform2 = new Platform2(image2);\n",
Expand All @@ -822,83 +823,95 @@
" }\n",
" };\n",
"\n",
" imageTube.onload = function() {\n",
" const tube = new Tube(imageTube);\n",
" animate2();\n",
" const loadImage = (src) => {\n",
" return new Promise((resolve, reject) => {\n",
" const image = new Image();\n",
" image.onload = () => resolve(image);\n",
" image.onerror = (error) => reject(error);\n",
" image.src = src;\n",
" });\n",
" };\n",
"\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 (keys2.right.pressed) {\n",
" player2.velocity.x = 5;\n",
" } else if (keys2.left.pressed) {\n",
" player2.velocity.x = -5;\n",
" } else {\n",
" player2.velocity.x = 0;\n",
" }\n",
" if (\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",
" player2.velocity.y = 0;\n",
" }\n",
" }\n",
" Promise.all([\n",
" loadImage('https://samayass.github.io/samayaCSA/images/platform.png'),\n",
" loadImage('https://NicholasRamos5.github.io/VSCodings/images/MarioItems/tube.png')\n",
" ])\n",
" .then(([platformImage, tubeImage]) => {\n",
" image2.src = platformImage.src;\n",
" imageTube.src = tubeImage.src;\n",
"\n",
" animate2();\n",
" const tube = new Tube(imageTube);\n",
"\n",
" addEventListener('keydown', ({ keyCode }) => {\n",
" switch (keyCode) {\n",
" case 65:\n",
" console.log('left');\n",
" keys2.left.pressed = true;\n",
" break;\n",
" case 83:\n",
" console.log('down');\n",
" break;\n",
" case 68:\n",
" console.log('right');\n",
" keys2.right.pressed = true;\n",
" break;\n",
" case 87:\n",
" console.log('up');\n",
" player2.velocity.y -= 20;\n",
" break;\n",
" }\n",
" });\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 (keys2.right.pressed) {\n",
" player2.velocity.x = 5;\n",
" } else if (keys2.left.pressed) {\n",
" player2.velocity.x = -5;\n",
" } else {\n",
" player2.velocity.x = 0;\n",
" }\n",
" if (\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",
" player2.velocity.y = 0;\n",
" }\n",
" }\n",
"\n",
" addEventListener('keyup', ({ keyCode }) => {\n",
" switch (keyCode) {\n",
" case 65:\n",
" console.log('left');\n",
" keys2.left.pressed = false;\n",
" break;\n",
" case 83:\n",
" console.log('down');\n",
" break;\n",
" case 68:\n",
" console.log('right');\n",
" keys2.right.pressed = false;\n",
" break;\n",
" case 87:\n",
" console.log('up');\n",
" player2.velocity.y -= 20;\n",
" break;\n",
" }\n",
" });\n",
" animate2();\n",
"\n",
" \n",
" \n",
" imageTube.src = 'https://NicholasRamos5.github.io/VSCodings/images/MarioItems/tube.png';\n",
" addEventListener('keydown', ({ keyCode }) => {\n",
" switch (keyCode) {\n",
" case 65:\n",
" console.log('left');\n",
" keys2.left.pressed = true;\n",
" break;\n",
" case 83:\n",
" console.log('down');\n",
" break;\n",
" case 68:\n",
" console.log('right');\n",
" keys2.right.pressed = true;\n",
" break;\n",
" case 87:\n",
" console.log('up');\n",
" player2.velocity.y -= 20;\n",
" break;\n",
" }\n",
" });\n",
"\n",
" \n",
" image2.src = 'https://samayass.github.io/samayaCSA/images/platform.png';\n",
"</script>\n"
" addEventListener('keyup', ({ keyCode }) => {\n",
" switch (keyCode) {\n",
" case 65:\n",
" console.log('left');\n",
" keys2.left.pressed = false;\n",
" break;\n",
" case 83:\n",
" console.log('down');\n",
" break;\n",
" case 68:\n",
" console.log('right');\n",
" keys2.right.pressed = false;\n",
" break;\n",
" case 87:\n",
" console.log('up');\n",
" player2.velocity.y -= 20;\n",
" break;\n",
" }\n",
" });\n",
" })\n",
" .catch((error) => {\n",
" console.error('Error loading images:', error);\n",
" });\n",
" </script>\n",
"\n"
]
},
{
Expand Down

0 comments on commit c88f9fa

Please sign in to comment.