Author: jc8017

Link: http://imanas.shanghai.nyu.edu/~jc8017/Project3/start.html

Our final project is a clicking adventure game where you as a the player are trapped inside a room. The goal is to escape but finding clues and picking objects in the room. Without spoiling any further, the theme is science fiction.

One of the most difficult objectives was to lay out a framework in which the computer can keep track what the user has interacted with. Since the game features the user picking items and also making certain scenes change, how can we program it such that computer understands and responds appropriately to each action? The solution lies in the separating different events in small chunks such as functions and objects.  Each event will  handled by a function called the handler. This handler function determines the scene in which the user is in. Another vital function is the handle click function. This function determines which scene the user is in, the function will be appropriately passed to handle events in a specific scene. With this setup, we were able to code all the changes in javascript without needing to change the html file. In fact, the html file only contains one image, three buttons, and eight audio elements. The core mechanics of the game is within the javascript file.

Of course, one of the major challenges with such a html setup is the frequent changes in scene. Therefore, for every event or change in the story, a new image must be displayed. Every picture has been generated by photoshop in a photo-montage like style. Pictures of the study room are taken and then imposed onto a crude drawing of one side of a wall.

Link: http://imanas.shanghai.nyu.edu/~jc8017/Week%203/index.html

Getting the right pictures to make it opaque is the real challenge when doing this assignment. I implemented a round robin style method where each picture is associated with a single number. There is a variable that tracks the current picture by having it assigned the number of the current picture. This variable tells which picture to “light” up. As the user presses the walk button, the variable increases in value. Once it reaches the max, the variable will be automatically set to zero. Thus, it comes back full circle.

Link: http://imanas.shanghai.nyu.edu/~jc8017/HW2/index.html

One mistake I always keep on making is forgetting to link functions in the html document. I spent sometime trying to figure out why my code does not work. Additionally, I wanted to see if I could automate the process. I found online this setInterval function which is provided by Javascript. I implemented it to make the cat dance automatically.

Our idea will be an interactive “chose your story” comic. The user will play as the main character  and follow along with the plot. At critical sections, the user will make decisions for their character. Depending on their choices, the plot line can diverge and eventually lead to different endings. Thus, with each different play through of our comic, the user will be able to encounter  different plot lines and discover hidden . By doing so, we will be able to enhance the user experience and bring them new content each time they go through our comic.

As of right now, the theme is science fiction. We plan on making the different plot lines as the weeks progress. While the core of the comic is based on user decisions to further the plot, we would like to add more interactivity to the story by implementing small games that the user has to play. We hope to use javascript or any javascript library to develop those mini games.

Link: https://imanas.shanghai.nyu.edu/~jc8017/website/index.html

For this iteration, I implemented CSS on my webpage. The layout that I wanted is a simply one where all the content are centralized towards the page rather than be on the left side. I achieved through by manipulating the padding such that I squeeze the content towards the center.

In addition, I added a navigation bar. I have some other pages that I want to link so I created a nav bar. At first, I had issues trying to separate the different links. The links were all clustered together. I was able to separate the different links by implementing the flex attribute in css. 

I also added a background for my website. Initially, I wanted to add a singular color. However, after finding out the gradient property attribute, I implemented it as my background. I hope that the gradient gives my website a fiery look and attracts the attention of those who visit it.