Vanilla-Memory-Game by Raquel Peña
__φ(。。) Table of Contents
Table of Contents
٩(◕ ‿◕｡)۶ About the project
Since I was little I always liked this game, I used to play with cards and although I always had to look for the same animals, that didn't make me like the game any less.
Today I would like to share with you my version of the game, I have made it using this tutorial and bringing a little bit of my magic.
(ﾉ´ヮ`)ﾉ*: ･ﾟ What it is and how to play
The game consists of finding the pair of each image. Here is an example:
What happens if they don't match? NOTHING, try again
\(★ω★)/ Fun stuff
We LOVE Fun ( click me )
- If you have clicked on two images and they do not match, you cannot click again until they are rotated:
-
When you have finished, you will hear a sound and a button will be activated to start over.
(o･ω･o) What I have learned and reviewed
-
A better understanding of how it works position absolute.
-
3D Effect for rotating images.
-
Use of data atributtes to know which image has been rotated and to know if they match
-
Random position of images: IIFE so that the function is executed immediately once it has been declared and with style.order that will modify the position of the images, instead of having all of them in position 0 (it is by default) thanks to Math.floor(Math.random() * 12) they have a number assigned up to 12 randomly.
(๑˘︶˘๑) What you need to make it yours
It is made with HTML, Css and Javascript so you don't need anything special. You can play directly by clicking on the link, you can fork the project or you can download the entire game. It is up to you.
( ￣ー￣)φ__ I am responsive
You can play from any device you choose
(≧▽≦)/ Who is Raquel
I am Raquel, I consider myself a person with a great sense of humor, always eager to learn, a lover of challenges and this combination is what led me to study web development.
If you want to know more about me or if you have a fun project and you need help we could work together, you can find me here