Morioh
Login
CODE VN

CODE VN

7 months ago

Trò chơi lật xu đơn giản sử dụng HTML, CSS, & JavaScript

Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách viết mã trò chơi lật đồng xu đơn giản bằng cách sử dụng HTML, CSS và JavaScript. Hướng dẫn này cung cấp các bước và mã đơn giản để giúp bạn tạo một trò chơi lật đồng xu đơn giản bằng cách sử dụng HTML, CSS và JavaScript.

Để viết mã trò chơi lật đồng xu đơn giản bằng HTML, CSS và JavaScript, bạn cần tạo ba tệp: HTML, CSS & Tệp JavaScript. Khi bạn tạo các tệp này, chỉ cần dán các mã đã cho vào tệp của bạn.

Mã đầy đủ: 

Tệp HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Day #7 - Flip a coin game | AsmrProg</title>
</head>

<body>

    <div class="container">
        <div class="stats">
            <p id="heads-count">Heads: 0</p>
            <p id="tails-count">Tails: 0</p>
        </div>
        <div class="coin" id="coin">
            <div class="heads">
                <img src="https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/8fb6a1c5b3eff6f00b2fb71f1695b72f80889dde/Day%20%2307%20-%20Flip%20a%20Coin%20Game/heads.svg">
            </div>
            <div class="tails">
                <img src="https://raw.githubusercontent.com/AsmrProg-YT/100-days-of-javascript/8fb6a1c5b3eff6f00b2fb71f1695b72f80889dde/Day%20%2307%20-%20Flip%20a%20Coin%20Game/tails.svg">
            </div>
        </div>
        <div class="buttons">
            <button id="flip-button">
                Flip Coin
            </button>
            <button id="reset-button">
                Reset
            </button>
        </div>
    </div>


    <script src="index.js"></script>
</body>

</html>

Tệp CSS: 

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');

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

body {
  height: 100%;
  background: linear-gradient(to right, #575ce5 50%, #f9fbfc 50%) fixed;
}

.container {
  background: #fff;
  width: 400px;
  padding: 50px;
  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;
}

.stats {
  text-align: right;
  color: #101020;
  font-weight: 500;
  line-height: 25px;
}

.coin {
  height: 150px;
  width: 150px;
  position: relative;
  margin: 50px auto;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.tails {
  transform: rotateX(180deg);
}

.buttons {
  display: flex;
  justify-content: space-between;
}

.coin img {
  width: 145px;
}

.heads,
.tails {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

button {
  width: 120px;
  padding: 10px 0;
  border: 2.5px solid #424ae0;
  border-radius: 5px;
  cursor: pointer;
}

#flip-button {
  background: #424ae0;
  color: #fff;
}

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

#reset-button {
  background: #fff;
  color: #424ae0;
}

@keyframes spin-tails {
  0% {
    transform: rotateX(0);
  }

  100% {
    transform: rotateX(1980deg);
  }
}

@keyframes spin-heads {
  0% {
    transform: rotateX(0);
  }

  100% {
    transform: rotateX(2160deg);
  }
}

Tệp JavaScript: 

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

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}`;
}

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

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