mise en place jeu memory mais pas fini
This commit is contained in:
DonRenando
parent
91089b72f7
commit
279ffdcae1
|
|
@ -0,0 +1,576 @@
|
|||
/* =============================================================================
|
||||
RESET, BOX SIZING, & CLEARFIX
|
||||
============================================================================= */
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
BASE
|
||||
============================================================================= */
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
LAYOUT
|
||||
============================================================================= */
|
||||
/* wrapper */
|
||||
.wrapper {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
min-width: 480px;
|
||||
}
|
||||
|
||||
/* container */
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
max-width: 1024px;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
MEMORY GAME (mg)
|
||||
============================================================================= */
|
||||
/**
|
||||
* Game container
|
||||
*
|
||||
* This is the overall container for the game. Different things get addead and
|
||||
* removed from this container depending on the game state.
|
||||
*/
|
||||
.mg {
|
||||
/* blank */
|
||||
}
|
||||
|
||||
/**
|
||||
* Game meta
|
||||
*
|
||||
* The game meta is the section that displays the level and moves. It's appended
|
||||
* to the game container at the start, and shows the level the user selected
|
||||
* and the number of moves the user has played.
|
||||
*/
|
||||
.mg__meta {
|
||||
margin-bottom: 10px;
|
||||
color: #28aadc;
|
||||
}
|
||||
|
||||
.mg__meta--item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mg__meta--left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.mg__meta--right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.mg__meta--level {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Game start screen
|
||||
*
|
||||
* The game start screen shows the "welcome" message and also a list for the
|
||||
* user to choose a level. It's appended to the game container at the start,
|
||||
* and once the user selects a level, it is removed from the container
|
||||
*/
|
||||
.mg__start-screen {
|
||||
text-align: center;
|
||||
padding: 80px 20px;
|
||||
}
|
||||
|
||||
.mg__start-screen--heading {
|
||||
margin-bottom: 10px;
|
||||
color: #282a2f;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.mg__start-screen--sub-heading {
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
color: #28aadc;
|
||||
}
|
||||
.mg__start-screen--sub-heading::before, .mg__start-screen--sub-heading::after {
|
||||
margin: 0 5px;
|
||||
content: "-";
|
||||
}
|
||||
|
||||
.mg__start-screen--text {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.mg__start-screen--level-select {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.mg__start-screen--level-select span {
|
||||
color: #ff3c50;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mg__start-screen--level-select span:hover {
|
||||
color: #d50016;
|
||||
}
|
||||
|
||||
/**
|
||||
* Game wrapper
|
||||
*
|
||||
* The game wrapper is where the actual game resides. Inside here, all the
|
||||
* memory tiles get arranged and ready for game play.
|
||||
*/
|
||||
.mg__wrapper {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mg__contents {
|
||||
position: relative;
|
||||
padding-bottom: 50%;
|
||||
margin-left: -5px;
|
||||
margin-right: -5px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Game tiles
|
||||
*
|
||||
* The game tiles are the tiles that are laid down on the memory game board.
|
||||
* These tiles are the ones that the user clicks on to flip and reveal some
|
||||
* images. The level the user selects determines the position and size of
|
||||
* the tiles.
|
||||
*/
|
||||
.mg__tile {
|
||||
position: absolute;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* game__level-1 styles */
|
||||
.mg__level-1 .mg__tile {
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.mg__level-1 .mg__tile-1 {
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
}
|
||||
.mg__level-1 .mg__tile-2 {
|
||||
top: 0%;
|
||||
left: 25%;
|
||||
}
|
||||
.mg__level-1 .mg__tile-3 {
|
||||
top: 0%;
|
||||
left: 50%;
|
||||
}
|
||||
.mg__level-1 .mg__tile-4 {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
}
|
||||
.mg__level-1 .mg__tile-5 {
|
||||
top: 50%;
|
||||
left: 0%;
|
||||
}
|
||||
.mg__level-1 .mg__tile-6 {
|
||||
top: 50%;
|
||||
left: 25%;
|
||||
}
|
||||
.mg__level-1 .mg__tile-7 {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
.mg__level-1 .mg__tile-8 {
|
||||
top: 50%;
|
||||
left: 75%;
|
||||
}
|
||||
|
||||
/* game__level-2 styles */
|
||||
.mg__level-2 .mg__tile {
|
||||
width: 16.66667%;
|
||||
height: 33.33333%;
|
||||
}
|
||||
|
||||
.mg__level-2 .mg__tile-1 {
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-2 {
|
||||
top: 0%;
|
||||
left: 16.66667%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-3 {
|
||||
top: 0%;
|
||||
left: 33.33333%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-4 {
|
||||
top: 0%;
|
||||
left: 50%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-5 {
|
||||
top: 0%;
|
||||
left: 66.66667%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-6 {
|
||||
top: 0%;
|
||||
left: 83.33333%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-7 {
|
||||
top: 33.33333%;
|
||||
left: 0%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-8 {
|
||||
top: 33.33333%;
|
||||
left: 16.66667%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-9 {
|
||||
top: 33.33333%;
|
||||
left: 33.33333%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-10 {
|
||||
top: 33.33333%;
|
||||
left: 50%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-11 {
|
||||
top: 33.33333%;
|
||||
left: 66.66667%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-12 {
|
||||
top: 33.33333%;
|
||||
left: 83.33333%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-13 {
|
||||
top: 66.66667%;
|
||||
left: 0%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-14 {
|
||||
top: 66.66667%;
|
||||
left: 16.66667%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-15 {
|
||||
top: 66.66667%;
|
||||
left: 33.33333%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-16 {
|
||||
top: 66.66667%;
|
||||
left: 50%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-17 {
|
||||
top: 66.66667%;
|
||||
left: 66.66667%;
|
||||
}
|
||||
.mg__level-2 .mg__tile-18 {
|
||||
top: 66.66667%;
|
||||
left: 83.33333%;
|
||||
}
|
||||
|
||||
/* game__level-3 styles */
|
||||
.mg__level-3 .mg__tile {
|
||||
width: 12.5%;
|
||||
height: 25%;
|
||||
}
|
||||
|
||||
.mg__level-3 .mg__tile-1 {
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-2 {
|
||||
top: 0%;
|
||||
left: 12.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-3 {
|
||||
top: 0%;
|
||||
left: 25%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-4 {
|
||||
top: 0%;
|
||||
left: 37.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-5 {
|
||||
top: 0%;
|
||||
left: 50%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-6 {
|
||||
top: 0%;
|
||||
left: 62.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-7 {
|
||||
top: 0%;
|
||||
left: 75%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-8 {
|
||||
top: 0%;
|
||||
left: 87.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-9 {
|
||||
top: 25%;
|
||||
left: 0%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-10 {
|
||||
top: 25%;
|
||||
left: 12.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-11 {
|
||||
top: 25%;
|
||||
left: 25%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-12 {
|
||||
top: 25%;
|
||||
left: 37.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-13 {
|
||||
top: 25%;
|
||||
left: 50%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-14 {
|
||||
top: 25%;
|
||||
left: 62.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-15 {
|
||||
top: 25%;
|
||||
left: 75%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-16 {
|
||||
top: 25%;
|
||||
left: 87.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-17 {
|
||||
top: 50%;
|
||||
left: 0%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-18 {
|
||||
top: 50%;
|
||||
left: 12.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-19 {
|
||||
top: 50%;
|
||||
left: 25%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-20 {
|
||||
top: 50%;
|
||||
left: 37.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-21 {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-22 {
|
||||
top: 50%;
|
||||
left: 62.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-23 {
|
||||
top: 50%;
|
||||
left: 75%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-24 {
|
||||
top: 50%;
|
||||
left: 87.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-25 {
|
||||
top: 75%;
|
||||
left: 0%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-26 {
|
||||
top: 75%;
|
||||
left: 12.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-27 {
|
||||
top: 75%;
|
||||
left: 25%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-28 {
|
||||
top: 75%;
|
||||
left: 37.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-29 {
|
||||
top: 75%;
|
||||
left: 50%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-30 {
|
||||
top: 75%;
|
||||
left: 62.5%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-31 {
|
||||
top: 75%;
|
||||
left: 75%;
|
||||
}
|
||||
.mg__level-3 .mg__tile-32 {
|
||||
top: 75%;
|
||||
left: 87.5%;
|
||||
}
|
||||
|
||||
/**
|
||||
* The tile inside
|
||||
*
|
||||
* The "tile inner" is the part of the tile that serves as the card. Inside
|
||||
* this part, there's an outside and inside part. The outside of the card
|
||||
* is the part that has the logo or the pattern or whatever...basically the
|
||||
* part that doesn't show the content to be matched. The inside part has the
|
||||
* actual images / info to be matched.
|
||||
*/
|
||||
.mg__tile--inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mg__tile--outside,
|
||||
.mg__tile--inside {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-webkit-transition: -webkit-transform 0.3s, background 0.3s;
|
||||
transition: transform 0.3s, background 0.3s;
|
||||
}
|
||||
|
||||
.mg__tile--outside {
|
||||
background: url("../img/default/logo-bw.png") 50% 50% no-repeat;
|
||||
background-color: #dcdee1;
|
||||
box-shadow: 0 0 0 1px #787a80;
|
||||
}
|
||||
|
||||
.mg__tile--inside {
|
||||
background-color: #f8fafc;
|
||||
box-shadow: 0 0 0 1px #787a80;
|
||||
-webkit-transform: rotateY(-180deg);
|
||||
transform: rotateY(-180deg);
|
||||
}
|
||||
|
||||
/* some transforms for flipped cards */
|
||||
.mg__tile--inner.flipped .mg__tile--outside {
|
||||
-webkit-transform: rotateY(-180deg);
|
||||
transform: rotateY(-180deg);
|
||||
}
|
||||
|
||||
.mg__tile--inner.flipped .mg__tile--inside {
|
||||
-webkit-transform: rotateY(0);
|
||||
transform: rotateY(0);
|
||||
}
|
||||
|
||||
/* some transitions for correct guesses - only needs to happen on card inside */
|
||||
.mg__tile--inner.flipped.correct .mg__tile--inside {
|
||||
background-color: #ffffdc;
|
||||
}
|
||||
|
||||
/**
|
||||
* Game message
|
||||
*
|
||||
* The game message area is an area to display game messages. It's used in the
|
||||
* default set up where no callback is set in the JS. If a callback is set up,
|
||||
* then this message area likely won't display. Unless you decide to display it
|
||||
* in your own custom callback though!
|
||||
*/
|
||||
.mg__onend {
|
||||
padding: 80px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mg__onend--heading {
|
||||
margin-bottom: 10px;
|
||||
color: #28aadc;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.mg__onend--message {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Game buttons
|
||||
*
|
||||
* A simple helper class for game buttons. Edit at your will.
|
||||
*/
|
||||
.mg__button {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
color: #fff;
|
||||
font-family: "Roboto Slab", serif;
|
||||
font-size: 14px;
|
||||
appearance: none;
|
||||
background: #ff3c50;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
SOME SOCIAL STYLES
|
||||
============================================================================= */
|
||||
.fb-like,
|
||||
.twitter-share-button {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.fb-like {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
FUSION ADS
|
||||
============================================================================= */
|
||||
/**
|
||||
* Fusion ads styles
|
||||
*
|
||||
* These are all the styles for my fusion ads. I'd reccommend deleting them if
|
||||
* you are going to use this in your own app, because they are useless and you
|
||||
* shouldn't be displaying my ad on your app/site in the first place. Thanks!
|
||||
*/
|
||||
#fusionads {
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
background: white;
|
||||
font-size: 11px;
|
||||
line-height: 1.2;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#fusionads .fusion-wrap {
|
||||
display: block;
|
||||
margin: 0 0 5px 0;
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
#fusionads a.fusion-text {
|
||||
display: block;
|
||||
color: #787a80;
|
||||
}
|
||||
|
||||
#fusionads a.fusion-img {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
width: 130px;
|
||||
height: 100px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
#fusionads a.fusion-img img {
|
||||
display: block;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
#fusionads a.fusion-poweredby {
|
||||
color: #28aadc;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
"document"in self&&("classList"in document.createElement("_")?!function(){"use strict";var a=document.createElement("_");if(a.classList.add("c1","c2"),!a.classList.contains("c2")){var b=function(a){var b=DOMTokenList.prototype[a];DOMTokenList.prototype[a]=function(a){var c,d=arguments.length;for(c=0;d>c;c++)a=arguments[c],b.call(this,a)}};b("add"),b("remove")}if(a.classList.toggle("c3",!1),a.classList.contains("c3")){var c=DOMTokenList.prototype.toggle;DOMTokenList.prototype.toggle=function(a,b){return 1 in arguments&&!this.contains(a)==!b?b:c.call(this,a)}}a=null}():!function(a){"use strict";if("Element"in a){var b="classList",c="prototype",d=a.Element[c],e=Object,f=String[c].trim||function(){return this.replace(/^\s+|\s+$/g,"")},g=Array[c].indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(b in this&&this[b]===a)return b;return-1},h=function(a,b){this.name=a,this.code=DOMException[a],this.message=b},i=function(a,b){if(""===b)throw new h("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(b))throw new h("INVALID_CHARACTER_ERR","String contains an invalid character");return g.call(a,b)},j=function(a){for(var b=f.call(a.getAttribute("class")||""),c=b?b.split(/\s+/):[],d=0,e=c.length;e>d;d++)this.push(c[d]);this._updateClassName=function(){a.setAttribute("class",this.toString())}},k=j[c]=[],l=function(){return new j(this)};if(h[c]=Error[c],k.item=function(a){return this[a]||null},k.contains=function(a){return a+="",-1!==i(this,a)},k.add=function(){var a,b=arguments,c=0,d=b.length,e=!1;do a=b[c]+"",-1===i(this,a)&&(this.push(a),e=!0);while(++c<d);e&&this._updateClassName()},k.remove=function(){var a,b,c=arguments,d=0,e=c.length,f=!1;do for(a=c[d]+"",b=i(this,a);-1!==b;)this.splice(b,1),f=!0,b=i(this,a);while(++d<e);f&&this._updateClassName()},k.toggle=function(a,b){a+="";var c=this.contains(a),d=c?b!==!0&&"remove":b!==!1&&"add";return d&&this[d](a),b===!0||b===!1?b:!c},k.toString=function(){return this.join(" ")},e.defineProperty){var m={get:l,enumerable:!0,configurable:!0};try{e.defineProperty(d,b,m)}catch(n){-2146823252===n.number&&(m.enumerable=!1,e.defineProperty(d,b,m))}}else e[c].__defineGetter__&&d.__defineGetter__(b,l)}}(self));
|
||||
|
|
@ -0,0 +1,532 @@
|
|||
/**
|
||||
* Memory Game
|
||||
*
|
||||
* This is the wrapper function for my memory game! It contains all of the core
|
||||
* functionality for the game to run.
|
||||
*
|
||||
* Licensed under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*
|
||||
* Copyright 2014, Call Me Nick
|
||||
* http://callmenick.com
|
||||
*/
|
||||
|
||||
;(function( window ) {
|
||||
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Extend object function
|
||||
*
|
||||
*/
|
||||
|
||||
function extend( a, b ) {
|
||||
for( var key in b ) {
|
||||
if( b.hasOwnProperty( key ) ) {
|
||||
a[key] = b[key];
|
||||
}
|
||||
}
|
||||
return a;
|
||||
}
|
||||
|
||||
/**
|
||||
* Shuffle array function
|
||||
*
|
||||
*/
|
||||
|
||||
function shuffle(o) {
|
||||
for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
|
||||
return o;
|
||||
};
|
||||
|
||||
/**
|
||||
* Memory constructor
|
||||
*
|
||||
*/
|
||||
|
||||
function Memory( options ) {
|
||||
this.options = extend( {}, this.options );
|
||||
extend( this.options, options );
|
||||
this._init();
|
||||
}
|
||||
|
||||
/**
|
||||
* Memory options
|
||||
*
|
||||
* Memory default options. Available options are:
|
||||
*
|
||||
* wrapperID: the element in which Memory gets built
|
||||
* cards: the array of cards
|
||||
* onGameStart: callback for when game starts
|
||||
* onGameEnd: callback for when game ends
|
||||
*/
|
||||
|
||||
Memory.prototype.options = {
|
||||
wrapperID : "container",
|
||||
cards : [
|
||||
{
|
||||
id : 1,
|
||||
img: "/pictures/default/monsters-01.png"
|
||||
},
|
||||
{
|
||||
id : 2,
|
||||
img: "/pictures/default/monsters-02.png"
|
||||
},
|
||||
{
|
||||
id : 3,
|
||||
img: "/pictures/default/monsters-03.png"
|
||||
},
|
||||
{
|
||||
id : 4,
|
||||
img: "/pictures/default/monsters-04.png"
|
||||
},
|
||||
{
|
||||
id : 5,
|
||||
img: "/pictures/default/monsters-05.png"
|
||||
},
|
||||
{
|
||||
id : 6,
|
||||
img: "/pictures/default/monsters-06.png"
|
||||
},
|
||||
{
|
||||
id : 7,
|
||||
img: "/pictures/default/monsters-07.png"
|
||||
},
|
||||
{
|
||||
id : 8,
|
||||
img: "/pictures/default/monsters-08.png"
|
||||
},
|
||||
{
|
||||
id : 9,
|
||||
img: "/pictures/default/monsters-09.png"
|
||||
},
|
||||
{
|
||||
id : 10,
|
||||
img: "/pictures/default/monsters-10.png"
|
||||
},
|
||||
{
|
||||
id : 11,
|
||||
img: "/pictures/default/monsters-11.png"
|
||||
},
|
||||
{
|
||||
id : 12,
|
||||
img: "/pictures/default/monsters-12.png"
|
||||
},
|
||||
{
|
||||
id : 13,
|
||||
img: "/pictures/default/monsters-13.png"
|
||||
},
|
||||
{
|
||||
id : 14,
|
||||
img: "/pictures/default/monsters-14.png"
|
||||
},
|
||||
{
|
||||
id : 15,
|
||||
img: "/pictures/default/monsters-15.png"
|
||||
},
|
||||
{
|
||||
id : 16,
|
||||
img: "/pictures/default/monsters-16.png"
|
||||
}
|
||||
],
|
||||
onGameStart : function() { return false; },
|
||||
onGameEnd : function() { return false; }
|
||||
}
|
||||
|
||||
/**
|
||||
* Memory _init - initialise Memory
|
||||
*
|
||||
* Creates all the game content areas, adds the id's and classes, and gets
|
||||
* ready for game setup.
|
||||
*/
|
||||
|
||||
Memory.prototype._init = function() {
|
||||
this.game = document.createElement("div");
|
||||
this.game.id = "mg";
|
||||
this.game.className = "mg";
|
||||
document.getElementById(this.options.wrapperID).appendChild(this.game);
|
||||
|
||||
this.gameMeta = document.createElement("div");
|
||||
this.gameMeta.className = "mg__meta clearfix";
|
||||
|
||||
this.gameStartScreen = document.createElement("div");
|
||||
this.gameStartScreen.id = "mg__start-screen";
|
||||
this.gameStartScreen.className = "mg__start-screen";
|
||||
|
||||
this.gameWrapper = document.createElement("div");
|
||||
this.gameWrapper.id = "mg__wrapper";
|
||||
this.gameWrapper.className = "mg__wrapper";
|
||||
this.gameContents = document.createElement("div");
|
||||
this.gameContents.id = "mg__contents";
|
||||
this.gameWrapper.appendChild(this.gameContents);
|
||||
|
||||
this.gameMessages = document.createElement("div");
|
||||
this.gameMessages.id = "mg__onend";
|
||||
this.gameMessages.className = "mg__onend";
|
||||
|
||||
this._setupGame();
|
||||
};
|
||||
|
||||
/**
|
||||
* Memory _setupGame - Sets up the game
|
||||
*
|
||||
* We're caching all game related variables, and by default, displaying the
|
||||
* meta info bar and start screen HTML.
|
||||
*
|
||||
* A NOTE ABOUT GAME STATES:
|
||||
*
|
||||
* There are 4 game states in total, governed by the variable this.gameState.
|
||||
* Each game state allows for a certain series of functions to be performed.
|
||||
* The gameStates are as follows:
|
||||
*
|
||||
* 1 : default, allows user to choose level
|
||||
* 2 : set when user chooses level, and game is in play
|
||||
* 3 : game is finished
|
||||
*/
|
||||
|
||||
Memory.prototype._setupGame = function() {
|
||||
var self = this;
|
||||
this.gameState = 1;
|
||||
this.cards = shuffle(this.options.cards);
|
||||
this.card1 = "";
|
||||
this.card2 = "";
|
||||
this.card1id = "";
|
||||
this.card2id = "";
|
||||
this.card1flipped = false;
|
||||
this.card2flipped = false;
|
||||
this.flippedTiles = 0;
|
||||
this.chosenLevel = "";
|
||||
this.numMoves = 0;
|
||||
|
||||
this.gameMetaHTML = '<div class="mg__meta--left">\
|
||||
<span class="mg__meta--level">Niveau: \
|
||||
<span id="mg__meta--level">' + this.chosenLevel + '</span>\
|
||||
</span>\
|
||||
<span class="mg__meta--moves">Coups: \
|
||||
<span id="mg__meta--moves">' + this.numMoves + '</span>\
|
||||
</span>\
|
||||
</div>\
|
||||
<div class="mg__meta--right">\
|
||||
<button id="mg__button--restart" class="mg__button">Start Over</button>\
|
||||
</div>';
|
||||
this.gameMeta.innerHTML = this.gameMetaHTML;
|
||||
this.game.appendChild(this.gameMeta);
|
||||
|
||||
this.gameStartScreenHTML = '<h2 class="mg__start-screen--heading">Welcome to the Memory Game!</h2>\
|
||||
<p class="mg__start-screen--text">blablabla</p>\
|
||||
<h3 class="mg__start-screen--sub-heading">Choisir niveau</h3>\
|
||||
<ul class="mg__start-screen--level-select">\
|
||||
<li><span data-level="1"> facile (4 )</span></li>\
|
||||
<li><span data-level="2"> moyen (6 )</span></li>\
|
||||
<li><span data-level="3"> dur (8 )</span></li>\
|
||||
</ul>';
|
||||
this.gameStartScreen.innerHTML = this.gameStartScreenHTML;
|
||||
this.game.appendChild(this.gameStartScreen);
|
||||
|
||||
document.getElementById("mg__button--restart").addEventListener( "click", function(e) {
|
||||
self.resetGame();
|
||||
});
|
||||
|
||||
this._startScreenEvents();
|
||||
}
|
||||
|
||||
/**
|
||||
* Memory _startScreenEvents
|
||||
*
|
||||
* We're now listening for events on the start screen. That is, we're waiting
|
||||
* for when a user chooses a level.
|
||||
*/
|
||||
|
||||
Memory.prototype._startScreenEvents = function() {
|
||||
var levelsNodes = this.gameStartScreen.querySelectorAll("ul.mg__start-screen--level-select span");
|
||||
for ( var i = 0, len = levelsNodes.length; i < len; i++ ) {
|
||||
var levelNode = levelsNodes[i];
|
||||
this._startScreenEventsHandler(levelNode);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Memoery _startScreenEventsHandler
|
||||
*
|
||||
* A helper function to handle the click of the level inside the events
|
||||
* function.
|
||||
*/
|
||||
|
||||
Memory.prototype._startScreenEventsHandler = function(levelNode) {
|
||||
var self = this;
|
||||
levelNode.addEventListener( "click", function(e) {
|
||||
if (self.gameState === 1) {
|
||||
self._setupGameWrapper(this);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Memory _setupGameWrapper
|
||||
*
|
||||
* This function sets up the game wrapper, which is where the actual memory
|
||||
* tiles will reside and where all the game play happens.
|
||||
*/
|
||||
|
||||
Memory.prototype._setupGameWrapper = function(levelNode) {
|
||||
this.level = levelNode.getAttribute("data-level");
|
||||
this.gameStartScreen.parentNode.removeChild(this.gameStartScreen);
|
||||
this.gameContents.className = "mg__contents mg__level-"+this.level;
|
||||
this.game.appendChild(this.gameWrapper);
|
||||
|
||||
this.chosenLevel = this.level;
|
||||
document.getElementById("mg__meta--level").innerHTML = this.chosenLevel;
|
||||
|
||||
this._renderTiles();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Memory _renderTiles
|
||||
*
|
||||
* This renders the actual tiles with content. A few thing happen here:
|
||||
*
|
||||
* 1. Calculate grid X and Y based on user level selection
|
||||
* 2. Calculate num tiles
|
||||
* 3. Create new cards array based on level, and draw cards from original array
|
||||
* 4. Shuffle the new cards array
|
||||
* 5. Cards get distributed into tiles
|
||||
* 6. gamePlay function gets triggered, taking care of all the game play action.
|
||||
*/
|
||||
|
||||
Memory.prototype._renderTiles = function() {
|
||||
if(this.level == 1) {this.gridX = 2; this.gridY= 2; }
|
||||
else if(this.level == 2) {this.gridX = 3; this.gridY= 2; }
|
||||
else { this.gridX = 4; this.gridY=2 ; }
|
||||
// this.gridY = this.gridX ;
|
||||
this.numTiles = this.gridX * this.gridY;
|
||||
//this.halfNumTiles = this.gridX;
|
||||
this.halfNumTiles = this.numTiles/2;
|
||||
this.newCards = [];
|
||||
for ( var i = 0; i < this.halfNumTiles; i++ ) {
|
||||
this.newCards.push(this.cards[i], this.cards[i]);
|
||||
}
|
||||
this.newCards = shuffle(this.newCards);
|
||||
this.tilesHTML = '<tr>';
|
||||
for ( var i = 0; i < this.numTiles; i++ ) {
|
||||
var n = i + 1;
|
||||
this.tilesHTML += '<div class="mg__tile mg__tile-' + n + '">\
|
||||
<div class="mg__tile--inner" data-id="' + this.newCards[i]["id"] + '">\
|
||||
<span class="mg__tile--outside"></span>\
|
||||
<span class="mg__tile--inside"><img src="' + this.newCards[i]["img"] + '"></span>';
|
||||
this.tilesHTML +='</div>';
|
||||
this.tilesHTML +='</div>';
|
||||
/* if(this.level == 1 && n == 2){
|
||||
this.tilesHTML +="</tr></pre><tr>";
|
||||
}*/
|
||||
|
||||
}
|
||||
this.tilesHTML +="</tr>";
|
||||
this.gameContents.innerHTML = this.tilesHTML;
|
||||
this.gameState = 2;
|
||||
this.options.onGameStart();
|
||||
this._gamePlay();
|
||||
}
|
||||
|
||||
/**
|
||||
* Memory _gamePlay
|
||||
*
|
||||
* Now that all the HTML is set up, the game is ready to be played. In this
|
||||
* function, we loop through all the tiles (goverend by the .mg__tile--inner)
|
||||
* class, and for each tile, we run the _gamePlayEvents function.
|
||||
*/
|
||||
|
||||
Memory.prototype._gamePlay = function() {
|
||||
var tiles = document.querySelectorAll(".mg__tile--inner");
|
||||
for (var i = 0, len = tiles.length; i < len; i++) {
|
||||
var tile = tiles[i];
|
||||
this._gamePlayEvents(tile);
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Memory _gamePlayEvents
|
||||
*
|
||||
* This function takes care of the "events", which is basically the clicking
|
||||
* of tiles. Tiles need to be checked if flipped or not, flipped if possible,
|
||||
* and if zero, one, or two cards are flipped. When two cards are flipped, we
|
||||
* have to check for matches and mismatches. The _gameCardsMatch and
|
||||
* _gameCardsMismatch functions perform two separate sets of functions, and are
|
||||
* thus separated below.
|
||||
*/
|
||||
|
||||
Memory.prototype._gamePlayEvents = function(tile) {
|
||||
var self = this;
|
||||
tile.addEventListener( "click", function(e) {
|
||||
if (!this.classList.contains("flipped")) {
|
||||
if (self.card1flipped === false && self.card2flipped === false) {
|
||||
this.classList.add("flipped");
|
||||
self.card1 = this;
|
||||
self.card1id = this.getAttribute("data-id");
|
||||
self.card1flipped = true;
|
||||
} else if( self.card1flipped === true && self.card2flipped === false ) {
|
||||
this.classList.add("flipped");
|
||||
self.card2 = this;
|
||||
self.card2id = this.getAttribute("data-id");
|
||||
self.card2flipped = true;
|
||||
if ( self.card1id == self.card2id ) {
|
||||
self._gameCardsMatch();
|
||||
} else {
|
||||
self._gameCardsMismatch();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Memory _gameCardsMatch
|
||||
*
|
||||
* This function runs if the cards match. The "correct" class is added briefly
|
||||
* which fades in a background green colour. The times set on the two timeout
|
||||
* functions are chosen based on transition values in the CSS. The "flip" has
|
||||
* a 0.3s transition, so the "correct" class is added 0.3s later, shown for
|
||||
* 1.2s, then removed. The cards remain flipped due to the activated "flip"
|
||||
* class from the gamePlayEvents function.
|
||||
*/
|
||||
|
||||
Memory.prototype._gameCardsMatch = function() {
|
||||
// cache this
|
||||
var self = this;
|
||||
|
||||
// add correct class
|
||||
window.setTimeout( function(){
|
||||
self.card1.classList.add("correct");
|
||||
self.card2.classList.add("correct");
|
||||
}, 300 );
|
||||
|
||||
// remove correct class and reset vars
|
||||
window.setTimeout( function(){
|
||||
self.card1.classList.remove("correct");
|
||||
self.card2.classList.remove("correct");
|
||||
self._gameResetVars();
|
||||
self.flippedTiles = self.flippedTiles + 2;
|
||||
if (self.flippedTiles == self.numTiles) {
|
||||
self._winGame();
|
||||
}
|
||||
}, 1500 );
|
||||
|
||||
// plus one on the move counter
|
||||
this._gameCounterPlusOne();
|
||||
};
|
||||
|
||||
/**
|
||||
* Memory _gameCardsMismatch
|
||||
*
|
||||
* This function runs if the cards mismatch. If the cards mismatch, we leave
|
||||
* them flipped for a little while so the user can see and remember what cards
|
||||
* they actually are. Then after that slight delay, we removed the flipped
|
||||
* class so they flip back over, and reset the vars.
|
||||
*/
|
||||
|
||||
Memory.prototype._gameCardsMismatch = function() {
|
||||
// cache this
|
||||
var self = this;
|
||||
|
||||
// remove "flipped" class and reset vars
|
||||
window.setTimeout( function(){
|
||||
self.card1.classList.remove("flipped");
|
||||
self.card2.classList.remove("flipped");
|
||||
self._gameResetVars();
|
||||
}, 900 );
|
||||
|
||||
// plus one on the move counter
|
||||
this._gameCounterPlusOne();
|
||||
};
|
||||
|
||||
/**
|
||||
* Memory _gameResetVars
|
||||
*
|
||||
* For each turn, some variables are updated for reference. After the turn is
|
||||
* over, we need to reset these variables and get ready for the next turn.
|
||||
* This function handles all of that.
|
||||
*/
|
||||
|
||||
Memory.prototype._gameResetVars = function() {
|
||||
this.card1 = "";
|
||||
this.card2 = "";
|
||||
this.card1id = "";
|
||||
this.card2id = "";
|
||||
this.card1flipped = false;
|
||||
this.card2flipped = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Memory _gameCounterPlusOne
|
||||
*
|
||||
* Each turn, the user completes 1 "move". The obective of memory is to
|
||||
* complete the game in as few moves as possible. Users need to know how many
|
||||
* moves they've had so far, so this function updates that number and updates
|
||||
* the HTML also.
|
||||
*/
|
||||
|
||||
Memory.prototype._gameCounterPlusOne = function() {
|
||||
this.numMoves = this.numMoves + 1;
|
||||
this.moveCounterUpdate = document.getElementById("mg__meta--moves").innerHTML = this.numMoves;
|
||||
};
|
||||
|
||||
/**
|
||||
* Memory _clearGame
|
||||
*
|
||||
* This function clears the game wrapper, by removing it from the game div. It
|
||||
* allows us to rerun setupGame, and clears the air for other info like
|
||||
* victory messages etc.
|
||||
*/
|
||||
|
||||
Memory.prototype._clearGame = function() {
|
||||
if (this.gameMeta.parentNode !== null) this.game.removeChild(this.gameMeta);
|
||||
if (this.gameStartScreen.parentNode !== null) this.game.removeChild(this.gameStartScreen);
|
||||
if (this.gameWrapper.parentNode !== null) this.game.removeChild(this.gameWrapper);
|
||||
if (this.gameMessages.parentNode !== null) this.game.removeChild(this.gameMessages);
|
||||
}
|
||||
|
||||
/**
|
||||
* Memoray _winGame
|
||||
*
|
||||
* You won the game! This function runs the "onGameEnd" callback, which by
|
||||
* default clears the game div entirely and shows a "play again" button.
|
||||
*/
|
||||
|
||||
Memory.prototype._winGame = function() {
|
||||
var self = this;
|
||||
if (this.options.onGameEnd() === false) {
|
||||
this._clearGame();
|
||||
this.gameMessages.innerHTML = '<h2 class="mg__onend--heading">Bravo !</h2>\
|
||||
<p class="mg__onend--message">Vous avez gagné votre partie en ' + this.numMoves + ' coups.</p>\
|
||||
<button id="mg__onend--restart" class="mg__button">rejouer ?</button>';
|
||||
this.game.appendChild(this.gameMessages);
|
||||
document.getElementById("mg__onend--restart").addEventListener( "click", function(e) {
|
||||
self.resetGame();
|
||||
});
|
||||
} else {
|
||||
// run callback
|
||||
this.options.onGameEnd();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Memory resetGame
|
||||
*
|
||||
* This function resets the game. It can run at the end of the game when the
|
||||
* user is presented the option to play again, or at any time like a reset
|
||||
* button. It is a public function, and can be used in whatever custom calls
|
||||
* in your markup.
|
||||
*/
|
||||
|
||||
Memory.prototype.resetGame = function() {
|
||||
this._clearGame();
|
||||
this._setupGame();
|
||||
};
|
||||
|
||||
/**
|
||||
* Add Memory to global namespace
|
||||
*/
|
||||
|
||||
window.Memory = Memory;
|
||||
|
||||
})( window );
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 654 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
|
|
@ -11,6 +11,10 @@
|
|||
<link href="/css/game.css" rel="stylesheet" type="text/css"/>
|
||||
<link href="/css/image-picker.css" rel="stylesheet" type="text/css"/>
|
||||
|
||||
<!-- css jeu memory -->
|
||||
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto+Slab">
|
||||
<link rel="stylesheet" href="/css/memory.css">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link href='//fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
|
||||
|
||||
|
|
@ -29,6 +33,90 @@
|
|||
@endif
|
||||
|
||||
@yield('content')
|
||||
<!-- script jeu memory -->
|
||||
<!-- js -->
|
||||
<script src="/js/classList.min.js"></script>
|
||||
<script src="/js/memory.js"></script>
|
||||
|
||||
|
||||
|
||||
<!-- start memory! -->
|
||||
<script>
|
||||
(function(){
|
||||
var myMem = new Memory({
|
||||
wrapperID : "my-memory-game",
|
||||
cards : [
|
||||
{
|
||||
id : 1,
|
||||
img: "/pictures/default/monsters-01.png"
|
||||
},
|
||||
{
|
||||
id : 2,
|
||||
img: "/pictures/default/monsters-02.png"
|
||||
},
|
||||
{
|
||||
id : 3,
|
||||
img: "/pictures/default/monsters-03.png"
|
||||
},
|
||||
{
|
||||
id : 4,
|
||||
img: "/pictures/default/monsters-04.png"
|
||||
},
|
||||
{
|
||||
id : 5,
|
||||
img: "/pictures/default/monsters-05.png"
|
||||
},
|
||||
{
|
||||
id : 6,
|
||||
img: "/pictures/default/monsters-06.png"
|
||||
},
|
||||
{
|
||||
id : 7,
|
||||
img: "/pictures/default/monsters-07.png"
|
||||
},
|
||||
{
|
||||
id : 8,
|
||||
img: "/pictures/default/monsters-08.png"
|
||||
},
|
||||
{
|
||||
id : 9,
|
||||
img: "/pictures/default/monsters-09.png"
|
||||
},
|
||||
{
|
||||
id : 10,
|
||||
img: "/pictures/default/monsters-10.png"
|
||||
},
|
||||
{
|
||||
id : 11,
|
||||
img: "/pictures/default/monsters-11.png"
|
||||
},
|
||||
{
|
||||
id : 12,
|
||||
img: "/pictures/default/monsters-12.png"
|
||||
},
|
||||
{
|
||||
id : 13,
|
||||
img: "/pictures/default/monsters-13.png"
|
||||
},
|
||||
{
|
||||
id : 14,
|
||||
img: "/pictures/default/monsters-14.png"
|
||||
},
|
||||
{
|
||||
id : 15,
|
||||
img: "/pictures/default/monsters-15.png"
|
||||
},
|
||||
{
|
||||
id : 16,
|
||||
img: "/pictures/default/monsters-16.png"
|
||||
}
|
||||
],
|
||||
onGameStart : function() { return false; },
|
||||
onGameEnd : function() { return false; }
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
||||
|
|
@ -39,7 +127,7 @@
|
|||
|
||||
<!-- Scripts Image Picker -->
|
||||
<script type="text/javascript" src="/js/image-picker.min.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var config = {
|
||||
'.chosen-select' : {},
|
||||
|
|
|
|||
|
|
@ -6,16 +6,14 @@
|
|||
<br><br>
|
||||
|
||||
|
||||
<center><img src="http://i.ytimg.com/vi/xiIO1zUXNVI/maxresdefault.jpg" width="60%"></center>
|
||||
<!-- <center><img src="http://i.ytimg.com/vi/xiIO1zUXNVI/maxresdefault.jpg" width="60%"></center> -->
|
||||
|
||||
<!--
|
||||
<select data-placeholder="Choose a Country..." class="chosen-select" multiple style="width:350px;" tabindex="4">
|
||||
<option value=""></option>
|
||||
<option value="United States">United States</option>
|
||||
<option value="United Kingdom">United Kingdom</option>
|
||||
<option value="Afghanistan">Afghanistan</option>
|
||||
<option value="Aland Islands">Aland Islands</option>
|
||||
<option value="Albania">Albania</option>
|
||||
<option value="Zambia">Zambia</option>
|
||||
<option value="Zimbabwe">Zimbabwe</option>
|
||||
</select> -->
|
||||
<div class="wrapper">
|
||||
|
||||
<div class="content">
|
||||
<div class="container">
|
||||
|
||||
<div id="my-memory-game"></div>
|
||||
|
||||
</div>
|
||||
</div><!-- /.content -->
|
||||
|
|
|
|||
Reference in New Issue