Skip to content

Commit

Permalink
the doggy moves
Browse files Browse the repository at this point in the history
  • Loading branch information
@katiek27
katiek27 committed Sep 25, 2023
1 parent 7a22748 commit eb76ec0
Showing 1 changed file with 102 additions and 99 deletions.
201 changes: 102 additions & 99 deletions _notebooks/2023-09-22-dogsprite.ipynb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,18 @@
"metadata": {},
"source": [
"\n",
"\n",
"<html>\n",
"<head>\n",
" <style>\n",
" /* Add any necessary CSS styles here */\n",
" </style>\n",
"</head>\n",
"<body>\n",
" <div>\n",
" <canvas id=\"spriteContainer\"> <!-- Within the base div is a canvas. An HTML canvas is used only for graphics. It allows the user to access some basic functions related to the image created on the canvas (including animation) -->\n",
" <img id=\"dogSprite\" src=\"{{site.baseurl}}/images/dogSprite.png\"> \n",
" <canvas id=\"spriteContainer\">\n",
" <img id=\"dogSprite\" src=\"{{site.baseurl}}/images/dogSprite.png\">\n",
" </canvas>\n",
" <div id=\"controls\"> <!--basic radio buttons which can be used to check whether each individual animaiton works -->\n",
" <div id=\"controls\">\n",
" <input type=\"radio\" name=\"animation\" id=\"idle\" checked>\n",
" <label for=\"idle\">Idle</label><br>\n",
" <input type=\"radio\" name=\"animation\" id=\"barking\">\n",
Expand All @@ -35,107 +40,105 @@
" <label for=\"walking\">Walking</label><br>\n",
" </div>\n",
" </div>\n",
"</body>\n",
"\n",
"<script>\n",
" // start on page load\n",
" window.addEventListener('load', function () {\n",
" const canvas = document.getElementById('spriteContainer');\n",
" const ctx = canvas.getContext('2d');\n",
" const SPRITE_WIDTH = 160; // matches sprite pixel width\n",
" const SPRITE_HEIGHT = 144; // matches sprite pixel height\n",
" const SCALE_FACTOR = 2; // control size of sprite on canvas\n",
" const FRAME_LIMIT = 48; // number of frames per row, this code assume each row is same\n",
" // const FRAME_RATE = 15; // not used\n",
"\n",
" canvas.width = SPRITE_WIDTH * SCALE_FACTOR;\n",
" canvas.height = SPRITE_HEIGHT * SCALE_FACTOR;\n",
"\n",
" class Dog {\n",
" constructor() {\n",
" this.image = document.getElementById(\"dogSprite\");\n",
" this.spriteWidth = SPRITE_WIDTH;\n",
" this.spriteHeight = SPRITE_HEIGHT;\n",
" this.width = this.spriteWidth;\n",
" this.height = this.spriteHeight;\n",
" this.x = 0;\n",
" this.y = 0;\n",
" this.scale = SCALE_FACTOR;\n",
" this.minFrame = 0;\n",
" this.maxFrame = FRAME_LIMIT;\n",
" this.frameX = 0;\n",
" this.frameY = 0;\n",
" }\n",
"\n",
" // draw dog object\n",
" draw(context) {\n",
" context.drawImage(\n",
" this.image,\n",
" this.frameX * this.spriteWidth,\n",
" this.frameY * this.spriteHeight,\n",
" this.spriteWidth,\n",
" this.spriteHeight,\n",
" this.x,\n",
" this.y,\n",
" this.width * this.scale,\n",
" this.height * this.scale\n",
" );\n",
" }\n",
"\n",
" // update frameX of object\n",
" update() {\n",
" if (this.frameX < this.maxFrame) {\n",
" this.frameX++;\n",
" } else {\n",
" <script>\n",
" window.addEventListener('load', function () {\n",
" const canvas = document.getElementById('spriteContainer');\n",
" const ctx = canvas.getContext('2d');\n",
" const SPRITE_WIDTH = 160;\n",
" const SPRITE_HEIGHT = 144;\n",
" const SCALE_FACTOR = 2;\n",
" const FRAME_LIMIT = 48;\n",
" canvas.width = SPRITE_WIDTH * SCALE_FACTOR;\n",
" canvas.height = SPRITE_HEIGHT * SCALE_FACTOR;\n",
" class Dog {\n",
" constructor() {\n",
" this.image = document.getElementById(\"dogSprite\");\n",
" this.spriteWidth = SPRITE_WIDTH;\n",
" this.spriteHeight = SPRITE_HEIGHT;\n",
" this.width = this.spriteWidth;\n",
" this.height = this.spriteHeight;\n",
" this.x = 0;\n",
" this.y = 0;\n",
" this.scale = SCALE_FACTOR;\n",
" this.minFrame = 0;\n",
" this.maxFrame = FRAME_LIMIT;\n",
" this.frameX = 0;\n",
" this.frameY = 0;\n",
" }\n",
" draw(context) {\n",
" context.drawImage(\n",
" this.image,\n",
" this.frameX * this.spriteWidth,\n",
" this.frameY * this.spriteHeight,\n",
" this.spriteWidth,\n",
" this.spriteHeight,\n",
" this.x,\n",
" this.y,\n",
" this.width * this.scale,\n",
" this.height * this.scale\n",
" );\n",
" }\n",
" update() {\n",
" if (this.frameX < this.maxFrame) {\n",
" this.frameX++;\n",
" } else {\n",
" this.frameX = 0;\n",
" }\n",
" }\n",
" }\n",
" }\n",
"\n",
" // dog object\n",
" const dog = new Dog();\n",
"\n",
" // update frameY of dog object, action from idle, bark, walk radio control\n",
" const controls = document.getElementById('controls');\n",
" controls.addEventListener('click', function (event) {\n",
" if (event.target.tagName === 'INPUT') {\n",
" const selectedAnimation = event.target.id;\n",
" switch (selectedAnimation) {\n",
" case 'idle':\n",
" dog.frameY = 0;\n",
" break;\n",
" case 'barking':\n",
" dog.frameY = 1;\n",
" break;\n",
" case 'walking':\n",
" dog.frameY = 2;\n",
" break;\n",
" default:\n",
" break;\n",
" const dog = new Dog();\n",
" const controls = document.getElementById('controls');\n",
" controls.addEventListener('click', function (event) {\n",
" if (event.target.tagName === 'INPUT') {\n",
" const selectedAnimation = event.target.id;\n",
" switch (selectedAnimation) {\n",
" case 'idle':\n",
" dog.frameY = 0;\n",
" break;\n",
" case 'barking':\n",
" dog.frameY = 1;\n",
" break;\n",
" case 'walking':\n",
" dog.frameY = 2;\n",
" break;\n",
" default:\n",
" break;\n",
" }\n",
" }\n",
" });\n",
" const keys = {};\n",
" document.addEventListener('keydown', (event) => {\n",
" keys[event.key] = true;\n",
" });\n",
" document.addEventListener('keyup', (event) => {\n",
" keys[event.key] = false;\n",
" });\n",
" function handleMovement() {\n",
" if (keys['w']) {\n",
" dog.y -= 5;\n",
" }\n",
" if (keys['s']) {\n",
" dog.y += 5;\n",
" }\n",
" if (keys['a']) {\n",
" dog.x -= 5;\n",
" }\n",
" if (keys['d']) {\n",
" dog.x += 5;\n",
" }\n",
" }\n",
" function animate() {\n",
" ctx.clearRect(0, 0, canvas.width, canvas.height);\n",
" dog.draw(ctx);\n",
" dog.update();\n",
" handleMovement();\n",
" requestAnimationFrame(animate);\n",
" }\n",
" animate();\n",
" });\n",
"\n",
" // Animation recursive control function\n",
" function animate() {\n",
" // Clears the canvas to remove the previous frame.\n",
" ctx.clearRect(0, 0, canvas.width, canvas.height);\n",
"\n",
" // Draws the current frame of the sprite.\n",
" dog.draw(ctx);\n",
"\n",
" // Updates the `frameX` property to prepare for the next frame in the sprite sheet.\n",
" dog.update();\n",
"\n",
" // Uses `requestAnimationFrame` to synchronize the animation loop with the display's refresh rate,\n",
" // ensuring smooth visuals.\n",
" requestAnimationFrame(animate);\n",
" }\n",
"\n",
" // run 1st animate\n",
" animate();\n",
" });\n",
"</script>"
" </script>\n",
"</body>\n",
"</html>"
]
}
],
Expand Down

0 comments on commit eb76ec0

Please sign in to comment.