Skip to content

made real memory game #3

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
rroger wants to merge 1 commit into
base: master
Choose a base branch
from
Open

made real memory game #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 1 addition & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,9 @@

<div id="header">
<h1>Memory Game</h1>
<p>Try to pick the same three elements.<br/>
<p>Try to find the same elements.<br/>
To shuffle and start a new game, just press generate!</p>
<p>Number of card symbols: <input id="board_size" type="text" value="3"/>
Time to learn symbol positions: <input id="fadeout_duration" type="text" value="5"/> secs
<input id="generate" type="button" value="Generate!"/></p>
<p><div id="search-value-box">&nbsp;</div></p>
</div>


Expand Down
53 changes: 23 additions & 30 deletions js/memory_game.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,11 @@
//var game_values_template = ['a','a','a','b','b','b','c','c','c']

function init_game() {
var board_size = get_board_size();
var fadeout_duration = get_fadeout_duration();
var board_size = 4;
generate_board(board_size);
adapt_style(board_size);
clear_value_to_search();
hide_all_cards(fadeout_duration*1000);
hide_all_cards(0);
}

function generate_board(board_size) {
Expand Down Expand Up @@ -74,9 +73,9 @@ function adapt_style(board_size) {
function generate_game_values(board_size) {
// board_size should be an integer >= 2 and <= 26.
var game_values = [];
for (var i = 0; i < board_size; i++) {
for (var i = 0; i < board_size*2; i++) {
var sym = String.fromCharCode("a".charCodeAt(0) + i);
for (var j = 0; j < board_size; j++) {
for (var j = 0; j < 2; j++) {
game_values.push(sym);
}
}
Expand Down Expand Up @@ -123,15 +122,19 @@ function game_step(event) {
}

function get_game_status(event) {
var card_type_to_be_opened = $('#board').data('card_value');

if ($('.open-card.' + card_type_to_be_opened).length != $('.open-card').length) {
// this means there is a card open, that has an other card value than
// the searched card value, ergo it's game over.
return 'game_over';
}

if ($('.open-card').length === Number($('#board_size').val()) ) {
var open_unsolved_cards = $('.open-card:not(.solved)');
if (open_unsolved_cards.length > 1) {
var id1 = $('#'+ open_unsolved_cards[0].id);
var id2 = $('#'+ open_unsolved_cards[1].id);

if (id1.text() == id2.text()) {
// the cards match, continue
open_unsolved_cards.toggleClass('solved');
} else {
open_unsolved_cards.toggleClass('open-card').fadeTo(1000, 0);
}
}
if ($('.solved').length === 16) {
return 'won';
}
return 'undecided';
Expand All @@ -140,14 +143,6 @@ function get_game_status(event) {
function game_won(){
$('.card').off('click');
$('#board_tbl').append('<div id="end-message"><h2><span>You have won!</span></h2></div>');
$(".card:not(.open-card)").css('background-color','#D1E0E0').css('opacity','0.10');
}

function game_over(){
$('.card').off('click');
$('#board_tbl').prepend('<div id="end-message"><h2><span>Game Over!</span></h2></div>');
$('.open-card:not(.' + $('#board').data('card_value') +')').css('background-color','salmon');
$(".card:not(.open-card)").css('background-color','#D1E0E0').css('opacity','0.10');
}


Expand All @@ -161,12 +156,11 @@ function get_target_card(event) {

function turn_card(target_card){
target_card.toggleClass('open-card').css('opacity', '100');
$(target_card).off('click');
}

function get_random_card_value(board_size) {
var rand = Math.random();
var board_size = Number($('#board_size').val());
//var board_size = Number($('#board_size').val());
for (var i = 0; i < board_size; i++) {
if (rand < ((i+1)/board_size)){
return String.fromCharCode("a".charCodeAt(0) + i);
Expand All @@ -186,22 +180,21 @@ function hide_all_cards(fadeout_duration) {
// Use Timeout instead of function callback in fadeTo, because
// the code below should only be called once and not for every card.
setTimeout(function () {
var searched_card_value = get_random_card_value();
var searched_card_value = get_random_card_value(4);
$('#board').data('card_value', searched_card_value);
$('#search-value-box').text('Please open cards with ' + searched_card_value + '.');
}, fadeout_duration);

}


function get_board_size() {
var board_size = Number($('#board_size').val());

if ( ! ( ( board_size >= 2 ) && ( board_size <= 26 ) ) ) {
alert("Please type a game size >= 2 and <= 26. Otherwise default value 3 is used.");
return 3;
}
}

return board_size;
}

Expand All @@ -211,6 +204,6 @@ function get_fadeout_duration() {
alert("Please type a fadeout duration >= 0.4 secs. Otherwise default value 5 sec is used.");
return 5;
}

return fadeout_duration;
}