JavaScript로 무작위 카드 생성기 만들기

16709 단어 tutorialjavascript
이 튜토리얼에서는 JavaScript를 사용하여 카드 놀이 덱을 생성한 다음 해당 덱에서 임의의 카드를 선택합니다. 그런 다음 브라우저에서 임의의 카드를 출력하고 실제 카드처럼 보이도록 CSS를 추가합니다. JavaScript를 사용하여 카드 게임을 구축하는 데 관심이 있다면 더 정교한 게임으로 넘어가기 전에 이것이 좋은 출발점입니다.



다음 마크업으로 index.html 파일을 만들어 시작하겠습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Random Playing Card</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>    
    <script src="script.js"></script>
  </body>
</html>


그런 다음 script.js 파일을 만들고 52장의 카드 놀이에 대한 값을 포함하는 배열을 생성하는 데 사용할 deckBuilder 함수를 추가합니다.

function deckBuilder() {
  // ...
}


내부deckBuilder는 카드 놀이 데크에 사용되는 값과 슈트를 정의합니다.

const values = [ "A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K", ];
const suits = ["Hearts", "Diamonds", "Spades", "Clubs"];


다음은 suits 배열을 반복하면서 values 배열을 반복하고 결합된 데이터를 cards 배열로 푸시합니다.

const cards = [];
for (let s = 0; s < suits.length; s++) {
  for (let v = 0; v < values.length; v++) {
    const value = values[v];
    const suit = suits[s];
    cards.push({ value, suit });
  }
}
return cards;


이제 다음과 같이 구성된 52장의 카드 놀이에 대한 슈트/값 조합으로 배열을 생성하는 함수가 있습니다.

0: {value: "A", suit: "Hearts"}
1: {value: "2", suit: "Hearts"}
2: {value: "3", suit: "Hearts"}


다음으로 카드 배열을 전달하는 randomCard 함수를 생성합니다.

function randomCard(cards) { 
  // ...
}
const cards = deckBuilder();
randomCard(cards);

randomCard 함수 내에서 0에서 51 사이의 난수(배열 인덱스가 0에서 시작하므로 52가 아님)를 생성하고 해당 인덱스의 cards 배열에서 데이터를 가져옵니다. 이 데이터는 나중에 더 쉽게 작업할 수 있도록 변수에 저장됩니다.

const random = Math.floor(Math.random() * 51);  
const cardValue = cards[random].value;
const cardSuit = cards[random].suit;


각 플레잉 카드 슈트(♥/♦/♠/♣)에 대해 HTML character entities이 있으므로 이미지를 사용하지 않고도 이것을 플레잉 카드에 출력할 수 있습니다. 다이아몬드의 엔티티 코드가 잘렸기 때문에 "Diamonds" 문자열도 잘라야 하고, 다른 슈트 엔티티 코드는 문자열( &hearts; &spades; &clubs; )과 일치하므로 소문자로 변환하기만 하면 됩니다.

let entity;
cardSuit === "Diamonds" ? (entity = "&diams;") : (entity = "&" + cardSuit.toLowerCase() + ";");


마지막으로 임의의 카드를 HTML 페이지에 렌더링할 수 있습니다. 이 프로젝트의 final design을 보면 cardValue와 entity가 반복된 이유를 알 수 있습니다.

const card = document.createElement("div");
card.classList.add("card", cardSuit.toLowerCase());
card.innerHTML = 
'<span class="card-value-suit top">' + cardValue + entity + '</span>' + 
'<span class="card-suit">' + entity + '</span>' + 
'<span class="card-value-suit bot">' + cardValue + entity + '</span>';
document.body.appendChild(card);


기능이 완료되면 임의의 카드에 CSS를 추가할 수 있습니다.
style.css라는 파일을 만들고 다음을 추가하여 기본 카드 모양을 만듭니다.

.card {  
  position: relative;
  width: 105px;
  height: 150px;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
}

.card가 상대적으로 위치하기 때문에 상단 및 하단 텍스트에 절대 위치를 사용할 수 있습니다. 또한 실제 카드처럼 하단의 텍스트를 180도 회전합니다.

.card-value-suit {
  display: inline-block;
  position: absolute;
}
.card-value-suit.top {
  top: 5px;
  left: 5px;
}
.card-value-suit.bot {
  transform: rotate(180deg);
  bottom: 5px;
  right: 5px;
}
.card-suit {
  font-size: 50px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 25%;
}


마지막으로 각 슈트의 색상을 추가합니다.

.card.spades,
.card.clubs {
  color: black;
}
.card.hearts,
.card.diamonds {
  color: red;
}
Android의 지오 펜싱
템플릿 문자열을 어떻게 표시하거나 출력합니까?

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage