🂡 🂢 🂣 🂤 🂥 🂦 🂧 🂨 🂩 🂪 🂫 🂭 🂮 🂱 🂲 🂳 🂴 🂵 🂶 🂷 🂸 🂹 🂺 🂻 🂽 🂾 🃑 🃒 🃓 🃔 🃕 🃖 🃗 🃘 🃙 🃚 🃛 🃝 🃞 🃁 🃂 🃃 🃄 🃅 🃆 🃇 🃈 🃉 🃊 🃋 🃍 🃎 🂿 🃟 ♠ ♣ ♥ ♦ 🂠 🃏

🂠

view source

JavaScript

document.title = '神経衰弱 トランプ ゲーム';
$(function(){
  var cardTexts = $('#cards').text();
  $('#cards').remove();
  var cardsOrg = [];
  var cards = [];
  var cardTextAty = cardTexts.split('\n');
  var playerData = {};
  var enemyData = {};
  var selectCount = 0;
  var damageCount = 0;
  var dataA = {};
  var dataB = {};


  var backText = $('#back').text();
  $('#back').remove();

  [0,1,2,3].forEach(function(j){
    [1,2,3,4,5,6,7,8,9,10,11,12,13].forEach(function(i){
      var n = (j*13)+i;
      var color = '#000';
      if(j===1 || j===3){
        color = '#f00';
      }
      var data = {
        n:n,
        text : cardTextAty[n],
        j:j,
        i:i,
        color:color,
      };
      cardsOrg.push(data);
    });
  });
  var dataJoker = {
    n:53,
    text : cardTextAty[53],
    j:4,
    i:15,
    color:'#00f',
  };
  //cards.push(dataJoker);
  console.log(cardsOrg);

  $demo = $('#demo');
  $form = $('<form>');
  $area = $('<div>');
  $h1 = $('<h1>').text(document.title);
  $h2 = $('<h2>').text('同じ数字のペアを記憶して見つける');
  $player = $('<div>',{id:'player'});
  $enemy = $('<div>',{id:'enemy'});
  $result = $('<div>',{id:'result'});
  $demo
    .append($form)
  $form
    .append($area)
    .append($result);
  $area
    .append($enemy)
    .append($player);
  $demo.after($h1).after($h2);

  cards = cardsOrg.concat();
  cards = _.shuffle(cards);
  console.log(cards);
  
  function gameSet(data){
    if(cards.length < 6){
      cards = cardsOrg.concat();
    }
    $enemy.empty();
    $player.empty();
    playerCards = [];

    cards.forEach(function(v,i){
      var data = v;//cards.pop();
      var $i = $('<i>')
      var $card = $('<a>')
        .attr(data)
        .text(backText);
      data.ele = $card;
      $player.append($card);
      playerCards.push(data);
      $card.on('click', function(){
        select(data);
      });
    });;
    console.log(playerCards);
    $result.text('SELECT PAIR');
    $demo.addClass('start');
  }

  function open(data){
    data.ele.text(data.text);
    data.ele.css({color:data.color});
  }
  function close(data){
    data.ele.text(backText);
    data.ele.css({color:'#000'});
  }
  function select(data){
    if(!$demo.hasClass('start')){return;}
    if(data.ele.hasClass('select')){return;}
    if(data.ele.hasClass('open')){return;}
    console.log(data);
    selectCount++;
    open(data);
    playerData = data;
    data.ele.addClass('select');
    if(selectCount===1){
      dataA = data;
    }
    if(selectCount===2){
      dataB = data;
      checkMatch(dataA,dataB);
    }
  }
  function checkMatch(a,b){
    selectCount = 0;
    var bout = checkBout(a, b);
    if(bout === 0){
      $result.text('○');
      a.ele.addClass('open');
      b.ele.addClass('open');
    } else {
      $result.text('☓');
      damageCount++;
      setTimeout(function(){
        $result.text(damageCount);
        a.ele.removeClass('select');
        b.ele.removeClass('select');
        close(a);
        close(b);
      }, 699);
    }
  }

  function checkBout(playerData, enemyData){
    console.log({
      playerData:playerData,
      enemyData:enemyData,
    });
    if(enemyData === {} || playerData === {}){return;}
    if(playerData.n === enemyData.n){return;}
    if(playerData.i === enemyData.i){
      return 0;
    } else {
      return 1;
    }
  }

  $demo.on('click', function(){
    if($demo.hasClass('select')){
      $demo.addClass('open');
      $demo.removeClass('select');
      playerCards.forEach(function(v){
        open(v);
      });
    } else if($demo.hasClass('open')){
      $demo.addClass('start');
      $demo.removeClass('open');
      //gameSet(playerData);
      gameSet();
    }
  });

  
  gameSet();
});


CSS

#demo{
  display: grid;
  place-items: center;
  user-select:none;
}

form{
  display: grid;
  flex-wrap: wrap;
  font-size:18vw;
}

#enemy{
  width:25%;
}
#player{
  width:100%;
  display:flex;
  flex-wrap: wrap;
  justify-content: space-around;
  text-align:center;
}

#result{
  width:100%;
  font-size:9vw;
  text-align:center;
}


#demo a{
  display:inline-block;
  width:calc(100% / 6 - 6);
  font-size:120px;
  cursor:pointer;
  position:relative;
  top:0;
  left:0;
  margin:0 1vw;
  text-align:center;
}

#demo i{
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background-color:rgba(0,0,0);
  z-index:1;
}

#demo a.select{

  transform: translate(0px, -10px);

}

#demo:not(.select) a:hover{
  background-color:rgba(0,0,0,0.1);
}


@media (max-width: 640px) {
  #demo a{
    width:calc(100% / 6 - 6);
    font-size:80px;
    height:9vh;
    padding:8px;
    line-height: 9vh;
  }
}

HTML

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-game-playing-card-memory/

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。