Canada's Sports Hall of Fame

Team:

Dennis Zhang - Character & Ice Rink Artist

Cindy Lieu - Mock-up Designer, Background Designer

Julian Fung - Coder

Same team but assigned to a different part (gallery) of the project:

Fasih Malik

Zana Omar

The Evolution of the Ice Hockey Evolution Game

Having obtained a great opportunity to work together with Canada's Sports Hall of Fame in a project, I was tasked with coding an interactive game for a touchscreen display. Here is my documented evolution of how the game came to be.

Note: You can play any version of the game by clicking on their respective screenshot. (When hovered, they will glow red.)

Note 2: This game is not made nor designed for mobile/small screens. Please use a computer to play - especially for version 5 and later.

Image of Hockey Evolution version 1

Version 1

Where it all began. Much simpler times of just boxes. The main purpose of this was to get the fundamentals of the code working.

Image of Hockey Evolution version 2

Version 2

Began setting up CSS to make it look nice and made it so that the score is tracked on the scoreboard. Created some placeholder images in preparation of implementing final images from the character and background designer, Dennis.

At this stage, the layout designer, Cindy, was still working on her design mock-ups.

Version 3

Design mock-ups started coming in and I started coding the CSS based off of mock ups.I've also added some animation to when you first begin the era.

Image of Hockey Evolution version 3

Mock ups by Cindy

Mockup image of welcoming player to an erawhat the game itself will relatively look like

Version 4

Majority of this update was adding navigation + some small edits here and there. A lot of the work is done and is mostly just waiting for the content to be given to me (French, images, random facts, etc.)

Image of Hockey Evolution version 3

Mock ups

what the game itself will relatively look likeMockup image of welcoming player to an era

Version 5

Tons of changes. Rewrote a lot of the code to be dynamic so that it would be easier for me to implement changes - if any. Updated visuals of screens to Cindy's updated mock-ups. Game is still waiting on character sprites from Dennis. For now, there is only level 1.

IMPORTANT NOTE

Game screen has been changed to fit the Canada Sports Hall of Fame's touchscreen display size of 1920 x 1080. If you are to play the game, game may be very glitched because your screen size isn't 1920 x 1080.

Changing Screen Size

Google Chrome Instructions (Desktop)
To play in chrome at designed screen size: right click (or ctrl+shift+i) -> inspect -> follow the image below

Every version from now, will require you to be at the designated screen resolution if you do not want to experience any weird glitches/layouts.

Image of Hockey Evolution version 3

Version 6

Redesigns came in and things such as the background image and layout design had been changed. Character sprites by Dennis have been added. Some minor changes to code here and there. Now pretty much waiting on the text content.

Image of Hockey Evolution version 3

FINAL VERSION (7)

Everything has been completed. Between this version and the previous, there are several things that got changed. Again, reminder to ensure you are playing it through 1920 x 1080 resolution to avoid any weird glitches and such.

A major change that occurred, is that the landing page has been removed. And thus when you press the home button, it will not work as intended. On the live project on the touchscreen display at Canada's Sports Hall of Fame's facility, the home button would take you back to the main menu of the entire project.

This game just shows my contribution to the project, not the project as a whole.

Special thanks to the wonderful team I worked with on this project.

Team:

Dennis Zhang - Character & Ice Rink Artist

Cindy Lieu - Mock-up Designer, Background Designer

Julian Fung - Coder

Same team but different part (gallery) of the project:

Fasih Malik

Zana Omar

Image of Hockey Evolution version 3