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

No:405

497

←

Prev Next

→

solitaire
Developer User2906｜Date and time 23/6/13 22:45:33
Build time 58.568 sec｜Game capacity 4.866KB｜

Script

Lets implement the following.

solitaire

This application is、This is an implementation of the classic card game, Solitaire. Initially, the game is played by、The game begins with only one card face up from a deck of playing cards. Players take turns stacking cards of the same suit with lower numbers, and、The objective is to eventually move and erase all cards. The player is、You can flip cards one by one by clicking on the deck. By clicking on an unfolded location or an empty space, you can、You can move the card. When you complete the game、Congrats on clearing! will be displayed. By clicking the reset button、You can restore the game to its initial state.

←

Prev　Next

→ 　

Back　

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

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

を実装してみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>ソリティア</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      h1 {
        font-size: 2rem;
        margin-bottom: 1rem;
      }
      .card {
        width: 7rem;
        height: 9.5rem;
        margin: 0.5rem;
        border-radius: 5px;
        box-shadow: 2px 2px 5px gray;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        background-color: white;
        cursor: pointer;
      }
      .card.hidden {
        opacity: 0;
        visibility: hidden;
      }
      .container {
        display: flex;
        flex-wrap: wrap;
        margin-top: 2rem;
      }
      .container.completed {
        opacity: 0.5;
      }
      .button {
        font-size: 1.5rem;
        margin-top: 1rem;
        padding: 0.5rem 1rem;
        border: none;
        border-radius: 5px;
        background-color: #007c91;
        color: white;
        cursor: pointer;
      }
      .message {
        font-size: 1.5rem;
        margin-top: 1rem;
      }
    </style>
  </head>
  <body>
    <h1>ソリティア</h1>
    <div class="container"></div>
    <button class="button" id="reset-button">リセット</button>
    <div class="message"></div>
    <script>
      const suits = ["♠", "♥", "♣", "♦"];
      const values = [
        "A",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "10",
        "J",
        "Q",
        "K",
      ];

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

shuffleDeck(deck);

const container = document.querySelector(".container");
      const message = document.querySelector(".message");

let clickedCardIndex;
      let hiddenCardCount = 24;

render();

container.addEventListener("click", function (event) {
        const clickedElement = event.target;
        const clickedCardIndex = parseInt(clickedElement.dataset.index);
        const clickedCard = deck[clickedCardIndex];
        if (!clickedCard.hidden) {
          return;
        }
        clickedCard.hidden = false;
        clickedElement.classList.remove("hidden");
        hiddenCardCount--;
        render();
      });

このアプリは、クラシックなトランプゲームであるソリティアを実装するものです。初期状態では、トランプの山から一枚だけ表にした状態で始まります。プレイヤーは同じスートの数字が小さいカードを順番に積み上げていき、最終的に全てのカードを移動させて消すことが目的です。

プレイヤーは、山札をクリックすることで一枚ずつカードをめくることができます。展開場所や空きスペースをクリックすることで、カードを移動させることができます。ゲームをクリアすると、「クリアおめでとう！」と表示されます。リセットボタンをクリックすることで、ゲームを初期状態に戻すことができます。