神経衰弱をただいま作っていますが、今のままでは数字だけがカードに表記されます。
カードの表面を数字ではなく、画像にしようとして、以下のように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>
JS
(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(); })();
JSだけではなく、せめて書いた部分だけでもHTMLを提示してください。
何がわからないのかが全然整理できておらず、丸投げしているように見えます。
慣れていないため、書き方もよくわからずすいませんでした。
もう1方に書いて頂いたアドバイスに従って、createElementにしようかなと思い、
var img = document.createElement('img')
img.src = 'img/' + cards_image[Math.floor(Math.random() * cards_image.length)];
まで進みましたが、それをどういう風に追加していいか迷っているところです。
そのほかにもやり方があればご教授いただけると幸いです。
回答1件
あなたの回答
tips
プレビュー