神経衰弱において数字を画像に変えるやり方

神経衰弱をただいま作っていますが、今のままでは数字だけがカードに表記されます。
カードの表面を数字ではなく、画像にしようとして、以下のようにcards_imageの配列みたいなのを作りましたが、ここからどうアプローチしていいかわからなくなってしまいました。おそらくsrc = 〜みたいにするのだと思いますが、お手柔らかに助言お願いいたします。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>Confusion</title>
 <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="container">
  <div id="timer">0:00</div>
  <div id="stage">
</div>
</div>

<script src="js/main.js"></script>
</body>
</html>

(function() {
  'use strict';

  var pair = 4;
  var cards = [];
  var flipCount = 0;
  var firstCard = null;
  var secondCard = null;
  var answer = 0;
  var startTime;
  var isPlaying = false;
  var timerId;
  var cards_image = [
    'Bubbleslime.png',
    'Goldenslime.png',
    'Kingslime.png',
    'Metalking.png',
    'Slime.png',
    'SlimeGreen.png',
    'Slimeknight.png',
  ];

  function init() {
    var i;
    var card;
    for(i = 0; i < pair; i++){
      cards.push(createCard(i));
      cards.push(createCard(i));
      card-front.src = Math.floor(Math.random() * cards_image.length);
      // document.getElementById('stage').appendChild(createCard(i));
      // document.getElementById('stage').appendChild(createCard(i));
    }
    while(cards.length) {
      card = cards.splice(Math.floor(Math.random() * cards.length),1)[0];
      document.getElementById('stage').appendChild(card);
    }
  }



  function createCard(src){
    var container;
    var card;
    var inner;
    inner = '<div class="card-front">' + src + '</div><div class="card-back">?</div>';
    card = document.createElement('div');
    card.innerHTML = inner;
    card.className = 'card';
    card.addEventListener('click', function() {
      flipCard(this);
      if(isPlaying === true){
        return;
      }
      isPlaying = true;
      startTime = Date.now();
      runTimer();
    })
    container = document.createElement('div');
    container.className = 'card-container';
    container.appendChild(card);
    return container;
  }

  function flipCard(card) {
   if(firstCard !== null && secondCard !== null) {
     return;
   }
    card.className ='card open';
    flipCount++;
    if(flipCount % 2 === 1) {
      firstCard = card;
    } else {
      secondCard = card;
      secondCard.addEventListener('transitionend', check);
    }
  }

  function check() {
    if(firstCard.children[0].textContent !== secondCard.children[0].textContent){
      firstCard.className = 'card';
      secondCard.className = 'card';
    } else {
      answer++;
      if(answer === pair) {
        alert('ゲーム終了です。お疲れ様でした');
        clearTimeout(timerId);
      }
    }
    secondCard.removeEventListener('transitionend', check);
    firstCard = null;
    secondCard = null;
    flipCount = 0;
  }

  function runTimer(){
    document.getElementById('timer').textContent = ((Date.now() - startTime) / 1000).toFixed(2);
   timerId = setTimeout(function() {
      runTimer();
    }, 10);
  }



  init();
})();

mather

2019/03/05 18:07

JSだけではなく、せめて書いた部分だけでもHTMLを提示してください。何がわからないのかが全然整理できておらず、丸投げしているように見えます。

Asylum35aO2

2019/03/06 03:55

慣れていないため、書き方もよくわからずすいませんでした。もう１方に書いて頂いたアドバイスに従って、createElementにしようかなと思い、 var img = document.createElement('img') img.src = 'img/' + cards_image[Math.floor(Math.random() * cards_image.length)]; まで進みましたが、それをどういう風に追加していいか迷っているところです。そのほかにもやり方があればご教授いただけると幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

createElement()でimgを作ればいいのでは。

投稿2019/03/06 00:17

m.ts10806

総合スコア80850

Asylum35aO2

2019/03/06 03:58

ありがとうございました。プログラミング歴が浅いので、質問の仕方や基本的事項もわからないことが多いです。調べた結果、mts１０８０６さんが意味したのは以下のようなことでしょうか？ var img = document.createElement('img') img.src = 'img/' + cards_image[Math.floor(Math.random() * cards_image.length)]; これをどう挿入したらよいでしょうか少しヒントをいただけませんか？