Project Title: Beyond the Stellaris
Link:https://n-a-e-s.github.io/CCLab-Strix-Local/Star_Field/index
Descripition: The project mainly aimed to provide a web layout draft for Project B. Thu I built the layout with three main sites and a transferring CG. The first layer is set for the cover(which comes from the game Star Field.) and menu choices. The Second layer lies in the performance of the game, which is currently still in processing. Thus, I simply used a relative demo as a placeholder for the real game. The same works for the reading material part in the third layer where there shall be a letter and operation instruction for those who live a thousand years later. After those three layers is a transferring CG that connects all the layers. The CG is designed as a set of stars flashing towards the user, imitating that they are going through an FTL travel.
Code:
For the whole project’s code, please visit my GitHub to accesshttps://github.com/N-A-E-S/CCLab-Strix-Local/tree/main/Star_Field
The Code mainly consists of 5 HTML files and a CSS file. Due to the concern of adjustability, I moved several style codes from independent CSS files to combine them with their HTML files. The major issue here I encountered was how to count the time and jump to a new layer after the transferred CG was played. Eventually, I used codes like
function redirect() {
window.location.href = ‘gamepage.html’;
}
setTimeout(redirect, 3000);
to solve the problem.
Also, I attached some degree of flex CSS to the project.
Takeaway/Future improvement
- The second layer is a bit too pale and needs more decoration and instruction.
- The third layer needs more real content.
- The transfer between layers and transfer CG is way too straight, a little fade-in/fade-out would be nice.
- The position of buttons can be optimized.