This is a challenge to help learners of JS target DOM nodes, use keyboard events, and learn about parseInt.
Current working version: https://mewmewkitty.netlify.app/
You are going to create a mini game where you can move MewMew left/ right/ and make him jump!
You shouldnt have to update any of the existing CSS (but feel free to if you would like to)
To Complete this challenge, you will need to read the below material or have an understanding of those topics.
- html
- CSS
- identifying node/DOM elements
- Remember that we can either target them using the element type (i.e.
<p>,<h1>) OR by a class or Id that we specifically add to it - if we find the element that we are looking for, we can toggle, add, or remove a class (and/or Id) using methods available in JS.
- Remember that we can either target them using the element type (i.e.
- event listeners
- Mouse and possibly Keyboard events.
- There are ALOT of ways we can 'see' what a user does on our website, refer here for a list of them:Docs on events
- How to coerce a string into a number.
- You can complete this challenge a number of ways, but parseInt is a great method to add to your utilities. If you want to use parseInt you will need to find the docs on this yourself, when searching make sure that you search:
- The technology - JS
- The topic - parseInt
- This would end up looking like: 'js parseInt'.
Always be careful to specify languages first when searching as there are some common names across languages, and those articles may not be helpful
Add further events that allow you to press keyboard keys instead of or in addition to the button clicks.
i.e. Press the Left Arrow on your keyboard to move Left