JavaScript와 CSS를 이용한 동전 던지기 게임

이 문서에서는 JavaScript를 사용하여 동전 던지기 게임을 만드는 법을 배울 것입니다.우리는 서로 다른 유형의 크리켓 경기나 다른 유형의 경기를 자주 본다.여기서 인코딩을 어떻게 사용하는지 보여 드리겠습니다.이를 위해서는 HTML CSS 및 JavaScript에 대한 기본적인 지식이 필요합니다.
Watch its live demo 그것의 작업 원리를 이해한다.나는 여기에 상자를 하나 만들었다.나는 먼저 두 장의 그림으로 상자 안에 동전을 하나 만들었다.그 다음에 작은 상자가 있는데, 게임의 결과가 거기에 나타날 것이다.다음은 두 개의 단추가 있는데, 하나는 게임을 시작하고, 다른 하나는 게임을 다시 시작합니다.
"동전 던지기"단추를 눌렀을 때, 동전은 계속 x축을 따라 회전할 것이다.3초 동안 회전하면 어느 방향으로 멈춘다.멈추는 방식은 완전히 무작위로 결정된다.이를 위해 JavaScript의 수학을 사용했습니다.임의 함수.

1단계: 동전 던지기 게임의 기본 구조

아래의 HTML과 CSS 코드를 사용하여 이 동전 게임의 기본 구조를 만들었습니다.이것width is 400px과 높이는 패드에 달려 있다.
여기white as background-color를 사용했습니다.경계 반지름은 상자의 네 모서리를 둥글게 만드는 데 도움이 됩니다.

<div class="container">

</div>

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Rubik",sans-serif;
}

body{
    height: 100%;
    background: #1f5a82;
}

.container{
    background-color: #ffffff;
    width: 400px;
    padding: 35px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    box-shadow: 15px 30px 35px rgba(0,0,0,0.1);
    border-radius: 10px;
    -webkit-perspective: 300px;
    perspective: 300px;
}

2단계: 이미지로 코인 만들기

지금 나는 두 장의 그림으로 동전을 창조했다.이 동전에 대해 나는 두상과 꼬리상을 사용했다.당신은 this link를 클릭하여 사진을 다운로드할 수 있습니다.아니면 네가 선택한 인터넷에서 다운로드할 수도 있다.
가능한 한 그림의 크기를 똑같이 하고 배경을 투명하게 하세요.images are 145 px와 position: absolute의 높이와 너비.
나는 여기transform: rotateX를 사용하여 두 이미지를 서로 마주보는 쪽에 놓았다.여기서 두 번째 그림180 along the x axis을 돌립니다.그 결과 첫 번째 이미지와 두 번째 이미지는 서로의 반대편에 있습니다.우리가 동전을 180도로 돌릴 때마다 우리는 두 번째 그림을 볼 수 있다.

<div class="coin" id="coin">

   <div class="heads">
      <img src="head.jpg">
   </div>

   <div class="tails">
      <img src="tails.jpg">
   </div>

</div>

.coin{
    height: 150px;
    width: 150px;
    position: relative;
    margin: 32px auto;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.coin img{
    width: 145px;
}
.heads,.tails{
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}
.tails{
    transform: rotateX(180deg);
}

현재 나는 @keyframes의 도움 아래 동전을 회전시킬 계획을 세웠다.네가 버튼을 눌렀을 때 동전은 몇 번 회전할 것이다.다음 코드는 이 회전을 지정하는 데 사용됩니다.
이 예에서, 내가 사용하는 각도는 첫 번째 그림보다 180도 많다.내가 왜 이러는지 알고 싶을 수도 있어.

The main reason for this is that I have already seen the second image rotated at a 180 degree angle. So in this case I used a 180 degree angle less.

@keyframes spin-tails{
    0%{
        transform: rotateX(0);
    }
    100%{
        transform: rotateX(1980deg);
    }
}
@keyframes spin-heads{
    0%{
        transform: rotateX(0);
    }
    100%{
        transform: rotateX(2160deg);
    }
}

3단계: 게임 결과를 보기 위한 디스플레이 만들기

현재 나는 이 게임의 결과를 볼 수 있는 모니터를 만들었다.

<div class="stats">
    <p id="heads-count">Heads: 0</p>
    <p id="tails-count">Tails: 0</p>
</div>

.stats{
    display: flex;
    color: #101020;
    font-weight: 500;
    padding: 20px;
    margin-bottom: 40px;
    margin-top: 55px;
    box-shadow: 0 0 20px rgba(0,139,253,0.25);
}

.stats p:nth-last-child(1){
  margin-left: 50%;
}

4단계: 동전 던지기 게임 컨트롤 버튼

마지막으로 나는 두 개의 버튼을 만들었다.한 경기를 시작하고 다른 경기를 다시 시작하다.버튼이 두 개widths 150 px인데, 나는 테두리 반경을 사용해서 둥글게 만들었다.

<div class="buttons">
   <button id="flip-button">Flip Coin</button>
   <button id="reset-button">Reset</button>
</div>

.buttons{
    display: flex;
    justify-content: space-between;
}
button{
    width: 150px;
    padding: 15px 0;
    border: none;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

지금 나는 다른 색깔로 두 개의 버튼을 만들었다.나는 파란색을 첫 번째 배경색으로 하고 자갈을 두 번째 배경색으로 한다.

#flip-button{
    background-color: #053469;
    color: #ffffff;
}

#reset-button{
    background-color: #674706;
    color: white;
}

5단계:JavaScript를 사용하여 이 동전 던지기 게임 활성화

위에서 우리는 HTML과 CSS를 통해 전체 프로그램을 설계했다.이 자바스크립트 동전 던지기 게임이 자바스크립트의 도움으로 충분히 기능을 발휘할 때가 됐다.우선, 나는 고체 용제의 일부 종류와 ID 함수를 확정했다.

let coin = document.querySelector(".coin");
let flipBtn = document.querySelector("#flip-button");
let resetBtn = document.querySelector("#reset-button");

헤드와tail의 값을 0으로 설정했습니다. 이것은 게임이 정상적인 조건에서 시작될 때 이 두 값 will be zero 의 값을 의미합니다.

let heads = 0;
let tails = 0;

현재 나는 이미if 함수로 그것을 실현했다.나는 I에서 Math.random 를 사용하여 무작위 값을 설정하고 setTimeout을 사용하여 시간을 설정했다.여기에서 나는 3000밀리초를 사용했다. 이것은 이 동전이 계속 3000밀리초를 회전할 것이라는 것을 의미한다.

flipBtn.addEventListener("click", () => {
    let i = Math.floor(Math.random() * 2);
    coin.style.animation = "none";
    if(i){
        setTimeout(function(){
            coin.style.animation = "spin-heads 3s forwards";
        }, 100);
        heads++;
    }
    else{
        setTimeout(function(){
            coin.style.animation = "spin-tails 3s forwards";
        }, 100);
        tails++;
    }
    setTimeout(updateStats, 3000);
    disableButton();
});

현재 나는 이미 아래 코드를 사용하여 모니터에 게임 결과를 표시했다.이것은 네가 처음과 끝의 가치를 계산하는 데 도움을 줄 것이다.

function updateStats(){
    document.querySelector("#heads-count").textContent = `Heads: ${heads}`;
    document.querySelector("#tails-count").textContent = `Tails: ${tails}`;
}

지금 나는 비활성화 버튼을 활성화했다.여기 데시벨 버튼이 없다고 생각하실 수도 있어요.❓🤔
실제로 동전이 계속 회전할 때, '뒤집기 단추' 는 전 데시벨 모드로 들어간다.따라서 3초 동안 이 버튼을 클릭할 수 없습니다.이것은 주로 게임의 균형을 유지하기 위해서다.

function disableButton(){
    flipBtn.disabled = true;
    setTimeout(function(){
        flipBtn.disabled = false;
    },3000);
}

지금 리셋 버튼이 켜져 있습니다.재설정 버튼을 클릭하면 머리와 꼬리의 값이 0이 됩니다.그것을 볼 수 있는 애니메이션이 없다는 것은 동전이 정지된다는 것을 의미한다.

resetBtn.addEventListener("click",() => {
    coin.style.animation = "none";
    heads = 0;
    tails = 0;
    updateStats();
});

지금 이것javascript Coin Toss Game은 완전히 너를 오락하기 위해서다.현재 나는 몇몇 css 코드를 사용하여 비활성화 단추를 설계했다.

#flip-button:disabled{
    background-color: #e1e0ee;
    border-color: #e1e0ee;
    color: #101020;
}

이 단추를 눌렀을 때, 이 단추의 배경색과 텍스트 색이 3초 동안 바뀝니다.
나는 당신이 본문에서 내가 어떻게 자바스크립트를 사용하여 이 동전 던지기 게임을 만들었는지 이해하기를 바랍니다.반드시 너의 이 강좌에 대한 견해를 평론해야 한다.
너는 나의 블로그를 방문해서 더 많은 유사한 강좌를 얻을 수 있다.😊
https://www.foolishdeveloper.com/