Live link: https://marcroth0.github.io/memory-game/
- Create an interactive game that is clear and simple
- Create a layout that is user friendly
- Please the users with an alternative in color scheme
- Attract the users by using famous european sites
- As a user I want to easily know the rules of the game
- As a user I want to easily understand how to start the game
- As a user I need to know what my score is
- As a user I need to know when the game has been won
- As a user I want the possibility to be able to reset the game
Memory is a classic game consisting of flipping two cards until you get a match. The game goes along until every card has been matched. This time with a theme of famous european landmarks.
The design consists of two themes. One day, one night. This to make it easier for users to play depending on the time of day, to releave stress to the eyes. I chose the colors based on the palette of the themes background.
Considering it being a one-page site it needed to be visually pleasing the moment you enter it.
Night:
Day:
It being a "instant play" game I needed to make the grid pop. Adding the shadow behind the tiles gives them a "floating" visual.
Night:
Day:
I wireframed it using Balsamiq. Considering it was a one-page game it didn't require a lot of planning besides the outline viewed below.
The only thing that strayed from the initial wireframe was the addition of the two themes.
font-family: "Roboto", sans-serif (The rest) font-family: "Alfa Slab One" (H1/H2)
I tested the responsiveness of the site on the below units, using chrome dev as well as some in real life testing:
Mobile
- Moto G4 (360x640)
- Galaxy S5 (360x640)
- Pixel 2 (411x731)
- Pixel 2 XL (411x823)
- iPhone 5/SE (320x568)
- iPhone 6/7/8 (375x667)
- iPhone 6/7/8 Plus (414x736)
- iPhone X (375x812)
- iPad (768x1024)
- iPad Pro (1024x1366)
Browsers:
- Chrome
- Mozilla Firefox
- Safari
- Edge
See further on click here
W3 HTML Validator:
W3 CSS Validator:
JS validator:
The issues portrayed I deemed not needing a fix, considering the "defined but never used" is functions being called in the html-document.
No known bugs.
The below code, as commented in the js-file, could be shortened to a common "changeTheme" function instead.
// Change the background and border for the images if user chooses light theme
function dayTime() {
let imgs = document.getElementsByTagName("img");
let btns = document.getElementsByClassName("btn");
for (let i = 0; i < imgs.length; i++) {
if (imgs[i].getAttribute("src") == "assets/images/grid-img.png") {
imgs[i].setAttribute("src", "assets/images/day-time-grid.jpg");
}
imgs[i].style.borderColor = "#eaddcb";
}
document.body.style.backgroundImage = "url('assets/images/day-time.jpg')";
for (let i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = "#caa865";
}
theme = "day-time-grid.jpg";
}
// Redundant? Could be done in a single "changeTheme" function
function nightTime() {
let imgs = document.getElementsByTagName("img");
let btns = document.getElementsByClassName("btn");
for (let i = 0; i < imgs.length; i++) {
// Continue the game when you change between themes
if (imgs[i].getAttribute("src") == "assets/images/day-time-grid.jpg") {
imgs[i].setAttribute("src", "assets/images/grid-img.png");
}
imgs[i].style.borderColor = "#086068";
}
document.body.style.backgroundImage = "url('assets/images/background.jpg')";
for (let i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = "#01394a";
}
theme = "grid-img.png";
}
- Implement more difficult settings, one being more boxes, and a hard-mode requiring a correct answer to a question relevant to the actual building (if correct guess, shave off a point on 'clicks')
- An high-score feature.
- The site was deployed to GitHub pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab
- From the source section drop-down menu, select the Master Branch
- Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
The live link can be found here - https://marcroth0.github.io/memory-game/
- Some of the basic structure was inspired by Fakorede Damilola
- A general shout-out to StackOverflow
- Images used were taken from Pexels