Skip to content

Commit

Permalink
canvas
Browse files Browse the repository at this point in the history
  • Loading branch information
@NicholasRamos5
NicholasRamos5 committed Jul 10, 2023
1 parent 96b88a9 commit 82edfd2
Showing 1 changed file with 39 additions and 39 deletions.
78 changes: 39 additions & 39 deletions _notebooks/2023-06-13-Mario.ipynb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down

0 comments on commit 82edfd2

Please sign in to comment.