Here is the address of my project: http://imanas.shanghai.nyu.edu/~yy2572/project1/

The topic of my project is a popular game named “Dark Soul 3”, the game is famous for (its insane difficulty and) the way it tells the players story, it only gives very limited information while it tells us a huge story and an enormous world.So I did not provide with much information but only the description from the game to keep it alike to the game.

1. Making a background image which is a scene from that game.

2. Since the background image is pretty big, I searched on line to figure out how to make my website scrolled. And I used “overflow” style in the html file to achieve that.

3. I then made a very simple heading at the top in the center (Making everything briefly is just the style of that game).

4. There is a bonfire at the center of the background image, and it can be lit in the game. And the animation of it is very gentle and beautiful. So I want to download a gif of bonfire and then replace the bonfire at the background when the mouse is on the bonfire.

Firstly, I want to use the photoshop to cut off the black background of that gif and only leave the bonfire. But then I found out that the gif had more than 300 frames, which means I have to repeat for 300 times, so I gave up. Instead, I used the “clip:rect()” to cut the gif when it is shown on the screen. So that a large area of black background was deleted. Then I find the right location letting the gif perfectly coincide with the bonfire on the background.

Then I started to figure out how to show the gif only when the mouse is on it. I first used hover, but then I searched online and found that “onmouseover” and “onmouseout” can do the same thing more easily. I set my gif the “onmouseover” picture and a blank image the “onmouseout” picture.

5. Then I started to work on the image of the four main bosses in the game. I download their image from the websites and cut the background off in the photoshop. And then I placed them in the right place using “position:absolute”.

6. I then added description for those bosses, this time I used the “hover”. You can see the name of those bosses initially, and when you move your mouse on it, it will show a brief introduction of them. I also carefully chose the text color for each character and copy the hex value to the html file.

Then a wanted to use the “text-align” to make all the texts in the center. It took me sometime to figure out in which class and div I should add that sentence.

I added a outside url to the text and the link will take you to a preciser introduction of those characters. However, at first, the text would turn into purple while I wrote in css file that the text should be white. Finally, I found out that it was because I wrote the “<a>” function as inner function of “<div>” function in html file. After I changed “<div>” function into inner function of “<a>” function, it works well.

7. I think my website was still too simple, so I wanted to make some creation on the bonfire again. In the game, the bonfire is lit by our main character–the ashen one. So I wanted to be the ashen one, I downloaded his picture and cut his head and sword by using photoshop. And then I took a photo of myself with the exact posture to light a bonfire. After that, I combined them together in the photoshop and put the combined image just beside the bonfire. So now it looks like I am lighting the bonfire.

When the bonfire is lit in the game, the screen will show “BONFIRE LIT”, which is a classic and typical scene in the game. So I downloaded that image, cut it and put it in the right location.

8. I think the website cannot be without a background music. So I chose one in its soundtrack. I learned on the website how to play a background music in html file and I got five ways. But I only succeeded using one way, and it will show a player at the left-top corner which seemed a little incongruous. Also, I set it to autoplay but it did not work as I want. So I cannot hide the player or the visitor cannot play the music.

If I can have more time.

1. I want to make the gif clear and only leave the bonfire, so it will look more beautiful as it will perfectly fit the background image.

2. Make the background music automatic to play and hide the player.

3. Add more characters on the website and tell more about their stories.