###前提・実現したいこと
前提:
JavaScriptを使って単語カードを作成しました。
内容はPhotoShopのショートカットでカードをクリックすると機能名⇄ショートカットキー となるように設定しています。
実現したいこと:
ランダムでカードを表示し、一度表示したカードは再度表示されないようにする。
###試したこと
配列に格納したカードは下記コードの乱数にてランダム表示しています。
配列を順番に表示することはfor文にて設定できますが、
「ランダム表示」と「表示済みカードは取り除く」を組み合わせるにはどのようにしたら良いでしょうか?
javascript
1function setCard() { 2 var num = Math.floor(Math.random() * words.length); 3 cardFront.innerHTML = words[num]['key']; 4 cardBack.innerHTML = words[num]['a']; 5 card.removeEventListener('transitionend', setCard); 6 } 7
###該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>PhotoShop</title> 6 <style> 7 body { 8 margin: 0; 9 background: #e0e0e0; 10 text-align: center; 11 font-family: Verdana, sans-serif; 12 color: #fff; 13 } 14 #btn { 15 width: 200px; 16 margin: 0 auto; 17 padding: 7px; 18 border-radius: 5px; 19 background: #00aaff; 20 box-shadow: 0 4px 0 #0088cc; 21 cursor: pointer; 22 } 23 #btn:hover { 24 opacity: 0.8; 25 } 26 #card { 27 margin: 60px auto 20px; 28 width: 400px; 29 height: 100px; 30 cursor: pointer; 31 font-size: 38px; 32 line-height: 100px; 33 perspective: 100px; 34 transform-style: preserve-3d; 35 transition: transform .8s; 36 } 37 #card-front, #card-back { 38 display: block; 39 width: 100%; 40 height: 100%; 41 border-radius: 5px; 42 position: absolute; 43 backface-visibility: hidden; 44 } 45 #card-front { 46 background: #fff; 47 color: #333; 48 } 49 #card-back { 50 background: #fff; 51 color: #333; 52 transform: rotateY(180deg); 53 } 54 .open { 55 transform: rotateY(180deg); 56 } 57 </style> 58</head> 59<body> 60 <div id="card"> 61 <div id="card-front"></div> 62 <div id="card-back"></div> 63 </div> 64 <div id="btn">NEXT</div> 65 <script> 66 (function() { 67 'use strict'; 68 69 var words = [ 70 {'key': '境界線調整', 'a': 'alt ctrl R' }, 71 {'key': '選択反転', 'a': 'shift ctrl I' }, 72 {'key': 'カンバスサイズ', 'a': 'ctrl alt C' }, 73 {'key': '塗りつぶし', 'a': 'shift F5' }, 74 75 ]; 76 77 var card = document.getElementById('card'); 78 var cardFront = document.getElementById('card-front'); 79 var cardBack = document.getElementById('card-back'); 80 var btn = document.getElementById('btn'); 81 card.addEventListener('click', function() { 82 flip(); 83 }); 84 btn.addEventListener('click', function() { 85 next(); 86 }); 87 88 function next() { 89 if (card.className === 'open') { 90 card.addEventListener('transitionend', setCard); 91 flip(); 92 } else { 93 setCard(); 94 } 95 } 96 97 function setCard() { 98 var num = Math.floor(Math.random() * words.length); 99 cardFront.innerHTML = words[num]['key']; 100 cardBack.innerHTML = words[num]['a']; 101 card.removeEventListener('transitionend', setCard); 102 } 103 104 setCard(); 105 106 window.addEventListener('keyup', function(e) { 107 if (e.keyCode === 70) { 108 flip(); 109 } else if (e.keyCode === 78) { 110 next(); 111 } 112 }); 113 114 function flip() { 115 card.className = card.className === '' ? 'open' : ''; 116 } 117 118 })(); 119 </script> 120</body> 121</html>
どうぞよろしくお願いいたします。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/05/31 06:59