Project Name: Match It
Course Name: Multimedia and Human Computer Interaction
Group Members: Regita Isada, Nathania Kezia Barakati
INTRODUCTION
Match It is a memory-matching card game where the player has to click through and find two objects, or cards that match each other in a layout of cards. This game is aimed for kids of kindergarten age so they can learn the names of animals, fruits and vegetables, as well as to strengthen their memory skills. The game is made using Construct 2.
Match It consists of two locations: Zoo and Garden, and each location has two levels which consists of different numbers of cards.
HOW THE GAME WORKS
When the game is opened, the start menu will show first. Shown in the screenshot below, there is a button that say ‘START’ on it. Pressing the ‘START’ button will have the game redirect to the ‘Select Level’ layout. The ‘Sound’ button serves as an option to turn the sound on or off. Every layout has their own Sound button.
The ‘Select Level’ layout consists of the options of levels that can be selected. If either of the ‘Zoo’ levels are chosen, the game will redirect to the Zoo level, and if either of the ‘Garden’ levels are chosen, the game will redirect to the Garden level. Choosing the ‘Go back’ button will redirect to the first home screen. Choosing the ‘Credits’ button will redirect to the game’s credits and the ‘Exit’ button will exit the game.
After a level is selected, the game then will load the level. before the level can be played, an instruction screen is shown before the level can be played, shown in the screenshot below.
If the ‘PLAY’ button is clicked, the level will now start. The level layout looks like the screenshots below:
My part of this project is largely focused on the base of the game itself, I did most of the coding around the levels of the game. To layout the cards, I only used one sprite object but many animation frames. I used global variables to determine the card’s height, width, top-left margins and distance between cards so it can be adjusted differently on every other level.
For the card’s width and height, i used these equations:
HEIGHT: int(((WindowHeight-((rowNum+1)*cardSpace))/rowNum)-20) WIDTH: int(cardHeight*(Card.Width/Card.Height))
These equations are mainly used to adjust the card size to fit the window. The variables cardHeight, cardWidth, rowNum and cardSpace are global variables.
For the top margin, I used this equation:
int(((WindowHeight-(cardHeight+cardSpace)*rowNum)/2)+10)
And for the left margin, I used this equation:
int(((WindowWidth - (cardWidth+cardSpace)*ColumnNum)/2)+220)
For the margins, it is the result of subtracting the game window’s height/width with the space remaining, multiplied by the number of columns and divided by 2. Since the cards are laid out in the center, i added some distance to adjust their position so they will fit the window I provided for the cards.
For the card distribution and so that every card’s image is evenly distributed, I used an array. The array is then used to randomize the cards so not all of the same cards are laid next to each other. Four local variables are used to put the values of the array and then randomize it. I also added a Time feature so the player can see how much is the time taken, and a Matches feature to show how many matches are made by the player, and how many are needed to complete the level.
For the timer, i simply called a function that adds delta-time, a default time variable in Construct 2, to the function’s parameters. This process is then repeated for every tick. To pause the time when the ‘Go back’ button is pressed or the level has been cleared, I simply added a global variable to be set in the function event, and added 1 to it when the game is paused because the time will run if that variable is less than equal to 0. When the game stops being paused, the time will run again.
A ‘Go back’ button is also added to the level, so if the player wants to go back to the menu screen, the ‘Go back’ button can be pressed. If the button is pressed, the game will pause and the player will be asked if they’re sure if they want to go back to the menu screen or not. If the ‘Yes’ option is pressed, then the game will redirect to the menu screen. If the ‘No’ option is pressed, the game will resume from where it is left.
If the player matches two of the same cards, the cards will then disappear.
If the player opens two cards, but they’re not the same one, the cards will then flip back to their original state.
When all of the cards are matched by the player, a screen that says ‘Well Done!’ will show up, as well as a set of buttons.
The ‘Play Again’ button will replay the level, whereas the ‘Play next level’ and the ‘Play prev. level’ will redirect to the next or previous level, depending on the level the player is in. The ‘Return’ button will redirect to the main menu.
CREDITS
The following is the credits for the assets used on this game, as well as the guides and/or tutorials that helped us on the making of this game.
Backgrounds:
Start page, Menu, & Credits background – https://www.shutterstock.com/video/clip-12361556-stock-footage-illustrated-cartoon-clouds-on-a-bright-blue-sky-animation.html
Zoo level background – https://pixabay.com/en/cartoon-background-day-nature-2614618/
Garden level background – http://www.publicdomainpictures.net/view-image.php?image=40351
Logo:
Created with MediBang Paint
Sprites:
Lion sprite – https://pixabay.com/en/lion—feline-cut-out-silhouette-2402715/
Elephant sprite – https://pixabay.com/p-884045/?no_redirect
Apple sprite – https://pixabay.com/en/apple-black-fruit-silhouette-297775/
Watermelon sprite – https://pixabay.com/p-2409368/?no_redirect
Pineapple sprite – https://pixabay.com/p-1916996/?no_redirect
Tomato sprite – https://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/Tomato-global.png/531px-Tomato-global.png
Grapes sprite – https://commons.wikimedia.org/wiki/File:Bunch_of_grapes_icon.svg
Broccoli sprite – https://www.pexels.com/photo/close-up-of-leaf-against-black-background-257791/
Corn sprite – http://www.gateway-africa.com/stories/images/ear-of-corn.jpg
All unlisted sprites are made in Photoshop
Patterns:
Giraffe pattern – https://pixabay.com/p-937622/?no_redirect
Sound Effects:
Ding sound effect – https://www.youtube.com/watch?v=NovyGK3L9hY
Kids saying ‘yay’ – https://www.youtube.com/watch?v=xUMUEaaqlWA
Tiny Button Push – http://soundbible.com/419-Tiny-Button-Push.html
Background Music:
Happy, Upbeat Background Instrumental for Videos, Kids – NO COPYRIGHT! [Royalty Free] – https://www.youtube.com/watch?v=TsTz8T4ZBEA
Guides/Tutorials:
Memory Match Tutorial – https://www.scirra.com/tutorials/280/creating-a-memory-match-game
Tutorial Exit Button – Construct 2 https://www.youtube.com/watch?v=0Vlho3agkH8