js+canvas 카드 게임 실현

본 논문 의 사례 는 js+canvas 가 카드 게임 을 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
잔말 말고 먼저 올 라 가세 요.
캡 처 실행


마지막 으로 완성 하면 애니메이션 을 끝 낼 수 있 습 니 다.저 는 기술 이 비교적 느 려 서 끝까지 놀 기 어렵 고 애니메이션 캡 처 를 완성 하지 못 합 니 다.
게임 소개
좋 습 니 다.일부 좋 은 학생 들 이 컴퓨터 실험 을 할 때 카드 게임 을 하지 않 았 을 수도 있 습 니 다.그래서 제 가 이 게임 을 소개 하 겠 습 니 다.이 게임 은 win 7 이 가지 고 있 는 카드 게임 입 니 다.게임 규칙 은 카드 를 일정한 규칙 에 따라 배열 하고 마지막 에 모든 카드 를 위로 올 리 는 것 입 니 다.두 곳 에서 카드 를 코드 할 수 있 습 니 다.위 에 A 로 시작 하면 곧 코드 를 넣 을 카드 의 색깔 이 같 고 카드 의 액면가 가 원래 의 카드 면 보다 1 크 면 코드 를 성공 적 으로 할 수 있 습 니 다.아래:K 로 시작 하여 곧 인 코딩 될 카드 의 색깔 이 다 르 고 카드 의 액면가 가 원래 의 패 면 보다 1 작 으 면 인 코딩 에 성공 할 수 있 습 니 다.
지원 하 는 동작
클릭,드래그 는 마이크로소프트 카드 에 비해 클릭 카드 가 자동 으로 적당 한 위 치 를 찾 는 인 코딩 방식 을 추 가 했 기 때문에 전체 게임 의 대부분 조작 은 클릭 만 하면 된다.
디자인 아이디어
1.게임 실행 드라이브
게임 은 플레이어 조작(마우스 클릭 과 이동)을 구동 한다.
마 우 스 를 클릭 하고 이동 할 때 마우스 의 위치 와 상 태 를 기록 하면 다음 네 가지 이벤트(누 르 기,이동,팝 업,클릭)를 얻 을 수 있 습 니 다.
우선 마우스 클릭,이동,팝 업 이벤트 등록 이 필요 합 니 다.

function BindEvent()
  {
   $(window).bind("mousedown touchstart", function (e)
   {
    e.preventDefault();
    var x;
    var y;
    if (e.type == "touchstart")
    {
     x = e.originalEvent.changedTouches[0].clientX;
     y = e.originalEvent.changedTouches[0].clientY;
    }
    else
    {
     x = e.clientX;
     y = e.clientY;
    }
    if (isPlayingAnimation)
    {
     return;
    }
    ActionDown(x, y - 50);
   });

   $(window).bind("mousemove touchmove", function (e)
   {
    e.preventDefault();
    var x;
    var y;
    if (e.type == "touchmove")
    {
     x = e.originalEvent.changedTouches[0].clientX;
     y = e.originalEvent.changedTouches[0].clientY;
    }
    else
    {
     x = e.clientX;
     y = e.clientY;
    }
    if (isPlayingAnimation)
    {
     return;
    }
    ActionMove(x, y - 50);
   });

   $(window).bind("mouseup touchend", function (e)
   {
    e.preventDefault();
    var x;
    var y;
    if (e.type == "touchend")
    {
     x = e.originalEvent.changedTouches[0].clientX;
     y = e.originalEvent.changedTouches[0].clientY;
    }
    else
    {
     x = e.clientX;
     y = e.clientY;
    }
    if (isPlayingAnimation)
    {
     return;
    }
    ActionUp(x, y - 50);
   });
  }

그리고 팝 업 이벤트 에서 마우스 가 팝 업 되 기 전에 얼마나 거 리 를 움 직 였 는 지 확인 하고 이동 거리 가 작 으 면 무시 할 수 있 으 며 클릭 조작 이 라 고 생각 합 니 다.
주의:이 이벤트 등록 은 모든 카드 에 있 는 것 이 아 닙 니 다.52 장의 카드 는 실제로 canvas 에 그 려 져 있 지만 52 장의 카드 좌 표 는 모두 알 고 있 기 때문에 계산 을 통 해 어떤 카드 를 선 택 했 는 지,카드 를 어디로 옮 기 고 있 는 지 알 수 있 습 니 다.유저 가 손 을 놓 으 면 디코더 조작 을 실현 할 수 있 습 니 다.
2.인터페이스 디자인
상단 표시 줄 은 포인트,시간 을 표시 하 는 데 사 용 됩 니 다.

<div id="titleContainer">
  <div>Score:<span id="score">0</span></div>
  <div>Timer:<span id="timer">00:00:00</span></div>
</div>

다음은 데스크 톱 입 니 다.

<div id="deskTop">
  <canvas id="canvasBack"></canvas>
  <canvas id="canvasFont"></canvas>
</div>

이 를 통 해 알 수 있 듯 이 데스크 톱 에는 두 개의 canvas 가 있 는데 앞 뒤 에는 실제 적 으로 게임 화면 을 두 층 으로 나 누 는 것 이 고 게이머 들 이 본 화면 은 두 개의 화면 이 겹 쳐 진 것 이다.
두 층 을 사용 하 는 이 유 는 전체 화면 을 실시 간 으로 그 리 는 것 을 피하 기 위해 서 입 니 다.마우스 가 일부 카드 를 선택 하면 이동 작업 을 해 야 합 니 다.이 때 는 실제로 마우스 가 선택 한 카드 의 위치 만 바 뀌 고 책상 위 에 남 은 카드 는 실제 적 으로 변화 가 없습니다.이때 뒤에 변화 가 없 는 카드 를 실시 간 으로 그 리 는 것 은 낭비 입 니 다.따라서 마우스 가 선택 한 패 를 꺼 내 canvasFont 층 에 넣 으 면 두 층 모두 실시 간 으로 그리 지 않 고 마우스 가 선택 한 패 는 이동 할 때 그 려 진 canvasFont 만 이동 하면 됩 니 다.
3.절차

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.