ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 제작중인 자바스크립트 하트스톤
      개발일지/Javascript 2020. 4. 25. 22:08

      아직 미완입니다.

      <!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Heart Stone</title>
    <style>
      #my,
      #rival {
        display: inline-block;
        vertical-align: top;
        margin-right: 50px;
      }
      .turn {
        border: 1px solid black;
      }
      #rival {
        vertical-align: bottom;
      }
      #my-deck,
      #rival-deck {
        display: inline-block;
        vertical-align: top;
        width: 200px;
        background: silver;
      }
      #rival-deck,
      #rival-hero,
      #rival-cards,
      #my-deck,
      #my-cards,
      #my-hero {
        text-align: center;
      }

      .card-name {
        text-align: center;
        font-size: 12px;
      }

      .card {
        width: 50px;
        height: 75px;
        display: inline-block;
        position: relative;
        border: 1px solid black;
        margin-bottom: 10px;
        background: white;
      }

      .card-att,
      .card-hp,
      .card-cost {
        font-size: 12px;
        text-align: center;
        font-weight: bold;
        line-height: 15px;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        display: inline-block;
        position: absolute;
        bottom: 0;
        border: 1px solid black;
      }
      .card-cost {
        bottom: auto;
        top: 0;
        right: 0;
        color: white;
        background-color: blue;
      }
      .card-att {
        left: 0;
        background-color: yellow;
      }

      .card-hp {
        right: 0;
        background-color: red;
        color: white;
      }
      .card-hidden {
        display: none;
      }
      #turn-btn {
        float: right;
        position: relative;
        top: -23px;
      }
    </style>
  </head>
  <body>
    <div id="rival">
      <div>코스트:<span id="rival-cost">10</span>/<span>10</span></div>
      <div id="rival-hero">
        <!--상대방 영웅-->
      </div>
      <div id="rival-cards" style="height: 150px;"></div>
    </div>
    <div id="rival-deck">
      <div>덱</div>
    </div>
    <hr />
    <button id="turn-btn">턴넘기기</button>
    <div id="my" class="turn">
      <div id="my-cards" style="height: 150px;"></div>
      <div id="my-hero">
        <!-- 내 영웅-->
      </div>
      <div>코스트:<span id="my-cost">10</span>/<span>10</span></div>
    </div>
    <div id="my-deck">
      <div>덱</div>
    </div>
    <div class="card-hidden">
      <div class="card">
        <div class="card-cost"></div>
        <div class="card-att"></div>
        <div class="card-hp"></div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

      ar 상대영웅 = document.getElementById("rival-hero");
var 내영웅 = document.getElementById("my-hero");
var 상대덱 = document.getElementById("rival-deck");
var 내덱 = document.getElementById("my-deck");
var 상대필드 = document.getElementById("rival-cards");
var 내필드 = document.getElementById("my-cards");
var 상대코스트 = document.getElementById("rival-cost");
var 내코스트 = document.getElementById("my-cost");
var 턴버튼 = document.getElementById("turn-btn");
var 상대덱data = [];
var 내덱data = [];
var 상대영웅data;
var 내영웅data;
var 상대필드data = [];
var 내필드data = [];
var 턴 = true; // true면 내턴,false면 상대턴

function 카드돔연결(데이터, 돔, 영웅) {
  var 카드 = document.querySelector(".card-hidden .card").cloneNode(true); // cloneNode로 기존 태그를 그대로 복사할수 있다 인자에 true값을 넣으면 내부까지 복사
  카드.querySelector(".card-cost").textContent = 데이터.cost;
  카드.querySelector(".card-att").textContent = 데이터.att;
  카드.querySelector(".card-hp").textContent = 데이터.hp;
  if (영웅) {
    카드.querySelector(".card-cost").style.display = "none";
    var 이름 = document.createElement("div");
    이름.textContent = "영웅";
    카드.appendChild(이름);
  }
  카드.addEventListener("click", function (card) {
    if (턴) {
      // 내 턴이면
      if (!데이터.mine || 데이터.field) {
        // 상대 카드거나 카드가 필드에 있으면
        // 상대카드면
        return; // 바로 종료
      }
      var 현재코스트 = Number(내코스트.textContent);
      if (현재코스트 < 데이터.cost) {
        return; // 현재 코스트보다 뽑으려는 카드 코스트가 높으면 못뽑음
      }
      var idx = 내덱data.indexOf(데이터);
      내덱data.splice(idx, 1);
      내필드data.push(데이터);
      내덱.innerHTML = "";
      내필드.innerHTML = "";
      내필드data.forEach(function (data) {
        카드돔연결(data, 내필드);
      });
      내덱data.forEach(function (data) {
        카드돔연결(data, 내덱);
      });
      데이터.field = true;
      내코스트.textContent = 현재코스트 - 데이터.cost;
      내덱생성(1);
    } else {
      //상대 턴인데
      if (데이터.mine || 데이터.field) { // 내 카드거나 필드에 카드가 있을때
        // 내 카드면
        return; // 바로 종료
      }
      var 현재코스트 = Number(상대코스트.textContent);
      if (현재코스트 < 데이터.cost) {
        return; // 현재 코스트보다 뽑으려는 카드 코스트가 높으면 못뽑음
      }
      var idx = 상대덱data.indexOf(데이터);
      상대덱data.splice(idx, 1);
      상대필드data.push(데이터);
      상대덱.innerHTML = "";
      상대필드.innerHTML = "";
      상대필드data.forEach(function (data) {
        카드돔연결(data, 상대필드);
      });
      상대덱data.forEach(function (data) {
        카드돔연결(data, 상대덱);
      });
      데이터.field = true;
      상대코스트.textContent = 현재코스트 - 데이터.cost;
      상대덱생성(1);
    }
  });
  돔.appendChild(카드);
}

function 상대덱생성(개수) {
  for (var i = 0; i < 개수; i++) {
    상대덱data.push(카드공장());
  }
  상대덱.innerHTML = "";
  상대덱data.forEach(function (data) {
    카드돔연결(data, 상대덱);
  });
}
function 내덱생성(개수) {
  for (var i = 0; i < 개수; i++) {
    내덱data.push(카드공장(false, true));
  }
  내덱.innerHTML = "";
  내덱data.forEach(function (data) {
    카드돔연결(data, 내덱);
  });
}
function 내영웅생성() {
  내영웅data = 카드공장(true, true);
  카드돔연결(내영웅data, 내영웅, true);
}
function 상대영웅생성() {
  상대영웅data = 카드공장(true);
  카드돔연결(상대영웅data, 상대영웅, true);
}

function Card(영웅, 내카드) {
  if (영웅) {
    this.att = Math.ceil(Math.random() * 2);
    this.hp = Math.ceil(Math.random() * 5) + 25;
    this.hero = true;
  } else {
    this.att = Math.ceil(Math.random() * 5);
    this.hp = Math.ceil(Math.random() * 5);
    this.cost = Math.floor((this.att + this.hp) / 2);
  }
  if (내카드) {
    this.mine = true;
  }
}
function 카드공장(영웅, 내카드) {
  return new Card(영웅, 내카드);
}
function 초기세팅() {
  상대덱생성(5);
  내덱생성(5);
  내영웅생성();
  상대영웅생성();
}

턴버튼.addEventListener("click", function () {
  턴 = !턴; // true->false , false -> true
  if (턴) {
    내코스트.textContent = 10;
  } else {
    상대코스트.textContent = 10;
  }
  document.getElementById("rival").classList.toggle("turn");
  document.getElementById("my").classList.toggle("turn"); // 턴 확인
});

초기세팅(); // 만들자마자 바로 실행
      저작자표시

      '개발일지 > Javascript' 카테고리의 다른 글

      프로그래밍적 사고  (0) 2020.04.27
      현재 근황  (0) 2020.04.27
      자바스크립트 입문자를 위한 유용한 사이트 및 강의 모음  (0) 2020.04.23
      자바스크립트를 이용한 카드 뒤집기 게임  (0) 2020.04.22
      자바스크립트 반응속도 테스트 / javascript reaction-time  (0) 2020.04.21

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바