DEV Community

Cover image for MemoryCardGame
Cicada0315
Cicada0315

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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
    }
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay