KodikKodik
{}const=>[]async()letfn</>var
Web開発

JS、HTML、CSSで三目並ゲームを作成する

HTML、CSS、JavaScriptを使用して三目並ゲームを作成するための詳細なガイド。プログラミングを学び、最初のプロジェクトを作成したい初心者の開発者に最適です。ゲームをインタラクティブでスタイリッシュにする方法を学びましょう！

К

Kodik

著者

3分で読める

今日は、JavaScriptでゲーム「ティックタックトー」を作成する方法を説明します。このゲームは、プログラミングの練習や、HTML、CSS、JavaScriptとの相互作用の理解に最適です！ ⭐

すでにプログラミングに少し精通していて、独自のものを作成したい場合は、この記事が基本を理解するのに役立ちます。完全なソースコードについては、 GitHub 実際にプロジェクトを見てみましょう。さあ始めましょう！

完全なソースコードと追加の改善については、 GitHub.

ステップ1：ファイルの準備💻

ゲームを作成するには、次の3つのファイルが必要です。

  1. HTML (index.html) - ページ構造を作成します。

  2. CSS （style.css） - ページのデザイン用。

  3. JavaScript （ script.js ） - ゲームロジックを書くためのものです。

HTMLは構造を担当し、CSSはスタイルを追加してインターフェースを快適にし、JavaScriptはゲームにロジックとインタラクティブ性を与えます。まず、ゲームの基礎となるHTMLファイルを見てみましょう。

HTML: 構造の作成

HTML ファイルは、ユーザーインターフェイスの基礎を作成します。コードは次のようになります（ファイルの一部index.html）。

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Игра "Tic-tac-toe" | Coursme</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- окно выбора -->
  <div class="select-box">
    <header>Крестики-нолики</header>
    <div class="content">
      <div class="title">Выберите, кем вы хотите быть?</div>
      <div class="options">
        <button class="playerX">Игрок (X)</button>
        <button class="playerO">Игрок (O)</button>
      </div>
    </div>
  </div>

  <!-- игровое поле -->
  <div class="play-board">
    <div class="details">
      <div class="players">
        <span class="Xturn">Ход X</span>
        <span class="Oturn">Ход O</span>
        <div class="slider"></div>
      </div>
    </div>
    <div class="play-area">
      <section>
        <span class="box1"></span>
        <span class="box2"></span>
        <span class="box3"></span>
      </section>
      <section>
        <span class="box4"></span>
        <span class="box5"></span>
        <span class="box6"></span>
      </section>
      <section>
        <span class="box7"></span>
        <span class="box8"></span>
        <span class="box9"></span>
      </section>
    </div>
  </div>

  <!-- окно результата -->
  <div class="result-box">
    <div class="won-text"></div>
    <div class="btn"><button>Играть снова</button></div>
  </div>

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

このHTMLコードでは、3つの主要なセクションが作成されます。

  1. プレイヤー選択ウィンドウ - プレイヤーがXまたはOのどちらかを選択する場所。

  2. ゲームフィールド - プレイヤーが自分のターンを行うメインインターフェース。

  3. 結果ウィンドウ - 勝者または引き分けを表示します。

これらの3つのセクションは、ゲームプレイの基礎を形成し、インターフェースをわかりやすく、使いやすくします。

ステップ2：ゲームのスタイルを決める 🎨

style.css ファイルはゲームの外観を管理します。重要なポイントは次のとおりです。

  • ゲームの背景は明るく快適なインターフェースを作る、素敵な紫色で彩られています。

  • プレイヤー選択ボタンは、ホバー時にスムーズなアニメーションを表示し、ゲームとのインタラクションをより楽しくします。

  • ゲームボードはマス目に分割されており、マウスオーバーするとそれぞれのマスが強調表示されるため、プレイヤーはどこに手を入れることができるかを直感的に理解することができます。

style.cssのコード例：

body{
  background: #6563FF;
  color: #e0e0e0;
}
.play-area section span{
  display: block;
  height: 90px;
  width: 90px;
  margin: 2px;
  color: #fff;
  font-size: 40px;
  line-height: 80px;
  text-align: center;
  border-radius: 5px;
  background: #1e1e1e;
}

このスタイルは、ゲームを視覚的に魅力的で使いやすいものにします。ゲームフィールドのセルは、各ターンがはっきりと見え、プレイヤーがゲームフィールドを簡単にナビゲートできるように、きちんとデザインされています。

それでは、最も面白いJavaScriptに移りましょう！

ステップ3：JavaScriptのゲームロジック🕹️

JavaScriptは、ゲームをインタラクティブにするものです。プレイヤーの簡単な選択から勝者の決定まで、script.jsファイルがどのように機能するかを見てみましょう。

ゲームの初期化とプレイヤーの選択

ゲームがロードされると、すぐにいくつかの要素を初期化し、プレイヤー選択ボタンのイベントを追加します。その方法は次のとおりです。

// 必要なすべての要素の選択
const selectBox = document.querySelector(".select-box"),
selectBtnX = selectBox.querySelector(".options .playerX"),
selectBtnO = selectBox.querySelector(".options .playerO"),
playBoard = document.querySelector(".play-board"),
players = document.querySelector(".players"),
allBox = document.querySelectorAll("section span"),
resultBox = document.querySelector(".result-box"),
wonText = resultBox.querySelector(".won-text"),
replayBtn = resultBox.querySelector("button");

window.onload = ()=>{ // ウィンドウの読み込み後
    for (let i = 0; i < allBox.length; i++) { // 利用可能なすべてのスパンにonclick属性を追加します
       allBox[i].setAttribute("onclick", "clickedBox(this)");
    }
}

ここでは、ゲームを制御するために必要なすべての要素を見つけ、ゲームフィールドの各セルにクリックイベントを追加します。つまり、各セルがインタラクティブになり、ユーザーのアクションに応答できるようになります。

次に、プレイヤーの選択が続きます。

selectBtnX.onclick = ()=>{
    selectBox.classList.add("hide"); // 選択ウィンドウを非表示にする
    playBoard.classList.add("show"); // ゲームフィールドを表示する
}

selectBtnO.onclick = ()=>{ 
    selectBox.classList.add("hide");
    playBoard.classList.add("show");
    players.setAttribute("class", "players active player"); // プレイヤーの属性を設定する
}

このコードは、どのプレイヤーが選択されたかに応じて、インターフェースのさまざまな部分を表示または非表示にする役割を果たします。選択が完了すると、選択ウィンドウが消え、画面にゲームフィールドが表示されます。

プレイヤーとボットの動き ➖➕

プレイヤーがゲームボード上のセルを選択すると、そのセルにアイコン（XまたはO）が表示されるようにします。これを実現する方法は次のとおりです。

let playerXIcon = "fas fa-times"; // FontAwesomeのクロスアイコンのクラス名
let playerOIcon = "far fa-circle"; // FontAwesomeの円アイコンのクラス名
let playerSign = "X"; // グローバル変数、いくつかの関数で使用するため
let runBot = true; // 誰かが勝ったり引き分けたりしたときにボットを停止するためのブール値を持つグローバル変数

function clickedBox(element){
    if(players.classList.contains("player")){
        playerSign = "O"; // プレイヤーが O を選択した場合
        element.innerHTML = `<i class="${playerOIcon}"></i>`;
        players.classList.remove("active");
    }else{
        element.innerHTML = `<i class="${playerXIcon}"></i>`;
        players.classList.add("active");
    }
    element.setAttribute("id", playerSign); // 選択したプレーヤーの記号を持つ span/セルに id 属性を設定します
    selectWinner(); // 勝者がいるかどうかを確認しています
    element.style.pointerEvents = "none"; // セルを選択できなくなりました
    playBoard.style.pointerEvents = "none"; // ボットが動くまでゲームボードをロックする
    let randomTimeDelay = ((Math.random() * 1000) + 200).toFixed(); // ランダムな遅延時間を生成します
    setTimeout(()=>{
        bot(runBot); // ボット関数を呼び出します
    }, randomTimeDelay);
}

ここでは、プレイヤーがセルを選択すると、そのセルは再選択できなくなります。その後、実際のゲームの効果を生み出すために、少し遅れてボットに移動します。このようにして、ゲームはダイナミックで面白くなります。

ボット機能 🤖

ボット機能は、次の利用可能なセルを自動的に選択します。ボットはプレイヤーの後に動き、その動きは実際の対戦相手とのやり取りの印象を与えます。

function bot(){
    let array = []; // 空の配列を作成します...選択されていないセルのインデックスを保存します
    if(runBot){ // runBotがtrueの場合
        playerSign = "O"; // プレイヤーがXを選択した場合、playerSignをOに変更する
        for (let i = 0; i < allBox.length; i++) {
            if(allBox[i].childElementCount == 0){ // セルに子要素が含まれていない場合
                array.push(i); // 選択されていないセルのインデックスを配列に挿入します
            }
        }
        let randomBox = array[Math.floor(Math.random() * array.length)]; // ランダムなセルを選択します
        if(array.length > 0){
            if(players.classList.contains("player")){ 
                playerSign = "X"; // プレイヤーが O を選択した場合、ボットは X になります
                allBox[randomBox].innerHTML = `<i class="${playerXIcon}"></i>`;
                allBox[randomBox].setAttribute("id", playerSign);
                players.classList.add("active");
            }else{
                allBox[randomBox].innerHTML = `<i class="${playerOIcon}"></i>`;
                players.classList.remove("active");
                allBox[randomBox].setAttribute("id", playerSign);
            }
            selectWinner(); // 勝者がいるかどうかを確認しています
        }
        allBox[randomBox].style.pointerEvents = "none"; // セルを選択できなくなりました
        playBoard.style.pointerEvents = "auto"; // プレイヤーがセルを再度クリックできるようにする
        playerSign = "X"; // プレイヤーへのコース変更
    }
}

bot()関数は、ボットが自動的に選択を行い、ライブの対戦相手の印象を作り出すため、ゲームにリアリズムを追加します。ボットはランダムに利用可能なセルを選択するため、ゲームに驚きの要素が加わります。

勝者の決定 🏆

各ターンの後、勝者がいるかどうかを確認する必要があります。これを行うには、関数 selectWinner を使用します。

function selectWinner(){
    if(checkIdSign(1,2,3,playerSign) || checkIdSign(4,5,6, playerSign) || checkIdSign(7,8,9, playerSign) || checkIdSign(1,4,7, playerSign) || checkIdSign(2,5,8, playerSign) || checkIdSign(3,6,9, playerSign) || checkIdSign(1,5,9, playerSign) || checkIdSign(3,5,7, playerSign)){
        runBot = false; // 誰かが勝った場合はボットを停止します
        setTimeout(()=>{ // 700ミリ秒後に結果を表示
            resultBox.classList.add("show");
            playBoard.classList.remove("show");
        }, 700);
        wonText.innerHTML = `Player <p>${playerSign}</p> won the game!`;
    }else{
        if(getIdVal(1) != "" && getIdVal(2) != "" && getIdVal(3) != "" && getIdVal(4) != "" && getIdVal(5) != "" && getIdVal(6) != "" && getIdVal(7) != "" && getIdVal(8) != "" && getIdVal(9) != ""){
            runBot = false; // 引き分けの場合はボットを停止します
            setTimeout(()=>{ // 700ミリ秒後に結果を表示
                resultBox.classList.add("show");
                playBoard.classList.remove("show");
            }, 700);
            wonText.textContent = "The match ended in a draw!";
        }
    }
}

関数 selectWinner() は、すべての可能な勝利の組み合わせをチェックし、勝者がいるかどうかを判断します。すべてのセルが埋まって誰も勝てない場合、ゲームは引き分けで終了します。これによりゲームは完了し、各ラウンドは論理的に完了します。

結論🚀

おめでとうございます！これで、HTML、CSS、JavaScriptを使用してシンプルなゲーム「三目並」を作成する方法がわかりました。私たちは、楽しいユーザーインターフェイスを作成し、スタイルを追加し、ゲームロジックを作成するために、すべてのステップを実行しました。これで、HTML、CSS、JavaScript間の相互作用がどのように機能し、それらがどのように連携して本格的なWebアプリケーションを作成できるかを理解できます。

このプロジェクトを基に、より複雑なゲームを作成したり、このゲームの機能を拡張したりすることができます。例えば、勝利カウンターを追加したり、グラフィックスを改善したり、マルチプレイヤーゲームにしたりできます。可能性は無限大で、すべてはあなたの想像力と創造性にかかっています！

完全なソースコードと追加の改善については、 GitHub.

質問があれば、遠慮なく聞いてください。プログラミングがうまくいって、プロジェクトがいつも面白くて楽しいものでありますように！ 👊🌟

🎯先延ばしをやめよう

記事は気に入った？
実践の時間だ！

Kodikでは読むだけでなく、すぐにコードを書く。理論 + 実践 = 本当のスキル。

⚡即座に実践
🧠AIがコードを説明
🏆修了証

登録不要 • カード不要