Same as everyone else, this week I made a simple webpage to simulate a person walking. If you press a button, one of three images becomes fully opaque while the other two transparent, giving the illusion of the character walking forward, then looping back to the start. I also added another button to make the character move backward.
To do this, I added in all three pictures as items in the “image” class within the “image-container” class, giving these similar attributes as the “content-box” and “content” classes from the about-page assignment, making them stand next to each other, but also dynamically changing position if you resize the window. I gave each of the images its own unique id, giving me the freedom to later manipulate each of them separately, and made the first image fully opaque, and the second and third images transparent (to start out).
I then implemented the page’s Javascript interactivity. I decided to keep an internal variable to keep track of which walk position the character is in, and decided that each time you press the Walk button, you increment this variable (and apply a modulo 3, so that when it reaches 3 it goes back to 0). The script then makes one of the images fully opaque (which image to choose is based on the internal variable), and makes the other two transparent. It’s very simple, but I came across several bugs that took a while to identify and solve, namely I didn’t have “document.” before “getElementById()”, and was calling “x.opacity” to change item x’s opacity attribute, instead of “x.style.opacity” (x is just an example name). Once I figured that out, the page worked beautifully. At first there was only a Walk button to walk forwards, but I changed this to Forward and added a Backward button as well. This was very easy as most of the script code was broken up into smaller functions, which were called sequentially when the Forward button was pressed. I changed the method of incrementing (incrementing by 2 instead of 1) for the Backward button, and otherwise called the same functions.