link: http://imanas.shanghai.nyu.edu/~zy1193/project1/project.html
Description
Our story is about a team of pig, dog, rabbit, panda heard about the treasure in the haunted house, so they go for an adventure in the haunted house, But in the end, they did not find the treasure but reaped the friendship.
At first, we created a lot of plots with conversation. But then, we found it was hard to render on a web page, so we cut and change parts of the plot to make it combine with HTML, CSS and JavaScript better.
Structure
My idea is to create one main page, which contains a brief introduction, and if you click different buttons, you can get into different floor page.
Outside the door is a page to introduce each character. The 1st floor is a maze, and I try to use a simple animation to present it. The 2nd floor and the top floor are presented in the same way. The 2nd floor is a floor covered with water, and the characters use a boat to get across it. The top floor has a magic ball on it and using which characters make a wish.
Process
I designed the structure of five pages, code the first three pages and also provide the code model for the last two pages.
The first problem I met is when I create the button the get into different pages, a new page just pops up, so at the end of the whole interaction process, there are many pages open together. So I google about this question and use the function of location to fix this problem.
The second problem is that what I want is to click the button once and the comics will automatically and continuously play. But use my knowledge in the recitation exercise–walking, I need to continuously click the button to make the picture move. So later I went to the lab and ask fellows for help, and use the setTimeout to fix this problem. (But in this part I think my way to create the animated sequences is too complex and it is easy to make mistakes if you are not clear in logic and not careful. )
The third problem is that I want to change the function of the button halfway. But when I code in JS “utton1.onclick=xxxxx();” without my click, it automatically follows the order. I went to the fellow, she tells me I should delete the ().
Gain
This my first time to finish an IMA project. I feel good and proud of it. Designing webpage and coding are new to me, but as long as we dare to try and learn modestly can we gain valuable experience.