This JavaScript plugin creates memory games in an easy way and with multiple customization possibilities. / Este complemento de JavaScript crea memoramas (memorice) de una manera sencilla y con múltiples posibilidades de personalización.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
js
src
.gitignore
LICENSE
README.md
index.html

README.md

memoramaJS

Demo


English

  1. Description
  2. Version
  3. Initialization
  4. Use
  5. Basic
  6. Advanced
  7. Examples
  8. License

Description

This JavaScript plugin creates memory games in an easy way, with multiple customization possibilities.

Version

1.0.0

Initialization

Just add the plugin in the HTML document.

<script type="text/javascript" src="memorama.min.js"></script>

Use

There are 5 functions:

  • Create: creates a new memory game.
  • Destroy: destroys the memory game.
  • Refresh: refreshes the memory game.
  • Disable: disables the memory game without destroying it.
  • Enable: enables the memory game.

Basic

To create a memory game you only need to enter this line of code:

memorama.create({});

With this basic use, a memory game is created with the following characteristics:

  • A parent div is created with an id name mjs-memorama.
  • The total of cards is 10.
  • Each card has 90 px of width.
  • Each card has 120 px of height.
  • Each card has 1 em of margin.
  • Each card has 1 of opacity.
  • Each card are numbered from 1 to 5.
  • Each card has center-aligned text in axes x and y.
  • Each card has black font color.
  • Each card has 2 em of font size.
  • Each card has Verdana font family.
  • Each card has 1 of text opacity.
  • Each card has blue color in front.
  • Each card has red color in back.

For custom options, see the section on advanced use.

To destroy the memory game you only need to enter this line of code:

memorama.destroy({});

For custom options, see the section of advanced use.

To refresh the memory game you only need to enter this line of code:

memorama.refresh();

This function doesn't have custom options.

To disable the memory game you only need to enter this line of code:

memorama.disable({});

For custom options, see the section of advanced use.

To enable the memory game you only need to enter this line of code:

memorama.enable({});

For custom options, see the section of advanced use.

Advanced

To create a custom memory game you need to enter this code, where any option is specified:

memorama.create({
         option: value
    });

The create function has the following 55 options:

  • parent
    • Type: string.
    • Default: "mjs-memorama".
    • Description: assigns the container of the memory game through an id name; the default value creates a new div with an id name mjs-memorama.
  • total
    • Type: number.
    • Default: 10.
    • Description: designates the number of cards. Number must be even, so automatically adds one if odd. To obtain the pair of each card, divide the total number of cards by 2. Next, add this number to each corresponding card index. For example, if there are 10 cards total, the pairs would read as follows: 0 and 5, 1 and 6, 2 and 7, 3 and 8, and 4 and 9.
  • width
    • Type: string.
    • Default: "90px".
    • Description: determines the width of each card through a CSS property (width).
  • height
    • Type: string.
    • Default: "120px".
    • Description: determines the height of each card through a CSS property (height).
  • margin
    • Type: string.
    • Default: "1em".
    • Description: determines the margin of each card through a CSS property (margin).
  • opacity
    • Type: number or string.
    • Default: 1.
    • Description: determines the opacity of each card.
  • turns
    • Type: string.
    • Default: false.
    • Description: determines the name of the variable that will indicate the quantity of player’s turns; it is not necessary to create the variable previously.
  • matches
    • Type: string.
    • Default: false.
    • Description: determines the name of the variable that will indicate the quantity of player's matches; it is not necessary create the variable previously.
  • mismatches
    • Type: string.
    • Default: false.
    • Description: determines the name of the variable that will indicate the quantity of player's mismatches; it is not necessary create the variable previously.
  • rateMatches
    • Type: string.
    • Default: false.
    • Description: determines the name of the variable that will indicate the quantity of player's rate of matches; it is not necessary create the variable previously.
  • rateMismatches
    • Type: string.
    • Default: false.
    • Description: determines the name of the variable that will indicate the quantity of player's rate of mismatches; it is not necessary create the variable previously.
  • rateBest
    • Type: string.
    • Default: false.
    • Description: determines the name of the variable that will indicate the quantity of player's highest rate of matches; it is not necessary create the variable previously.
  • rateWorst
    • Type: string.
    • Default: false.
    • Description: determines the name of the variable that will indicate the quantity of player's highest rate of mismatches; it is not necessary create the variable previously.
  • timer
    • Type: number or string.
    • Default: false.
    • Description: determines the quantity of available time to complete the memory game.
  • timerVariable
    • Type: string.
    • Default: false.
    • Description: determines the name of the variable that will indicate the remaining game time; it is not necessary create the variable previously.
  • cardIDIndex
    • Type: string.
    • Default: false.
    • Description: determines the name of the variable that will indicate the index number of the flipped card; it is not necessary create the variable previously.
  • notListed
    • Type: bool.
    • Default: false.
    • Description: determines if the number that associates each card with its pair is shown; it's disabled if the option text is active.
  • text
    • Type: string or array.
    • Default: "" (empty).
    • Description: assigns the text that will appear on each card; if it’s string, it will appear on each of the cards; if it’s array, each element will appear on each card according to the index; warning: if the array length is less than the total set or half of the cards (depending on the textOnlyOnSecondHalf option), it will be disabled and the card won’t show anything, but if the length is greater, it will simply truncate.
  • textOnlyOnSecondHalf
    • Type: bool.
    • Default: false.
    • Description: determines if the text will only appear on the second half of the total cards (ideal if you want to make a memory game with a string-image relationship along with the option backgroundImgFrontArray).
  • textAlign
    • Type: string.
    • Default: "center".
    • Description: determines the text align through a CSS property (text-align).
  • textColor
    • Type: string.
    • Default: "black".
    • Description: determines the text color through a CSS property (color).
  • textSize
    • Type: string.
    • Default: "2em".
    • Description: determines the font size through a CSS property (font-size).
  • textFontFamily
    • Type: string.
    • Default: "Verdana, Geneva, sans-serif".
    • Description: determines the font family through a CSS property (font-family)..
  • textBackgroundColor
    • Type: string.
    • Default: "" (empty).
    • Description: determines the background color of the text through a CSS property (background-color).
  • textBorder
    • Type: string.
    • Default: "" (empty).
    • Description: determines the border of the text through a CSS property (border).
  • textBorderRadius
    • Type: string.
    • Default: "" (empty).
    • Description: determines the border radius of the text through a CSS property (border-radius).
  • textMargin
    • Type: string.
    • Default: "" (empty).
    • Description: determines the margin of the text through a CSS property (margin).
  • textPadding
    • Type: string.
    • Default: "" (empty).
    • Description: determines the padding of the text through a CSS property (padding).
  • textOpacity
    • Type: number or string.
    • Default: 1.
    • Description: determines the opacity of the text.
  • textAlignItems
    • Type: string.
    • Default: center.
    • Description: determines the vertical align of the text through a CSS property (align-items).
  • backgroundColor
    • Type: string.
    • Default: "" (empty).
    • Description: determines the background color of the cards through a CSS property (background-color).
  • backgroundColorFront
    • Type: string.
    • Default: "red".
    • Description: determines the background color of the front of the cards through a CSS property (background-color); its disabled if the option backgroundColor is active.
  • backgroundColorBack
    • Type: string.
    • Default: "blue".
    • Description: determines the background color of the back of the cards through a CSS property (background-color); its disabled if the option backgroundColor is active.
  • backgroundImgFront
    • Type: "texto".
    • Default: "" (empty).
    • Description: indicates a background image on the front of the cards when the source is set in the string (for example, "src/front.svg" will search the image front.svg in the folder src).
  • backgroundImgFrontArray
    • Type: string.
    • Default: "" (empty).
    • Description: indicates an image on the front of each card that doesn't conflict with the front of the card’s background image; by convention the string must have the following structure "file path, file name, file extension", if this convention isn't followed, an image will not be displayed; if the file path doesn't end with /, it will automatically be added; each image must have an index number before extension's name, this index doesn't have to be in the file name of the string (for example, in a memory game of 4 cards "src,front,SVG" will search the following images: "src/front0.svg", "src/front1.svg", "src/front2.svg" and "src/front3.svg"); the file extension will automatically be searched in lower case; all the spaces before and after the commas or the quotation marks will be ignored (for example, "src , front , SVG" is equal to "src,front,SVG").
  • backgroundImgFrontArrayOnlyHalf
    • Type: bool.
    • Default: false.
    • Description: determines if the images for the front of each card are only displayed in the first half of the total of cards (ideal if you want to make a memory game with an image-string relationship along with the option textOnlyOnSecondHalf).
  • backgroundImgBack
    • Type: string.
    • Default: "" (empty).
    • Description: indicates a background image on the back of the cards when the source is set in the string (for example, "src/back.svg" will search the image back.svg in the folder src).
  • border
    • Type: string.
    • Default: "" (empty).
    • Description: determines the border for the front and back of each card through a CSS property (border).
  • borderFront
    • Type: string.
    • Default: "" (empty).
    • Description: determines the border for the front of each card through a CSS property (border); it's disabled if the option border is active.
  • borderBack
    • Type: string.
    • Default: "" (empty).
    • Description: determines the border for the back of each card through a CSS property (border); it's disabled if the option border is active.
  • borderRadius
    • Type: string.
    • Default: "" (empty).
    • Description: determines the border radius of each card through a CSS property (border-radius).
  • animationForCreation
    • Type: string.
    • Default: false.
    • Description: determines an animation for all cards when they are created; warning: Animate.css is mandatory, and the class is set in the string.
  • functionWhenTimer
    • Type: string.
    • Default: "" (empty).
    • Description: indicates a function that will be executed when each second passes; it's only enabled if the option timer is active.
  • functionWhenTimerEnds
    • Type: string.
    • Default: "" (empty).
    • Description: indicates a function that will be executed when the available time for the memory game is run out; it's only enabled if the option timer is active.
  • functionWhenTurnCompleted
    • Type: string.
    • Default: "" (empty).
    • Description: indicates a function that will be executed when a turn is completed; it runs regardless of what is indicated in the options functionWhenTurnCompletedMatch and functionWhenTurnCompletedMismatch.
  • functionWhenTurnCompletedMatch
    • Type: string.
    • Default: "" (empty).
    • Description: indicates a function that will be executed when a turn is completed with a match.
  • functionWhenTurnCompletedMismatch
    • Type: string.
    • Default: "" (empty).
    • Description: indicates a function that will be executed when a turn is completed with a mismatch.
  • functionWhenRateMatch
    • Type: string.
    • Default: "" (empty).
    • Description: indicates a function that will be executed when there is a match rate.
  • functionWhenRateMismatch
    • Type: string.
    • Default: "" (empty).
    • Description: indicates a function that will be executed when there is a mismatch rate.
  • functionWhenNewRateBest
    • Type: string.
    • Default: "" (empty).
    • Description: indicates a function that will be executed when there is a new highest match rate.
  • functionWhenNewRateWorst
    • Type: string.
    • Default: "" (empty).
    • Description: indicates a function that will be executed when there is a new highest mismatch rate.
  • functionWhenCardFlip
    • Type: string.
    • Default: "" (empty).
    • Description: indicates a function that will be executed when a card is flipped.
  • functionWhenCreated
    • Type: string.
    • Default: "" (empty).
    • Description: indicates a function that will be executed when the memory game is created.
  • functionWhenIntroduced
    • Type: string.
    • Default: "" (empty).
    • Description: indicates a function that will be executed when the animation of the option animationForCreation ends; it's only enabled if the option animationForCreation is active.
  • functionWhenCompleted
    • Type: string.
    • Default: "" (empty).
    • Description: indicates a function that will be executed when the memory game is completed.

This is an example for the creation of a custom memory game:

memorama.create({
        parent : "container",
        total: 8,
        width: "9em",
        height : "12em",
        margin : ".5em",
        opacity : ".75",
        textAlign : "right",
        textColor : "white",
        textSize : ".75em",
        textFontFamily : "'Lucida Console', Monaco, monospace",
        textBackgroundColor : "purple",
        textBorder : "2px solid gray",
        textBorderRadius : "1em",
        textMargin : "1em",
        textPadding : "10px",
        textOpacity : .5,
        textAlignItems : "flex-end",
        backgroundColorFront : "lightgray",
        backgroundColorBack : "gray",
        borderFront : "1px double black",
        borderBack : "5px solid darkgray",
        borderRadius : "1em"
    });

To destroy the memory game in a custom way you need to enter this code, where any option is specified:

memorama.destroy({
         option: value
    });

The destroy function has the following 2 options:

  • animationForDestruction
    • Type: string.
    • Default: false.
    • Description: determines an animation for all cards when they are destroyed; warning: Animate.css is mandatory, and the class is set in the string.
  • functionWhenDestroyed
    • Type: string.
    • Default: "" (empty).
    • Description: indicates a function that will be executed when the memory game is destroyed.

This is an example for a custom destroy of a memory game:

memorama.destroy({
        animationForDestruction : "zoomOut"
    });

To disable the memory game in a custom way you need to enter this code, where any option is specified:

memorama.disable({
         option: value
    });

The disable function has the following 4 options:

  • backgroundColorLightBox
    • Type: string.
    • Default: "black".
    • Description: determines the color of the light box through a CSS property (background-color).
  • opacityLightBox
    • Type: number or string.
    • Default: .5.
    • Description: determines the opacity of the light box.
  • fadeLightBox
    • Type: string.
    • Default: false.
    • Description: determines the transition time of the light box through a CSS property (transition); it's only necessary to specify the time (for example, "500ms" is equal to "-webkit-transition: opacity 500ms; transition: opacity 500ms;").
  • functionWhenDisabled
    • Type: string.
    • Default: "" (empty).
    • Description: indicates a function that will be executed when the memory game is disabled.

This is an example for a custom disable of a memory game:

memorama.disable({
        backgroundColorLightBox: "green",
        opacityLightBox: .9,
        fadeLightBox: "500ms"
    });

To enable the memory game in a custom way you need to enter this code, where any option is specified:

memorama.enable({
         option: value
    });

The enable function has the following 2 options:

  • fadeLightBox
    • Type: string.
    • Default: false.
    • Description: determines the transition time of the light box through a CSS property (transition); it's only necessary to specify the time (for example, "500ms" is equal to "-webkit-transition: opacity 500ms; transition: opacity 500ms;").
  • functionWhenEnabled
    • Type: string.
    • Default: "" (empty).
    • Description: indicates a function that that will be executed when the memory game is enabled.

This is an example for a custom enable of a memory game:

memorama.enable({
        fadeLightBox: ".5s"
    });

Examples

This repository has the following examples:

  • 01 basic-create-destroy-refresh. Shows the basic characteristics of the functions for create, destroy and refresh.
  • 02 basic-enable-disable. Shows the basic characteristics of the functions for enable and disable.
  • 03 advanced-enable-disable. Shows the advanced characteristics of the functions for enable and disable.
  • 04 advanced-create-destroy-refresh. Shows the advanced characteristics of the functions for create, destroy and refresh.
  • 05 advanced-create-destroy-refresh-enable-disable. Shows the advanced characteristics of the functions for create, destroy, refresh, enable and disable.
  • 06 nice example. Shows the advanced characteristics of all functions through a memory game to learn the hiragana characters.

License

This extension is licensed under the MPL.




Español

  1. Descripción
  2. Versión
  3. Inicialización
  4. Uso
  5. Básico
  6. Avanzado
  7. Ejemplos
  8. Licencia

Descripción

Este complemento de JavaScript crea memoramas (memorice) de una manera sencilla y con múltiples posibilidades de personalización.

Versión

1.0.0

Inicialización

Solo agrega el complemento en el documento HTML.

<script type="text/javascript" src="memorama.min.js"></script>

Uso

Existen 5 funciones:

  • Crear: crea un nuevo memorama.
  • Destruir: destruye el memorama.
  • Refrescar: refresca el memorama.
  • Deshabilitar: deshabilita el memorama sin destruirlo.
  • Habilitar: habilita el memorama.

Básico

Para crear un memorama solo es necesario introducir esta línea de código:

memorama.create({});

Con este uso básico se crea un memorama con las siguientes características:

  • Un div padre es creado con un id de mjs-memorama.
  • Tiene un total de 10 cartas.
  • Cada carta tiene 90 px de anchura.
  • Cada carta tiene 120 px de altura.
  • Cada carta tiene 1 em de margen.
  • Cada carta tiene 1 de opacidad.
  • Cada carta está numerada del 1 al 5.
  • Cada carta tiene texto alineado al centro en los ejes x y y.
  • Cada carta tiene color negro de fuente.
  • Cada carta tiene 2 em de tamaño de fuente.
  • Cada carta tiene familia de fuente Verdana.
  • Cada carta tiene 1 de opacidad en el texto.
  • Cada carta tiene color azul en en reverso.
  • Cada carta tiene color rojo en el anverso.

Para opciones de personalización, véase la sección de uso avanzado.

Para destruir el memorama solo es necesario introducir esta línea de código:

memorama.destroy({});

Para opciones de personalización, véase la sección de uso avanzado.

Para refrescar el memorama solo es necesario introducir esta línea de código:

memorama.refresh();

Esta función no cuenta con opciones de personalización.

Para deshabilitar el memorama solo es necesario introducir esta línea de código:

memorama.disable({});

Para opciones de personalización, véase la sección de uso avanzado.

Para habilitar el memorama solo es necesario introducir esta línea de código:

memorama.enable({});

Para opciones de personalización, véase la sección de uso avanzado.

Avanzado

Para crear un memorama personalizado es necesario introducir este código, en donde se especifica alguna opción:

memorama.create({
        opción: valor
    });

La función de crear tiene las siguientes 55 opciones:

  • parent
    • Tipo: texto.
    • Por defecto: "mjs-memorama".
    • Descripción: asigna el contenedor para el memorama mediante su nombre de id; el valor por defecto crea un nuevo div con el id de mjs-memorama.
  • total
    • Tipo: número.
    • Por defecto: 10.
    • Descripción: designa el número de cartas; si es un número impar, se agrega automáticamente uno; atención: para obtener el par de cada carta se divide el total de cartas entre dos, de la primera mitad a cada índice de la carta se le suma la cantidad que corresponde a la mitad del total (por ejemplo, de un total de 10 cartas los pares son los siguientes: 0 y 5, 1 y 6, 2 y 7, 3 y 8, 4 y 9).
  • width
    • Tipo: texto.
    • Por defecto: "90px".
    • Descripción: determina la anchura de cada carta mediante una propiedad de CSS (width).
  • height
    • Tipo: texto.
    • Por defecto: "120px".
    • Descripción: determina la altura de cada carta mediante una propiedad de CSS (height).
  • margin
    • Tipo: texto.
    • Por defecto: "1em".
    • Descripción: determina el margen de cada carta mediante una propiedad de CSS (margin).
  • opacity
    • Tipo: número o texto.
    • Por defecto: 1.
    • Descripción: determina la opacidad de cada carta.
  • turns
    • Tipo: texto.
    • Por defecto: false.
    • Descripción: determina el nombre de la variable que estará indicando la cantidad de turnos que lleva el jugador; no es necesario crear la variable previamente.
  • matches
    • Tipo: texto.
    • Por defecto: false.
    • Descripción: determina el nombre de la variable que estará indicando la cantidad de aciertos que lleva el jugador; no es necesario crear la variable previamente.
  • mismatches
    • Tipo: texto.
    • Por defecto: false.
    • Descripción: determina el nombre de la variable que estará indicando la cantidad de desaciertos que lleva el jugador; no es necesario crear la variable previamente.
  • rateMatches
    • Tipo: texto.
    • Por defecto: false.
    • Descripción: determina el nombre de la variable que estará indicando la racha de aciertos que lleva el jugador; no es necesario crear la variable previamente.
  • rateMismatches
    • Tipo: texto.
    • Por defecto: false.
    • Descripción: determina el nombre de la variable que estará indicando la racha de desaciertos que lleva el jugador; no es necesario crear la variable previamente.
  • rateBest
    • Tipo: texto.
    • Por defecto: false.
    • Descripción: determina el nombre de la variable que estará indicando la racha más alta de aciertos que lleva el jugador; no es necesario crear la variable previamente.
  • rateWorst
    • Tipo: texto.
    • Por defecto: false.
    • Descripción: determina el nombre de la variable que estará indicando la racha más alta de desaciertos que lleva el jugador; no es necesario crear la variable previamente.
  • timer
    • Tipo: número o texto.
    • Por defecto: false.
    • Descripción: determina la cantidad de tiempo disponible para completar el memorama.
  • timerVariable
    • Tipo: texto.
    • Por defecto: false.
    • Descripción: determina el nombre de la variable que estará indicando el tiempo restante del juego; no es necesario crear la variable previamente.
  • cardIDIndex
    • Tipo: texto.
    • Por defecto: false.
    • Descripción: determina el nombre de la variable que estará indicando el número de índice de la carta que se voltea; no es necesario crear la variable previamente.
  • notListed
    • Tipo: booleano.
    • Por defecto: false.
    • Descripción: determina si se muestra el número que asocia cada carta con su par; si la opción text está activa, se deshabilita.
  • text
    • Tipo: texto o conjunto.
    • Por defecto: "" (vacío).
    • Descripción: asigna el texto que se mostrará en cada carta; si es texto, aparecerá en cada una de las cartas; si es conjunto, se muestra cada elemento a cada carta de acuerdo a su índice; advertencia: si la extensión del conjunto es menor al total de cartas o a la mitad (dependiendo de la opción textOnlyOnSecondHalf), se deshabilita y la carta no mostrará nada, pero si la extensión es mayor, simplemente se trunca.
  • textOnlyOnSecondHalf
    • Tipo: booleano.
    • Por defecto: false.
    • Descripción: determina si el texto solo aparece en la segunda mitad del total de cartas (ideal si se quiere hacer un memorama en donde se relacione el texto a una imagen junto con la opción backgroundImgFrontArray).
  • textAlign
    • Tipo: texto.
    • Por defecto: "center".
    • Descripción: determina la alineación horizontal del texto mediante una propiedad de CSS (text-align).
  • textColor
    • Tipo: texto.
    • Por defecto: "black".
    • Descripción: determina el color del texto mediante una propiedad de CSS (color).
  • textSize
    • Tipo: texto.
    • Por defecto: "2em".
    • Descripción: determina el tamaño de fuente mediante una propiedad de CSS (font-size).
  • textFontFamily
    • Tipo: texto.
    • Por defecto: "Verdana, Geneva, sans-serif".
    • Descripción: determina la familia de la fuente mediante una propiedad de CSS (font-family)..
  • textBackgroundColor
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: determina el color de fondo del texto mediante una propiedad de CSS (background-color).
  • textBorder
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: determina el borde del texto mediante una propiedad de CSS (border).
  • textBorderRadius
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: determina el radio del borde del texto mediante una propiedad de CSS (border-radius).
  • textMargin
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: determina el margen del texto mediante una propiedad de CSS (margin).
  • textPadding
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: determina el relleno del texto mediante una propiedad de CSS (padding).
  • textOpacity
    • Tipo: número o texto.
    • Por defecto: 1.
    • Descripción: determina la opacidad del texto.
  • textAlignItems
    • Tipo: texto.
    • Por defecto: center.
    • Descripción: determina la alineación vertical del texto mediante una propiedad de CSS (align-items).
  • backgroundColor
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: determina el color de fondo de las cartas mediante una propiedad de CSS (background-color).
  • backgroundColorFront
    • Tipo: texto.
    • Por defecto: "red".
    • Descripción: determina el color de fondo del anverso de las cartas mediante una propiedad de CSS (background-color); si la opción backgroundColor está activa, se deshabilita.
  • backgroundColorBack
    • Tipo: texto.
    • Por defecto: "blue".
    • Descripción: determina el color de fondo en el reverso de las cartas mediante una propiedad de CSS (background-color); si la opción backgroundColor está activa, se deshabilita.
  • backgroundImgFront
    • Tipo: "texto".
    • Por defecto: "" (vacío).
    • Descripción: indica una imagen de fondo en el anverso de las cartas al poner en el texto la ruta de la imagen (por ejemplo, "src/front.svg" buscará la imagen front.svg en la carpeta src).
  • backgroundImgFrontArray
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: indica una imagen para el anverso de cada carta que no entra en conflicto con la imagen de fondo del anverso; por convención el texto tiene que tener la siguiente estructura "ruta del archivo, nombre del archivo, extensión del archivo", si no se sigue esta convención, no se desplegará ninguna imagen; si la ruta del archivo no termina con /, se le agregará automáticamente; cada una de las imágenes tiene que tener un número de índice antes del nombre de la extensión, el cual tampoco se menciona en el nombre del archivo del texto (por ejemplo, en un memorama de 4 cartas "src,front,SVG" buscará las imágenes: "src/front0.svg", "src/front1.svg", "src/front2.svg" y "src/front3.svg"); el nombre de la extensión se busca en minúsculas automáticamente; todos los espacios antes y después las comas o de las comillas serán ignorados (por ejemplo, "src , front , SVG" es igual a "src,front,SVG").
  • backgroundImgFrontArrayOnlyHalf
    • Tipo: booleano.
    • Por defecto: false.
    • Descripción: determina si las imágenes para el anverso de cada carta solo se muestra en la primera mitad del total de cartas (ideal si se quiere hacer un memorama en donde se relacione la imagen a un texto junto con la opción textOnlyOnSecondHalf).
  • backgroundImgBack
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: indica una imagen de fondo en el reverso de las cartas al poner en el texto la ruta de la imagen (por ejemplo, "src/back.svg" buscará la imagen back.svg en la carpeta src).
  • border
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: determina el borde en el anverso y en el reverso de cada carta mediante una propiedad de CSS (border).
  • borderFront
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: determina el borde en el anverso de cada carta mediante una propiedad de CSS (border); si la opción border está activa, se deshabilita.
  • borderBack
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: determina el borde en el reverso de cada carta mediante una propiedad de CSS (border); si la opción border está activa, se deshabilita.
  • borderRadius
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: determina el radio del borde de cada carta mediante una propiedad de CSS (border-radius).
  • animationForCreation
    • Tipo: texto.
    • Por defecto: false.
    • Descripción: determina una animación para todas las cartas cuando son creadas; advertencia: Animate.css es necesario, y en el texto se especifica la clase deseada.
  • functionWhenTimer
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: indica una función a ejecutar cuando pasa un segundo; esta opción solo está habilitada si la opción timer está activa.
  • functionWhenTimerEnds
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: indica una función a ejecutar cuando se agota el tiempo disponible para completar el memorama; esta opción solo está habilitada si la opción timer está activa.
  • functionWhenTurnCompleted
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: indica una función a ejecutar cuando se completa un turno; se ejecuta independientemente de lo indicado en las opciones functionWhenTurnCompletedMatch y functionWhenTurnCompletedMismatch.
  • functionWhenTurnCompletedMatch
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: indica una función a ejecutar cuando se completa un turno con un acierto.
  • functionWhenTurnCompletedMismatch
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: indica una función a ejecutar cuando se completa un turno con un desacierto.
  • functionWhenRateMatch
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: indica una función a ejecutar cuando existe una racha de aciertos.
  • functionWhenRateMismatch
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: indica una función a ejecutar cuando existe una racha de desaciertos.
  • functionWhenNewRateBest
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: indica una función a ejecutar cuando existe una nueva racha más alta de aciertos.
  • functionWhenNewRateWorst
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: indica una función a ejecutar cuando existe una nueva racha más alta de desaciertos.
  • functionWhenCardFlip
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: indica una función a ejecutar cuando se voltea una carta.
  • functionWhenCreated
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: indica una función a ejecutar cuando se crea el memorama.
  • functionWhenIntroduced
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: indica una función a ejecutar cuando termine la animación de la opción animationForCreation; esta opción solo está habilitada si la opción animationForCreation está activa.
  • functionWhenCompleted
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: indica una función a ejecutar cuando se completa el memorama.

Este es un ejemplo para la creación de un memorama personalizado:

memorama.create({
        parent : "container",
        total: 8,
        width: "9em",
        height : "12em",
        margin : ".5em",
        opacity : ".75",
        textAlign : "right",
        textColor : "white",
        textSize : ".75em",
        textFontFamily : "'Lucida Console', Monaco, monospace",
        textBackgroundColor : "purple",
        textBorder : "2px solid gray",
        textBorderRadius : "1em",
        textMargin : "1em",
        textPadding : "10px",
        textOpacity : .5,
        textAlignItems : "flex-end",
        backgroundColorFront : "lightgray",
        backgroundColorBack : "gray",
        borderFront : "1px double black",
        borderBack : "5px solid darkgray",
        borderRadius : "1em"
    });

Para destruir el memorama de manera personalizada es necesario introducir este código, en donde se especifica alguna opción:

memorama.destroy({
        opción: valor
    });

La función de destruir tiene las siguientes 2 opciones:

  • animationForDestruction
    • Tipo: texto.
    • Por defecto: false.
    • Descripción: determina una animación para todas las cartas cuando son destruidas; advertencia: Animate.css es necesario, y en el texto se especifica la clase deseada.
  • functionWhenDestroyed
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: indica una función a ejecutar cuando se destruye el memorama.

Este es un ejemplo para la destrucción personalizada del memorama:

memorama.destroy({
        animationForDestruction : "zoomOut"
    });

Para deshabilitar el memorama de manera personalizada es necesario introducir este código, en donde se especifica alguna opción:

memorama.disable({
        opción: valor
    });

La función de deshabilitar tiene las siguientes 4 opciones:

  • backgroundColorLightBox
    • Tipo: texto.
    • Por defecto: "black".
    • Descripción: determina el color de la caja de luz mediante una propiedad de CSS (background-color).
  • opacityLightBox
    • Tipo: número o texto.
    • Por defecto: .5.
    • Descripción: determina la opacidad de la caja de luz.
  • fadeLightBox
    • Tipo: texto.
    • Por defecto: false.
    • Descripción: determina el tiempo de transición de la caja de luz mediante una propiedad de CSS (transition); solo es necesario especificar el tiempo (por ejemplo, "500ms" es igual a "-webkit-transition: opacity 500ms; transition: opacity 500ms;").
  • functionWhenDisabled
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: indica una función a ejecutar cuando se deshabilita el memorama.

Este es un ejemplo para la deshabilitación personalizada del memorama:

memorama.disable({
        backgroundColorLightBox: "green",
        opacityLightBox: .9,
        fadeLightBox: "500ms"
    });

Para habilitar el memorama de manera personalizada es necesario introducir este código, en donde se especifica alguna opción:

memorama.enable({
        opción: valor
    });

La función de habilitar tiene las siguientes 2 opciones:

  • fadeLightBox
    • Tipo: texto.
    • Por defecto: false.
    • Descripción: determina el tiempo de transición de la caja de luz mediante una propiedad de CSS (transition); solo es necesario especificar el tiempo (por ejemplo, "500ms" es igual a "-webkit-transition: opacity 500ms; transition: opacity 500ms;").
  • functionWhenEnabled
    • Tipo: texto.
    • Por defecto: "" (vacío).
    • Descripción: indica una función a ejecutar cuando se habilita el memorama.

Este es un ejemplo para la habilitación personalizada del memorama:

memorama.enable({
        fadeLightBox: ".5s"
    });

Ejemplos

Este repositorio tiene los siguientes ejemplos:

  • 01 basic-create-destroy-refresh. Muestra las características básicas de las funciones de crear, destruir y refrescar.
  • 02 basic-enable-disable. Muestra las características básicas de las funciones de habilitar y deshabilitar.
  • 03 advanced-enable-disable. Muestra las características avanzadas de las funciones de habilitar y deshabilitar.
  • 04 advanced-create-destroy-refresh. Muestra las características avanzadas de las funciones de crear, destruir y refrescar.
  • 05 advanced-create-destroy-refresh-enable-disable. Muestra las características avanzadas de las funciones de crear, destruir, refrescar, habilitar y deshabilitar.
  • 06 nice example. Muestra las características avanzadas de todas las funciones mediante un memorama para aprender los caracteres del hiragana.

Licencia

Esta extensión está licenciada con MPL.