script.js
1//ストップウォッチの初期値 2let intervalId = null; 3let passedTime = 0; 4let previously = null; 5 6// 一時停止のモーダル非表示 7document.getElementById("continue").style.display = "none"; 8 9// カード作成 10const mark = ["♠︎","♦︎","♣︎","❤︎"]; 11const number = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"]; 12const card = []; 13for (let i = 0; i < mark.length; i++){ 14 for (let j = 0; j < number.length; j++){ 15 let result = { number: number[j], mark: mark[i] }; 16 card.push(result); 17 } 18} 19 20// スタートを押して関数を呼び出す 21function start(){ 22 23 //モーダルを非表示 24 document.getElementById("modalMusk").style.display = "none"; 25 document.getElementById("modal").style.display = "none"; 26 27 //シャッフル 28 for (let i = card.length - 1; i > 0; i--){ 29 let j = Math.floor(Math.random() * i); 30 let temp = card[i]; 31 card[i] = card[j]; 32 card[j] = temp; 33 } 34 35 //カードを分ける 36 const card1 = card.slice(0, 1); 37 const card2 = card.slice(1, 7); 38 const card3 = card.slice(7, 14); 39 const card4 = card.slice(14, 22); 40 const card5 = card.slice(22, 31); 41 const card6 = card.slice(31, 41); 42 const card7 = card.slice(41); 43 44 // 2回目のスタートのためにカードの中身を初期化 45 for (let i = 1; i < 8; i++){ 46 const add = document.getElementById("card" + i); 47 add.innerHTML = ""; 48 } 49 50 //カードを並べる関数を呼び出す 51 makeCard(card1.length, "card1", "cardk1-", card1); 52 makeCard(card2.length, "card2", "cardk2-", card2); 53 makeCard(card3.length, "card3", "cardk3-", card3); 54 makeCard(card4.length, "card4", "cardk4-", card4); 55 makeCard(card5.length, "card5", "cardk5-", card5); 56 makeCard(card6.length, "card6", "cardk6-", card6); 57 makeCard(card7.length, "card7", "cardk7-", card7); 58 59 //ストップウォッチをリセットして関数を呼び出す 60 clearInterval(intervalId); 61 passedTime = 0; 62 previously = new Date(); 63 intervalId = setInterval(stopwatch, 1000); 64} 65 66// カードを並べる関数 67function makeCard(cardLength, cardGet, cardIdPrefix, cards) { 68 69 // divを追加して色を分ける 70 for (let i = 1; i < cardLength + 1; i++) { 71 const add = document.getElementById(cardGet); 72 const cardId = cardIdPrefix + i; 73 const card = cards[i - 1]; 74 add.innerHTML += '<div class="cardAll" draggable="true" id="' + cardId + '">' + card.mark + card.number + '</div>'; 75 if (card.mark === "❤︎" || card.mark === "♦︎") { 76 document.getElementById(cardId).style.color = "#e10000"; 77 } else { 78 document.getElementById(cardId).style.color = "black"; 79 } 80 } 81 82 // カードの位置をずらす 83 let eighty = -80; 84 for (let i = 2; i < cardLength + 1; i++) { 85 const cardPosition = document.getElementById(cardIdPrefix + i); 86 if (cardPosition) { 87 cardPosition.style.position = "relative"; 88 cardPosition.style.top = eighty + "px"; 89 eighty -= 80; 90 } 91 } 92} 93 94//ストップウォッチを開始する関数 95function stopwatch(){ 96 const now = new Date(); 97 passedTime += now - previously; 98 previously = now; 99 100 const h = String(Math.floor(passedTime / (1000 * 60 * 60))).padStart(2, "0"); 101 const m = String(Math.floor(passedTime / (1000 * 60) % 60)).padStart(2, "0"); 102 const s = String(Math.floor(passedTime / 1000) % 60).padStart(2, "0"); 103 104 document.getElementById("time").innerHTML = h + ":" + m + ":" + s; 105} 106 107 108 109// 停止ボタンを押したら関数を呼び出す 110function stop(){ 111 112 // ストップウォッチを一時停止 113 clearInterval(intervalId); 114 115 // モーダルを表示 116 document.getElementById("modalMusk").style.display = "grid"; 117 document.getElementById("modal").style.display = "grid"; 118 document.getElementById("continue").style.display = "block"; 119} 120 121// 続きからを押したら関数を呼び出す 122function continueGame(){ 123 124 // モーダルを非表示 125 document.getElementById("modalMusk").style.display = "none"; 126 document.getElementById("modal").style.display = "none"; 127 128 // ストップウォッチの再開 129 previously = new Date(); 130 intervalId = setInterval(stopwatch, 1000); 131}
0 コメント