Skip to content

works for pc #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dr-jerry wants to merge 7 commits into
base: master
Choose a base branch
from
Open

works for pc #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
969e304
works for pc
Apr 14, 2018
37fbaab
style sheet shit
Apr 14, 2018
ff21579
comic sans does not exist for safari
Apr 15, 2018
3fc7ccb
logging for finding click event
Apr 15, 2018
fcff8ad
fixed ms backquotes incompatability, input selection error.
Apr 18, 2018
c4723cd
dropdown with text, improved split
May 14, 2018
e8f479d
Update README.md
dr-jerry May 15, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@ Just click the box to filp the card, if two filped card are the same in look, it

You should take as fewer as possiable steps to filp all cards, And than you will get a rank about the level of your menory.

Adapted for my child who is eager to play memory and touch a computer/tablet/phone, to use characters/words as icons.
Click on the gear to modify the characters used as card icons.

# How to play

Click [this link](https://poblue.github.io/memory-game/)
70 changes: 43 additions & 27 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@ body {
overflow: hidden;
font-family: 'Coda', cursive;
}
.total-panel {
width=100%
}


h1 {
font-family: 'Open Sans', sans-serif;
Expand All @@ -31,7 +35,7 @@ h1 {
}

.deck {
width: 690px;
width: 60%;
margin: 0 auto;
background: -webkit-linear-gradient(290deg, #02CCBA 0%, #AA7ECD 100%);
background: linear-gradient(160deg, #02CCBA 0%, #AA7ECD 100%);
Expand All @@ -40,11 +44,11 @@ h1 {
box-shadow: 12px 15px 20px 0px rgba(46, 61, 73, 0.5);
}
.deck .card {
height: 150px;
width: 150px;
height: 100px;
width: 21%;
background: #2e3d49;
display: inline-block;
margin: 0 30px 30px 0;
margin: 2%;
line-height: 280px;
font-size: 0;
color: #ffffff;
Expand All @@ -61,9 +65,14 @@ h1 {
transition: transform .3s ease;
transition: transform .3s ease, -webkit-transform .3s ease;
font-family: FontAwesome;
line-height: 150px;
line-height: 98px;
}

.fa.char {
font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
}


@media only screen and (max-width: 800px){
.deck .card{
width: 75px;
Expand All @@ -89,39 +98,36 @@ h1 {
}
}

.deck .card:nth-child(4n) {
margin: 0 0 15px 0;
}
.deck .card:nth-child(n+13) {
margin: 0 30px 0 0;
}
.deck .card:nth-child(n+13):nth-child(4n) {
margin: 0;
}
.deck .card.open {
-webkit-transform: rotateY(0);
transform: rotateY(0);
background: #02b3e4;
cursor: default;
}
.deck .card.show {
font-size: 33px;
font-size: 45px;
}
.deck .card.match {
-webkit-transform: rotateY(0);
transform: rotateY(0);
cursor: default;
background: #02ccba;
font-size: 33px;
font-size: 45px;
}
.deck .card.notmatch {
background: #f95c3c;
}

#score-panel {
width: 60%;
text-align: left;
width: 345px;
margin-bottom: 10px;
font-size: 23px;
}
input {
font-size: 23px;
height:30px;
width: 16em;
}
#score-panel .stars {
margin: 0;
Expand All @@ -133,18 +139,11 @@ h1 {
list-style: none;
display: inline-block;
}
#score-panel .restart {
#score-panel .restart, .reconfigure {
float: right;
cursor: pointer;
}

*::-moz-selection {
background: transparent;
}

*::selection {
background: transparent;
}
margin-left: 1em;
}

.swal2-overlay {
background-color: white;
Expand All @@ -153,3 +152,20 @@ h1 {
.font-color {
color: white;
}
.timers {float: right;}
.timers .timer {display: inline-block;}
.timers .timer h3 {margin: 0px;}
.timers .restart {display: inline-block;}
.timers .reconfigure {display: inline-block;}
.containerdiv {max-width: 690px; width: 100%; margin: 0 auto;}
.leftdiv {float: left;}
.clear {clear: both;}
.font-color {
color: white;
}
.closed {
display: none;
}
.inline {
display: inline-block;
}
33 changes: 28 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,21 +15,44 @@
<body>
<h1>Matching Game</h1>
<div id="score-panel">
<div class="leftdiv">
<ul class="stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<span class="moves">0</span> Moves
| Time: <span class="timer">0</span> s
<div class="restart">
<i class="fa fa-repeat"></i>
</div>
</div>
<div class="timers">
<div class="timer inline">
<h3 class="info">Time: <span class="clock data">0:00</span></h3>
</div>
<div class="restart">
<i class="fa fa-repeat"></i>
</div>
<div class="inline">
<span class="fa fa-cog reconfigure"> </span>
<div class="input closed">
<label>text:
<input list="chars" id="values"/></label>
<datalist id="chars">
<option value="b a d e u s n v">
<option value="w r u i p f g m">
<option value="z t f b o p k l">
<option value="bad af sop hok bus tas vis hek">
<option value="gek nul pas bes das bas zus kom">
<option value="hof sok bus wil val ver fel zak">
</datalist>
<span class="set-reconfigure fa fa-check"></span>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<ul class="deck"></ul>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/sweetalert2/3.0.3/sweetalert2.min.js'></script>
<script src="js/index.js"></script>
</body>

</html>
</html>
89 changes: 56 additions & 33 deletions js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,26 @@
let symbols = ['bicycle', 'bicycle', 'leaf', 'leaf', 'cube', 'cube', 'anchor', 'anchor', 'paper-plane-o', 'paper-plane-o', 'bolt', 'bolt', 'bomb', 'bomb', 'diamond', 'diamond'],
opened = [],
match = 0,
moves = 0,
$deck = $('.deck'),
$scorePanel = $('#score-panel'),
$moveNum = $('.moves'),
$ratingStars = $('.fa-star'),
$restart = $('.restart'),
delay = 400,
currentTimer,
second = 0,
$timer = $('.timer'),
totalCard = symbols.length / 2,
rank3stars = 10,
rank2stars = 16,
rank1stars = 20;
let fa_icons= [ '-bicycle', '-leaf', '-cube', '-anchor', '-paper-plane-o', '-bolt', '-bomb', '-diamond', 'diamond'],
chars = [ 'a', 'b', 'd', 'e', 's', 'o', 'm', 'n'],
symbols = chars,
opened = [],
match = 0,
moves = 0,
$deck = $('.deck'),
$scorePanel = $('#score-panel'),
$moveNum = $('.moves'),
$ratingStars = $('.fa-star'),
$restart = $('.restart'),
$reconfigure = $('.reconfigure'),
delay = 400,
currentTimer,
second = 0,
$timer = $('.timer'),
totalCard = symbols.length,
rank3stars = 10,
rank2stars = 16,
rank1stars = 20;

function shuffle(array) {
array = array.concat(array);
var currentIndex = array.length, temporaryValue, randomIndex;

while (0 !== currentIndex) {
Expand All @@ -32,21 +36,25 @@ function shuffle(array) {

// Initial Game
function initGame() {
var cards = shuffle(symbols);
$deck.empty();
match = 0;
moves = 0;
$moveNum.text('0');
$ratingStars.removeClass('fa-star-o').addClass('fa-star');
for (var i = 0; i < cards.length; i++) {
$deck.append($('<li class="card"><i class="fa fa-' + cards[i] + '"></i></li>'))
var cards = shuffle(symbols);
$deck.empty();
match = 0;
moves = 0;
$moveNum.text('0');
$ratingStars.removeClass('fa-star-o').addClass('fa-star');
for (var i = 0; i < cards.length; i++) {
if (cards[i].startsWith("-")) {
$deck.append($('<li class="card"><i class="fa fa' + cards[i] + '"></i></li>'))
} else {
$deck.append($('<li class="card"><i class="fa char">' + cards[i] + '</i></li>'))
}
addCardListener();
}
addCardListener();

resetTimer(currentTimer);
second = 0;
$timer.text(`${second}`)
initTime();
resetTimer(currentTimer);
second = 0;
$timer.text(second)
initTime();
};

// Set Rating and final Score
Expand Down Expand Up @@ -84,6 +92,7 @@ function endGame(moves, score) {

// Restart Game
$restart.bind('click', function () {
console.log("restart clicked");
swal({
allowEscapeKey: false,
allowOutsideClick: false,
Expand All @@ -100,11 +109,25 @@ $restart.bind('click', function () {
}
})
});
$reconfigure.bind('click', ()=> {
console.log("cog clicked");
$('.input.closed').css('display','inline-block');
$('#values').val($.unique(symbols).join(" "))
});
$('.set-reconfigure').on('click', function(e) {
symbols = $('#values').val().split(/\s+/)
console.log('check clicked')
$('.input.closed').css('display','none');
initGame();
return false;
});


var addCardListener = function () {

// Card flip
$deck.find('.card').bind('click', function () {
$deck.find('.card').bind('click', function () {
console.log("card clicked")
var $this = $(this)

if ($this.hasClass('show') || $this.hasClass('match')) { return true; }
Expand Down Expand Up @@ -150,7 +173,7 @@ var addCardListener = function () {

function initTime() {
currentTimer = setInterval(function () {
$timer.text(`${second}`)
$timer.text(`Time ${second}`)
second = second + 1
}, 1000);
}
Expand All @@ -161,4 +184,4 @@ function resetTimer(timer) {
}
}

initGame();
initGame();