Canadian Conquest

Introduction View.
Character Selection View.
Actual Board Game View.

Inspiration

We wanted to create a project that is fun to play and look at while also providing information about Canada as a nation and as a community. Our team is composed of individuals whose families do not originate from Canada and as a result, we often get questions about what Canada is like. Often, people around the world view Canada as a cold, harsh climate where everyone is just extremely nice. We wanted to allow people to see the real Canada with our project.

What it does

The project is a web-based game which utilizes HTML, CSS, and JavaScript to present three different screens in which the first is the introduction screen where it introduces the concept and the instructions on how to play the game. The next screen is the character selection screen in which users can choose from four different iconic and symbolic Canadian animals, the beaver, the bear, the moose, and the fox. And finally, the third screen is a screen which contains a four by four grind to hold 16 different images of very well known (in Canada) places. Then, there is a button on the same screen which allows the user to roll a die, producing an output between one to six. After this, there is a pop-up on the screen notifying the user the current square they are now on and providing a short blurb on that particular image on the square. It is meant to be a fun and informative game for anyone to play!

How we built it

We built this project by using HTML, CSS, and JavaScript to produce a 3 piece webpage. In index.html, different classes were used within div elements to produce characters and titles for the game. JavaScript was used to carry out functions for the program, such as functions used for relaunching the webpage and displaying certain aspects of the project along with producing the algorithm for moving the pieces based on the randomly generated number (dice). Furthermore, CSS was used to make the project more appealing and aesthetic for the user and to provide a nicer overall experience. We also used some photo editing websites to remove whitespace from pictures.

Challenges we ran into

Due to our limited experience with web development, we were required to research extensively in order to get the results we wanted. This did present us with some delays in our initial planning, however we were able to bounce back and produce something we are proud of.

Accomplishments that we're proud of

We are very proud of the UI experience we put together, with the moving backgrounds and the common aesthetic theme that binds the website together. We are also proud of the fact that we got our idea from a conceptual stage to reality with our limited web dev knowledge.

What we learned

We learned a lot of things in web dev such as how to enhance user experience and deal with issues that come up in code. We also learned to use different tags in HTML. We learned how to filter and move picture with CSS which helped to improve the quality of our project.

What's next for Canadian Conquest

The Canadian Conquest webpage is not properly displayable on all devices, specifically phones or large monitors as dimensions do not proportionally reduce or increase with a device. We would also like to offer more character choices for the game and also the ability to display your character along with the board game screen. We would also like to add more to our gameboard section, for example showing your character moving on the board for different squares. Lastly we would also like to incorporate a 2D or 3D dice that the user can roll to determine their next move.