Memory Game

July 21, 2013 Ning 0 Comments

Game link: http://www.maning.ca/ats/memory-game/

Download Demo: http://www.maning.ca/ats/memory-game/memory-game-Demo.zip

“Memory game is a card game in which all of the cards are laid face down on a surface and two cards are flipped face up over each turn. The object of the game is to turn over pairs of matching cards.”
I used half day to program this game. have fun

1. Design: photoshp

2. HTML/CSS
HTML




Memory Game - Ning







0

CSS

html,body,div,ul,li {
	margin:0;
}
.maincontainer {
	background-image:url("../images/bg.png");
	background-repeat:repeat-x;
	bottom:0;
	height:auto !important;
	left:0;
	overflow:hidden;
	position:absolute;
	right:0;
	top:0;
	width:100%;
	min-height:696px;
	z-index:-1;
}
.gamecontainer {
	background-image:url("../images/box-bg.png");
	height:637px;
	margin:29px auto 0;
	width:966px;
	overflow: hidden;
}
.gamepanel {
	height:394px;
	left:82px;
	position:relative;
	top:145px;
	width:594px;
	overflow:hidden;
}
.gamepanel ul li {
	 list-style:none outside none;
	 margin: 0 0 0 -30px;
}
.card {
	background-image:url("../images/card-default.png");
	float:left;
	height:99px;
	width:99px;
	cursor:pointer;
}
.top5 {
	height:139px;
	left:705px;
	position:relative;
	top:-216px;
	width:224px;
	overflow:hidden;
}
.top5 ul li {
	 list-style:none outside none;
	 margin: 0 0 0 -30px;
}
.last5 {
	height:139px;
	left:705px;
	position:relative;
	top:-146px;
	width:224px;
	overflow:hidden;
}
.last5 ul li {
	 list-style:none outside none;
	 margin: 0 0 0 -30px;
}
.ip {
	color:#FFFFFF;
	float:left;
	font-family:arial;
	font-size:12px;
	font-weight:600;
	height:31px;
	width:122px;
}
.attempts {
	float:left;
	font-family:arial;
	font-size:12px;
	height:31px;
	width:82px;
	color:#FFFFFF;
	font-weight:600;
}
.atts {
	color:#FFFFFF;
	font-size:21px;
	font-weight:500;
	height:30px;
	left:188px;
	overflow:hidden;
	position:relative;
	top:-109px;
	width:33px;
}
.won {
	background-image:url("../images/won.gif");
	height:29px;
	left:256px;
	overflow:hidden;
	position:relative;
	top:-139px;
	width:415px;
	display:none;
}
.restart {
	background-image:url("../images/restart-button.png");
	cursor:pointer;
	height:41px;
	left:714px;
	overflow:hidden;
	position:relative;
	top:-173px;
	width:105px;
	display: none;
}

3. JavaScript

$(document).ready(function () {
    generatorRandomCards();
    getBestFive();
    getLastFive();
    $('#lastopen').val("100");
    $('#noAtts').val("0");
    $('#right').val("0");
});

//Random generate the game cards and show the cards to the page

function generatorRandomCards() {
    var cardIDS = new Array();
    for (var i = 0; i < 24; i++) {
        cardIDS[i] = i;
    }
    var arrayLength = cardIDS.length
    var tempArray1 = new Array();
    for (var i = 0; i < arrayLength; i++) {
        tempArray1[i] = i
    }
    var tempArray2 = new Array();
    for (var i = 0; i < arrayLength; i++) {
        tempArray2[i] = tempArray1.splice(Math.floor(Math.random() * tempArray1.length), 1)
    }
    var cardID = new Array();
    for (var i = 0; i < arrayLength; i++) {
        cardID[i] = cardIDS[tempArray2[i]]
    }
    var cards = new Array();
    for (var i = 0; i < 24; i++) {
        cards[i] = new Array();
        if (cardID[i] > 11) {
            m = cardID[i] - 11;
        } else {
            m = cardID[i] + 1;
        }
        cards[i]['position'] = i;
        cards[i]['img'] = 'card-' + m + '.png';
        cards[i]['open'] = '0';
        cards[i]['cardID'] = cardID[i];
    }
    var gameHTML = "";
    for (var i = 0; i < 24; i++) {
        gameHTML += '
'; } $('.gamepanel').html(gameHTML); } //Game card click events function pressCard(ID) { var img = $("#card" + ID + "").attr('img'); $("#card" + ID + "").css('background-image', 'url(images/' + img + ')'); if (ID > 11) { preID = ID - 12; } else { preID = ID + 12; } var lastopen = $('#lastopen').val(); if (lastopen == "100") { $("#card" + ID + "").attr("flag", "1"); $('#lastopen').val(ID); } else { preflag = $("#card" + preID + "").attr('flag'); noAtts = parseInt($('#noAtts').val()) + 1; $('#noAtts').val(noAtts); $('.atts').html(noAtts); if (preflag == 1) { $('#lastopen').val("100"); $("#card" + lastopen + "").removeAttr("onclick"); $("#card" + ID + "").removeAttr("onclick"); rightAnswers = parseInt($('#right').val()) + 1; $('#right').val(rightAnswers); if (rightAnswers == 12) { newRecord(noAtts); $('.won').show(); $('.restart').show(); } } else { $("#card" + lastopen + "").attr("flag", "0"); $("#card" + ID + "").attr("flag", "0"); $('#lastopen').val("100"); setTimeout(function () { $("#card" + ID + "").css('background-image', 'url(images/card-default.png)'); $("#card" + lastopen + "").css('background-image', 'url(images/card-default.png)'); }, 500); } } } //initialize the data when require restart the game function restart() { generatorRandomCards(); $('#lastopen').val("100"); $('#noAtts').val("0"); $('#right').val("0"); $('.won').hide(); $('.restart').hide(); $('.atts').html("0"); } //Get the best five records and show the result to the page function getBestFive() { $.ajax({ type: "POST", dataType: "json", data: 'todo=get-best-five-record', url: 'include/ajax.php', success: function (data) { var bestfiveHTML = '
    '; for (var i = 0; i < 5; i++) { bestfiveHTML += '
  • ' + data[i].player_ip + '
    ' + data[i].player_attempts + ' attempts
  • '; } bestfiveHTML += '
'; $('.top5').html(bestfiveHTML); } }); } //Get the last five records and show the result to the page function getLastFive() { $.ajax({ type: "POST", dataType: "json", data: 'todo=get-last-five-record', url: 'include/ajax.php', success: function (data) { var lastfiveHTML = '
    '; for (var i = 0; i < 5; i++) { lastfiveHTML += '
  • ' + data[i].player_ip + '
    ' + data[i].player_attempts + ' attempts
  • '; } lastfiveHTML += '
'; $('.last5').html(lastfiveHTML); } }); } //when player win the game, insert the record to database function newRecord(attempts) { $.ajax({ type: "POST", dataType: "json", data: { 'todo': 'insert-new-record', 'attempts': attempts }, url: 'include/ajax.php', success: function (data) { getLastFive(); getLastFive(); } }); }

4. MYSQL

-- --------------------------------------------------------

--
-- Table structure for table `memory_game`
--

CREATE TABLE IF NOT EXISTS `memory_game` (
  `player_id` mediumint(7) NOT NULL AUTO_INCREMENT,
  `player_ip` varchar(15) COLLATE utf8_unicode_ci NOT NULL,
  `player_attempts` smallint(6) NOT NULL DEFAULT '0',
  `player_time` datetime NOT NULL,
  PRIMARY KEY (`player_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=51 ;

5. PHP FUNCTIONS

db_host     = 'localhost';
        $this->db_user     = 'xxx';
        $this->db_pass     = 'xxx';
        $this->db_database = 'xxx';
        $this->charset     = 'UTF8';
        $this->connect();
    }

    function connect()
    {
        $link = mysql_connect($this->db_host, $this->db_user, $this->db_pass) or die($this->error());
        mysql_select_db($this->db_database, $link) or die("database does not exist" . $this->table);
        mysql_query("SET NAMES '$this->charset'");
    }
    
    function query($sql, $type = '')
    {
        if (!($query = mysql_query($sql)))
            $this->message('Error:', $sql);
        return $query;
    }
    
    function result($query)
    {
        return mysql_query($query);
    }
    
    function result_to_array($query)
    {
        $result = $this->result($query);
        while ($row = mysql_fetch_assoc($result)) {
            $new_array[] = $row; // Inside while loop
        }
        return $new_array;
    }
    
    function fn_insert($table, $name, $value)
    {
        
        $this->query("insert into $table ($name) values ($value)");
        
    }
    
    function message($message = '', $sql = '')
    {
        if (!$sql)
            echo $message;
        else
            echo $message . '
' . $sql; } } //communicate with database and get/insert game data to the database class memoryGame extends mysql_db { function insert_new_record($attempts) { $ip = $_SERVER['REMOTE_ADDR']; mysql_db::fn_insert('memory_game', 'player_ip,player_attempts,player_time', "'$ip','$attempts',now()"); } function get_best5() { $query = "SELECT * FROM `memory_game` ORDER BY `player_attempts` ASC LIMIT 0 , 5"; return mysql_db::result_to_array($query); } function get_last5() { $query = "SELECT * FROM `memory_game` ORDER BY `player_time` DESC LIMIT 0 , 5"; return mysql_db::result_to_array($query); } } ?>

leave a comment

*