Yugi style dueling card game's game

Click here for free DL of the app version that can save data.

No:46828

←

Prev Next

→

Yugi style dueling card game
Developer User20261｜Date and time 24/2/26 7:14:13
Build time 6.919 sec｜Game capacity 1.918KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
  <title>Yugi Style Dueling Card Game</title>
  <style>
    body {
      background-color: #f0f0f0;
      font-family: Arial, sans-serif;
    }
    #player1 {
      float: left;
      margin-right: 20px;
    }
    #player2 {
      float: right;
      margin-left: 20px;
    }
    .card {
      width: 100px;
      height: 150px;
      border: 2px solid #333;
      border-radius: 5px;
      background-color: #fff;
      margin-bottom: 20px;
      text-align: center;
      line-height: 150px;
      font-size: 20px;
      cursor: pointer;
    }
    #result {
      clear: both;
      text-align: center;
      font-size: 24px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <div id="player1"></div>
  <div id="player2"></div>
  <div id="result"></div>

const cards = ['⚔️', '🛡️', '⚡️', '💣', '❤️'];

function playCard(player) {
      const card = cards[Math.floor(Math.random() * cards.length)];
      player.innerHTML = `<div class="card">${card}</div>`;

const card1 = player1.querySelector('.card');
      const card2 = player2.querySelector('.card');

if (card1 && card2) {
        const card1Value = cards.indexOf(card1.textContent);
        const card2Value = cards.indexOf(card2.textContent);

if (card1Value > card2Value) {
          result.textContent = 'Player 1 wins!';
        } else if (card1Value < card2Value) {
          result.textContent = 'Player 2 wins!';
        } else {
          result.textContent = 'It\'s a tie!';
        }
      }
    }

player1.addEventListener('click', () => {
      playCard(player1);
    });

player2.addEventListener('click', () => {
      playCard(player2);
    });
  </script>
</body>
</html>