You can learn more about me on my website, Twitter, or LinkedIn
zaklaughton / memory-game Goto Github PK
View Code? Open in Web Editor NEWMemory game web app
Home Page: https://memory.zaklaughton.com/
Memory game web app
Home Page: https://memory.zaklaughton.com/
You can learn more about me on my website, Twitter, or LinkedIn
There's a lot of redundancy in the endGameFlip function. This could be simplified by putting redundant code in a function.
function endGameFlip () {
let cards = document.querySelector('.deck').childNodes;
animateAction = 'bounceIn'
setTimeout(function () {
animate(cards[0], animateAction);
}, 100);
setTimeout(function () {
animate(cards[1], animateAction);
animate(cards[4], animateAction);
}, 200);
setTimeout(function () {
animate(cards[2], animateAction);
animate(cards[5], animateAction);
animate(cards[8], animateAction);
}, 300);
setTimeout(function () {
animate(cards[3], animateAction);
animate(cards[6], animateAction);
animate(cards[9], animateAction);
animate(cards[12], animateAction);
}, 400);
setTimeout(function () {
animate(cards[7], animateAction);
animate(cards[10], animateAction);
animate(cards[13], animateAction);
}, 500);
setTimeout(function () {
animate(cards[11], animateAction);
animate(cards[14], animateAction);
}, 600);
setTimeout(function () {
animate(cards[15], animateAction);
}, 700);
}
Add animations to make the game feel more immersive.
Including:
Animations for matches and the endGame flip use entrance animations, causing the cards to briefly disappear, then animate. This will have a smoother feel if an animation is used that is not an "entrance" animation. (e.g. "bounce" instead of "bounceIn")
Have some special animation after winning that animates all the cards.
The cards are currently hard-coded into the HTML. It would be better to have the cards dynamically generated via javascript and placed on the page.
If two matching cards are selected, and a third card is selected immediately after, it will register visibly as 3 matched cards.
Add more Font Awesome objects to choose from. Randomize the symbols used in each game.
If all the content on the end game screen used "slideInUp" animation as the end game screen fades in, it might look cool.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.