MemoryCardGame

"In some ways, programming is like painting. You start with a blank canvas and certain basic raw materials. You use a combination of science, art, and craft to determine what to do with them." - Andrew Hunt

Step1: Deciding type of website

This is first project using javaScript so I didn't want to do complex project instead I decided to make simple memoryCardGame.

Step2: Setting backend

table relation

class Category < ApplicationRecord
    has_many :cards
end

class Card < ApplicationRecord
  belongs_to :category
end

Controller

Use scaffold
rails g scaffold Category name
rails g scaffold Card name url category:belongs_to

class CategoriesController < ApplicationController
  before_action :set_category, only: [:show, :update, :destroy]

  # GET /categories
  def index
    @categories = Category.all

    render json: @categories, only: [:id, :name], include: {
      cards: {
        only: [:id, :name, :url, :category_id] 
      }
    }
  end

  # GET /categories/1
  def show
    render json: @category, only: [:id, :name], include: {
      cards: {
        only: [:id, :name, :url] 
      }
    }
  end

  # POST /categories
  def create
    @category = Category.new(category_params)

    if @category.save
      render json: {
        status: 201,
        store: @category
      }, status: :created, location: category_path(@category)
    else
      render json: {
        status: 422,
        errors: @store.errors.full_messages.join(", ")
      }, status: :unprocessable_entity
    end
  end

  # PATCH/PUT /categories/1
  def update
    if @category.update(category_params)
      render json: @category
    else
      render json: @category.errors, status: :unprocessable_entity
    end
  end

  # DELETE /categories/1
  def destroy
    @category.destroy
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_category
      @category = Category.find(params[:id])
    end

    # Only allow a list of trusted parameters through.
    def category_params
      params.require(:category).permit(:name)
    end
end

Step3: Setting frontend

index.html

Create form

fetch post request to add new category with new 6 cards

Category-container

fetch get request to show a list of category

Game

When user clicks the play button next to the each list then event function will generate new Game with that category.

styles.css

Since I have show the card flips to user. I put two different images (font-face and back-face) in the same location and made them 3d.
https://www.w3schools.com/cssref/css3_pr_transform.asp
https://www.w3schools.com/cssref/css3_pr_transform-style.asp
https://www.w3schools.com/cssref/css3_pr_transition.asp

#memory-game {
    width: 640px;
    height: 640px;
    margin-right: 5%;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
}

.memory-card {
    /*board is 640 we have 160 for each but we need somespace with each other so -10 and have margin 5px*/
    width: calc(25% - 10px);
    height: calc(33.333% - 10px);
    margin: 5px;
    position: relative;   
    transform: scale(1);
    /*preserve-3d: Specifies that child elements(.front-face and .back-face) will preserve its 3D position*/
    transform-style: preserve-3d;
    transition: transform .5s;
}

.memory-card.flip {
    transform: rotateY(180deg);
}

/*put front and back same spot*/
.front-face, .back-face {
    width: 100%;
    height: 100%;
    position: absolute;
    border-style: solid;
    border-color: wheat;
    border-width: 2px;
    border-radius: 5px;
    backface-visibility: hidden;
}

/*then rotate front 180deg to only see the back-face at first*/
.front-face {
    transform: rotateY(180deg);
}

src/index.js

This part is relatively easy then setting up the board. As long as I follow the logic everything is okay.
Useful-1: style.order
https://www.w3schools.com/jsref/prop_style_order.asp
The order property specifies the order of a flexible item relative to the rest of the flexible items inside the same container.

function shuffle(){
    const cards = document.querySelectorAll('.memory-card');
    for(let i=0; i<cards.length; i++){
        let randomPos = Math.floor(Math.random() * 12);
        cards[i].style.order = randomPos
    }
}

Useful-2: classList
https://www.w3schools.com/jsref/prop_element_classlist.asp
classList.add(); Adds one or more class names to an element.

Future

For now it only works 6 set of cards. I want to modify this project so that it can generate game with any sets of cards.

Blog

Cicada0315