Card stacking game's game | AI game creator

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

No:817

498

Card stacking game
Developer User3149｜Date and time 23/6/17 19:35:18
Build time 87.181 sec｜Game capacity 6.101KB｜

以下が私が実装したカードを積み上げるゲームのプログラムです。

カードゲームをプレイしましょう！

このゲームは、スタートボタンを押すと、7つのスタックが生成されます。それぞれのスタックには、1枚から順に1つずつカードが積み上げられ、最後の1枚だけが画面に表示されます（他のカードは裏側で隠れています）。残りのカードは、ドローボタンを押すことで1枚ずつ引くことができます。しかし、引けるカードがなくなってしまった場合、ドローボタンは無効になります。すべてのカードをスタックに積み上げることができれば、ゲームクリアです。スマホでも遊べるように、ボタンやカードのサイズを大きくして、必要に応じてスクロールできるようにしています。また、表情豊かな絵文字を多めに使っているので、操作性だけでなく、楽しさも感じられるゲームに仕上がっていると思います。

→ 　

1　

1　

[PR]現在の欲しいゲームランキング

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

(C)2023 HisashiApp

以下が私が実装したカードを積み上げるゲームのプログラムです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>カードゲーム</title>
  </head>
  <body>
    <p>カードゲームをプレイしましょう！</p>
    <button id="start" onclick="startGame()">スタート</button>
    <div id="gameContainer"></div>
    <script>
      let gameArea;
      let cardList = [];
      let stackList = [];

function startGame() {
        gameArea = document.getElementById("gameContainer");
        for (let i = 0; i < 52; i++) {
          cardList[i] = i + 1;
        }
        shuffleArray(cardList);
        for (let i = 0; i < 7; i++) {
          let stack = createStack();
          let topCard = cardList.pop();
          stackList[i] = [topCard];
          stack.innerText = getCardName(topCard);
          gameArea.appendChild(stack);
          if (i == 0) {
            stack.classList.add("topStack");
          }
          for (let j = 1; j <= i; j++) {
            let curCard = cardList.pop();
            stackList[i].push(curCard);
            let curStack = createStack();
            curStack.innerText = getCardName(curCard);
            curStack.classList.add("hiddenCard");
            gameArea.appendChild(curStack);
          }
        }
        let remainingCards = cardList.length;
        let drawButton = createDrawButton();
        drawButton.innerText = `残り${remainingCards}枚`;
        gameArea.appendChild(drawButton);
        drawButton.addEventListener("click", function() {
          if (cardList.length > 0) {
            let drawnCard = cardList.pop();
            let drawnCardName = getCardName(drawnCard);
            let drawnCardStyle = `transform: translate(${10 * remainingCards}px, 0)`;
            let drawnCardDiv = document.createElement("div");
            drawnCardDiv.classList.add("card");
            drawnCardDiv.classList.add("drawnCard");
            drawnCardDiv.setAttribute("style", drawnCardStyle);
            drawnCardDiv.innerText = drawnCardName;
            gameArea.insertBefore(drawnCardDiv, drawButton);
            remainingCards -= 1;
            drawButton.innerText = `残り${remainingCards}枚`;
            checkPlayableCards();
          }
        });
        checkPlayableCards();
      }

function shuffleArray(array) {
        for (let i = array.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));
          [array[i], array[j]] = [array[j], array[i]];
        }
      }

function createStack() {
        let stack = document.createElement("div");
        stack.classList.add("card");
        stack.classList.add("stack");
        return stack;
      }

function createDrawButton() {
        let drawButton = document.createElement("button");
        drawButton.classList.add("drawButton");
        return drawButton;
      }

function getCardName(cardNumber) {
        let suits = ["♥", "♦", "♠", "♣"];
        let suit = suits[Math.floor((cardNumber - 1) / 13)];
        let rankNumber = (cardNumber - 1) % 13 + 1;
        let rank = ["A", "2", "3", "4", "5", "6", "7", 
                    "8", "9", "10", "J", "Q", "K"][rankNumber - 1];
        return `${rank}${suit}`;
      }

function checkPlayableCards() {
        let topCards = [];
        for (let i = 0; i < stackList.length; i++) {
          let topCard = stackList[i][stackList[i].length - 1];
          topCards.push(topCard);
        }
        let playableCards = [];
        for (let i = 0; i < cardList.length; i++) {
          let card = cardList[i];
          let cardRank = (card - 1) % 13 + 1;
          for (let j = 0; j < topCards.length; j++) {
            let topCard = topCards[j];
            let topSuit = Math.floor((topCard - 1) / 13);
            let topRank = (topCard - 1) % 13 + 1;
            if (cardRank == topRank + 1 && topSuit < 2) {
              playableCards.push(card);
              break;
            } else if (cardRank == topRank - 1 && topSuit >= 2) {
              playableCards.push(card);
              break;
            }
          }
        }
        let drawButton = document.querySelector(".drawButton");
        if (playableCards.length == 0 && drawButton.innerText.slice(2, 4) != "0枚") {
          drawButton.disabled = true;
        } else {
          drawButton.disabled = false;
        }
      }
    </script>
  </body>
  <style>
    p {
      font-size: 30px;
      text-align: center;
    }
    button {
      font-size: 20px;
      margin-bottom: 20px;
    }
    .card {
      display: inline-block;
      margin-right: 10px;
      margin-top: 10px;
      padding: 10px;
      background-color: white;
      border-radius: 5px;
      box-shadow: 1px 1px 1px gray;
      font-size: 30px;
      font-weight: bold;
    }
    .hiddenCard:before {
      content: "🂠";
      font-size: 50px;
    }
    .topStack {
      background-color: lightgray;
    }
    .drawnCard {
      position: absolute;
      bottom: 0;
      right: 0;
    }
    .drawButton {
      font-size: 20px;
      margin-top: 10px;
    }
  </style>
</html>

このゲームは、スタートボタンを押すと、7つのスタックが生成されます。それぞれのスタックには、1枚から順に1つずつカードが積み上げられ、最後の1枚だけが画面に表示されます（他のカードは裏側で隠れています）。残りのカードは、ドローボタンを押すことで1枚ずつ引くことができます。しかし、引けるカードがなくなってしまった場合、ドローボタンは無効になります。すべてのカードをスタックに積み上げることができれば、ゲームクリアです。

スマホでも遊べるように、ボタンやカードのサイズを大きくして、必要に応じてスクロールできるようにしています。また、表情豊かな絵文字を多めに使っているので、操作性だけでなく、楽しさも感じられるゲームに仕上がっていると思います。