Memory card game with VueJS

Developer
Icebob
Size
7,266 Kb
Views
115,368
  1. Memory card game with VueJS Previews
  2. Memory card game with VueJS HTML Codes
  3. Memory card game with VueJS CSS Codes
  4. Memory card game with VueJS JS Codes

How do I make an memory card game with vuejs?

What is a memory card game with vuejs? How do you make a memory card game with vuejs? This script and codes were developed by Icebob on 12 June 2022, Sunday.

Memory card game with VueJS Previews
IQ Test

Memory card game with VueJS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Memory card game with VueJS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app"> <div class="info"> <div><span class="label">Time:</span><span class="value">{{ time }} </span></div> <div><span class="label">Turns:</span><span class="value">{{ turns }} </span></div> </div> <div class="cards"> <div class="card" v-for="card in cards" :class="{ flipped: card.flipped, found: card.found }" @click="flipCard(card)"> <div class="back"></div> <div class="front" :style="{ backgroundImage: 'url(' + card.image + ')' }"></div> </div> </div> <div class="splash" v-if="showSplash"> <div class="overlay"></div> <div class="content"> <div class="title">You won!</div> <div class="score">Score: {{ score }}</div> <button class="newGame" @click="resetGame()">New game</button> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.12.0/lodash.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Memory card game with VueJS - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900|Dosis:300,400,600,700,800|Droid+Sans:400,700|Lato:300,400,700,900|PT+Sans:400,700|Ubuntu:300,400,500,700|Open+Sans:400,300,600,700|Roboto:400,300,500,700,900|Roboto+Condensed:400,300,700|Open+Sans+Condensed:300,700|Work+Sans:400,300,700|Play:400,700|Maven+Pro:400,500,700,900&subset=latin,latin-ext);
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html { background-color: #292C33; color: White; font-size: 16px; font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif; font-weight: 400; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
#app { margin: 2em;
}
.info { text-align: center; padding-bottom: 1em; border-bottom: 1px solid #555;
}
.info > div { display: inline-block; width: 200px;
}
.info > div .label { margin-right: 5px;
}
.info > div .value { font-weight: bold;
}
.cards .card { position: relative; display: inline-block; width: 100px; height: 150px; margin: 1em 2em; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s; -webkit-transition: opacity 0.5s; transition: opacity 0.5s;
}
.cards .card .front, .cards .card .back { border-radius: 5px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background-color: White; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-transform: translateZ(0); -ms-transform: translateZ(0); -webkit-transform: translateZ(0); transform: translateZ(0); -moz-transition: -moz-transform 0.6s; -o-transition: -o-transform 0.6s; -webkit-transition: -webkit-transform 0.6s; transition: transform 0.6s; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.cards .card .back { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/102308/card_backside.jpg"); background-size: 90%; background-position: center; background-repeat: no-repeat; font-size: 12px;
}
.cards .card .front { -moz-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); background-size: 90%; background-repeat: no-repeat; background-position: center;
}
.cards .card.flipped .back, .cards .card.found .back { -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg);
}
.cards .card.flipped .front, .cards .card.found .front { -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg);
}
.cards .card.found { opacity: 0.3;
}
.splash { position: absolute; left: 0; right: 0; top: 0; bottom: 0;
}
.splash .overlay { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6);
}
.splash .content { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 400px; height: 200px; margin: auto; text-align: center; background-color: rgba(51, 51, 51, 0.9); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.8); -webkit-box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.8); box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.8); padding: 1em;
}
.splash .content .title { font-size: 1.8em; padding: 0.5em;
}
.splash .content .score { padding: 0.5em;
}
.splash .content button { margin-top: 1.0em; background-color: #444; padding: 5px 20px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; border: 1px solid #555; color: White; font-size: 1.4em;
}

Memory card game with VueJS - Script Codes JS Codes

"use strict";
var CardTypes = [{ name: "vue", image: "http://vuejs.org/images/logo.png" }, { name: "express", image: "https://coligo.io/images/express.svg" }, { name: "mongo", image: "https://upload.wikimedia.org/wikipedia/en/thumb/4/45/MongoDB-Logo.svg/527px-MongoDB-Logo.svg.png" }, { name: "nodejs", image: "https://worldvectorlogo.com/logos/nodejs-icon.svg" }, { name: "webpack", image: "https://camo.githubusercontent.com/66747a6e05a799aec9c6e04a3e721ca567748e8b/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f313336353838312f313931383337332f32653035373166612d376462632d313165332d383436352d3839356632393164343366652e706e67" }, { name: "babel", image: "https://babeljs.io/images/logo.svg" }];
//{ name: "jade", image: "http://jade-lang.com/style/jade-logo-header.svg" },
var shuffleCards = function shuffleCards() {	var cards = [].concat(_.cloneDeep(CardTypes), _.cloneDeep(CardTypes));	return _.shuffle(cards);
};
new Vue({	el: "#app",	data: {	showSplash: false,	cards: [],	started: false,	startTime: 0,	turns: 0,	flipBackTimer: null,	timer: null,	time: "--:--",	score: 0	},	methods: {	resetGame: function resetGame() {	this.showSplash = false;	var cards = shuffleCards();	this.turns = 0;	this.score = 0;	this.started = false;	this.startTime = 0;	_.each(cards, function (card) {	card.flipped = false;	card.found = false;	});	this.cards = cards;	},	flippedCards: function flippedCards() {	return _.filter(this.cards, function (card) {	return card.flipped;	});	},	sameFlippedCard: function sameFlippedCard() {	var flippedCards = this.flippedCards();	if (flippedCards.length == 2) {	if (flippedCards[0].name == flippedCards[1].name) return true;	}	},	setCardFounds: function setCardFounds() {	_.each(this.cards, function (card) {	if (card.flipped) card.found = true;	});	},	checkAllFound: function checkAllFound() {	var foundCards = _.filter(this.cards, function (card) {	return card.found;	});	if (foundCards.length == this.cards.length) return true;	},	startGame: function startGame() {	var _this = this;	this.started = true;	this.startTime = moment();	this.timer = setInterval(function () {	_this.time = moment(moment().diff(_this.startTime)).format("mm:ss");	}, 1000);	},	finishGame: function finishGame() {	this.started = false;	clearInterval(this.timer);	var score = 1000 - (moment().diff(this.startTime, 'seconds') - CardTypes.length * 5) * 3 - (this.turns - CardTypes.length) * 5;	this.score = Math.max(score, 0);	this.showSplash = true;	},	flipCard: function flipCard(card) {	var _this2 = this;	if (card.found || card.flipped) return;	if (!this.started) {	this.startGame();	}	var flipCount = this.flippedCards().length;	if (flipCount == 0) {	card.flipped = !card.flipped;	} else if (flipCount == 1) {	card.flipped = !card.flipped;	this.turns += 1;	if (this.sameFlippedCard()) {	// Match!	this.flipBackTimer = setTimeout(function () {	_this2.clearFlipBackTimer();	_this2.setCardFounds();	_this2.clearFlips();	if (_this2.checkAllFound()) {	_this2.finishGame();	}	}, 200);	} else {	// Wrong match	this.flipBackTimer = setTimeout(function () {	_this2.clearFlipBackTimer();	_this2.clearFlips();	}, 1000);	}	}	},	clearFlips: function clearFlips() {	_.map(this.cards, function (card) {	return card.flipped = false;	});	},	clearFlipBackTimer: function clearFlipBackTimer() {	clearTimeout(this.flipBackTimer);	this.flipBackTimer = null;	}	},	created: function created() {	this.resetGame();	}
});
Memory card game with VueJS - Script Codes
Memory card game with VueJS - Script Codes
Home Page Home
Developer Icebob
Username icebob
Uploaded June 12, 2022
Rating 3.5
Size 7,266 Kb
Views 115,368
Do you need developer help for Memory card game with VueJS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Icebob (icebob) Script Codes
Name
Login page with blur background
User administration page
OSX dock menu
Notification popups
A Pen by Icebob
Style Guide Template
Full responsive keypad
SVG clock UI
Dashboard info panels with animation
Home portal app
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!