を使用して簡単なチックタックトーゲームを作成する
32194 ワード
JavaScriptでゲームを作成する最も楽しい方法を学ぶことです.それはあなたのモチベーションを維持し、Web開発のような複雑なスキルを学習するために重要です.さらに、あなたの友人と遊ぶことができるか、ちょうどあなたが作成したものを表示し、彼らは離れて吹き飛ばされるでしょう.今日のブログ記事では、HTML、CSSとJavaScriptを使用してチックタックトーゲームを作成します.
あなたが詳細なステップバイステップのビデオを見るならば、あなたは私がこのプロジェクトをカバーしているビデオをチェックすることができます:
まず最初に、私たちが後で作成するCSSとJavaScriptファイルを含みます.私はまた、私はこのゲームに最適なフィットだと思うitimと呼ばれるGoogleのフォントを追加します.
最初のセクションでは
番目のセクションでは、そのターンは、現在表示されます.ディスプレイの中には、含まれるスパンがあります
番目のセクションでは、ゲームのボードを保持するものです.それは
番目のセクションでは、エンドのゲーム結果を発表する責任があります.デフォルトでは、それは空です、そして、我々はJavaScriptからその内容を変更します.
最後のセクションでは、リセットボタンが含まれているコントロールを保持します.
私はCSSのすべての1行を越えることはありませんが、ビデオを見ることができるか、またはproject's GitHub repository.
最初に私は
以来、我々のJavaScriptファイルが含まれて
フィールドのどれかが空ならば、我々はいくらかの最適化をします
ループの後、私たちは
最後に我々はしなければならないタイルをループして、空の文字列に戻ってInnertextを設定し、タイルから任意のプレイヤーの特定のクラスを削除することです.
あなたがどんな点ででも立ち往生するならば、ビデオを見てくださいproject's GitHub repository.
ハッピーハッキング!
私はいくつかのプラットフォームでWeb開発をカバーする教育コンテンツを作成する👀 それらをチェックします.
私も、私が私が作成した週または2週の教育内容を共有するニュースレターをつくります.雄牛なし💩 ちょうど教育内容.
🔗 リンク 🍺 サポートフリー教育buy me a beer
💬 参加するcommunity on Discord
📧 ニュースレターSubscribe here
🎥 YouTube
🐦 Twitter
📷 Instagram
ビデオチュートリアル
あなたが詳細なステップバイステップのビデオを見るならば、あなたは私がこのプロジェクトをカバーしているビデオをチェックすることができます:
HTMLの実装
まず最初に、私たちが後で作成するCSSとJavaScriptファイルを含みます.私はまた、私はこのゲームに最適なフィットだと思うitimと呼ばれるGoogleのフォントを追加します.
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Itim&display=swap" rel="stylesheet">
<script src="./index.js"></script>
background それに.インサイドmain ラッパーは5つのセクションがあります.最初のセクションでは
h1 .番目のセクションでは、そのターンは、現在表示されます.ディスプレイの中には、含まれるスパンがあります
X or O 現在のユーザによって異なります.このスパンにクラスを適用してテキストを色分けします.番目のセクションでは、ゲームのボードを保持するものです.それは
container クラスので、適切に我々のタイルを配置することができます.このセクション内では、ボード内のタイルとして動作する9つのdivを持っている.番目のセクションでは、エンドのゲーム結果を発表する責任があります.デフォルトでは、それは空です、そして、我々はJavaScriptからその内容を変更します.
最後のセクションでは、リセットボタンが含まれているコントロールを保持します.
<main class="background">
<section class="title">
<h1>Tic Tac Toe</h1>
</section>
<section class="display">
Player <span class="display-player playerX">X</span>'s turn
</section>
<section class="container">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</section>
<section class="display announcer hide"></section>
<section class="controls">
<button id="reset">Reset</button>
</section>
</main>
CSSの追加
私はCSSのすべての1行を越えることはありませんが、ビデオを見ることができるか、またはproject's GitHub repository.
最初に私は
style.css ファイルと任意のブラウザー定義のマージンとパドルを削除し、全体のドキュメントのHTMLに含まれるGoogleフォントを設定します.* {
padding: 0;
margin: 0;
font-family: 'Itim', cursive;
}
margin: 0 auto; ..container {
margin: 0 auto;
display: grid;
grid-template-columns: 33% 33% 33%;
grid-template-rows: 33% 33% 33%;
max-width: 300px;
}
justify-content とalign-items to center . 我々はそれに大きなフォントサイズを与え、適用されますcursor: pointer それで、ユーザーはこのフィールドがクリック可能であるということを知っています..tile {
border: 1px solid white;
min-width: 100px;
min-height: 100px;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
cursor: pointer;
}
.playerX {
color: #09C372;
}
.playerO {
color: #498AFB;
}
JavaScript部分の実装
以来、我々のJavaScriptファイルが含まれて
<head> , このイベントハンドラーの間ですべてのコードをラップしなければなりません.HTMLスクリプトがブラウザで解析される前にスクリプトがロードされるので、これが必要です.この機能の中ですべてをラップしたくない場合はdefer スクリプトタグに移動したり、スクリプトタグをbody .window.addEventListener('DOMContentLoaded', () => {
// everything goes here
});
document.querySelectorAll() . 配列が欲しいのですが、この関数はnodelistを返します.したがって、Array.from() . また、プレーヤーのディスプレイ、リセットボタンとアナウンサーへの参照をつかむでしょう.const tiles = Array.from(document.querySelectorAll('.tile'));
const playerDisplay = document.querySelector('.display-player');
const resetButton = document.querySelector('#reset');
const announcer = document.querySelector('.announcer');
currentPlayer それは現在のターンでアクティブなプレーヤーのサインを保持します.The isGameActive 変数がtrueになるまで誰か勝つか、ゲームのネクタイで終了します.残りのタイルがリセットまで不活発になるので、これらのケースで我々はそれをfalseに設定します.エンド・ゲーム状態を表す3つの定数があります.我々は、これらの定数を使用してTyposを避けるために.let board = ['', '', '', '', '', '', '', '', ''];
let currentPlayer = 'X';
let isGameActive = true;
const PLAYERX_WON = 'PLAYERX_WON';
const PLAYERO_WON = 'PLAYERO_WON';
const TIE = 'TIE';
[0, 1, 2] ウィルは、最初の水平線がプレーヤーによって占められるケースを表します.この配列を使用して、勝者かどうかを決定します./*
Indexes within the board
[0] [1] [2]
[3] [4] [5]
[6] [7] [8]
*/
const winningConditions = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
isValidAction 関数は、ユーザが有効なアクションを実行したいかどうかを判断します.タイルの内側のテキストがX or O アクションが無効の場合、falseを返します.そうでなければ、タイルは空です.const isValidAction = (tile) => {
if (tile.innerText === 'X' || tile.innerText === 'O'){
return false;
}
return true;
};
const updateBoard = (index) => {
board[index] = currentPlayer;
}
playerDisplay . 文字列リテラルplayer${currentPlayer} どちらかになりますplayerX or playerO 現在のプレーヤーによって異なります.次に、3進式を使用して現在のプレイヤーの値を変更します.あればX であろうO そうでなければX . ユーザーの値を変更したので、更新する必要がありますinnerText のplayerDisplay 新しいプレイヤークラスを適用します.const changePlayer = () => {
playerDisplay.classList.remove(`player${currentPlayer}`);
currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
playerDisplay.innerText = currentPlayer;
playerDisplay.classList.add(`player${currentPlayer}`);
}
innerText 結果に基づいてアナウンサーDOMノードの.最後の行では、ゲームが終了するまでアナウンサーがデフォルトで隠されているので、hideのクラスを削除する必要があります.const announce = (type) => {
switch(type){
case PLAYERO_WON:
announcer.innerHTML = 'Player <span class="playerO">O</span> Won';
break;
case PLAYERX_WON:
announcer.innerHTML = 'Player <span class="playerX">X</span> Won';
break;
case TIE:
announcer.innerText = 'Tie';
}
announcer.classList.remove('hide');
};
winConditions 配列と各勝利条件のボードを確認します.例えば、2回目の繰り返しでは、これらの値をチェックします.board[3] (a)board[4] (b)board[5] (c)フィールドのどれかが空ならば、我々はいくらかの最適化をします
continue そして、次の繰り返しにスキップします.なぜなら、勝利状態に空のタイルがあれば勝つことはできないからです.すべてのフィールドが等しい場合、我々は勝者を持っているので、我々は真のラウンドウォンを設定し、forループを中断します.ループの後、私たちは
roundWon 変数は、我々は勝者を発表し、非アクティブにゲームを設定します.我々は勝者を持っていない場合は、我々はボード上の空のタイルを持っていると我々は勝者を持っていないと空のタイルが残っていない場合、我々はタイを発表します.function handleResultValidation() {
let roundWon = false;
for (let i = 0; i <= 7; i++) {
const winCondition = winningConditions[i];
const a = board[winCondition[0]];
const b = board[winCondition[1]];
const c = board[winCondition[2]];
if (a === "" || b === "" || c === "") {
continue;
}
if (a === b && b === c) {
roundWon = true;
break;
}
}
if (roundWon) {
announce(currentPlayer === "X" ? PLAYERX_WON : PLAYERO_WON);
isGameActive = false;
return;
}
if (!board.includes("")) announce(TIE);
}
innerText 現在のプレーヤーの記号を持つタイルの、対応するクラスを追加し、ボードの配列を更新します.すべてが更新される今、我々はゲームが終わったかどうか我々が電話するかどうかチェックしなければなりませんhandleResultValidation() . 最後に私たちはchangePlayer 他のプレイヤーにターンを渡す方法.const userAction = (tile, index) => {
if (isValidAction(tile) && isGameActive) {
tile.innerText = currentPlayer;
tile.classList.add(`player${currentPlayer}`);
updateBoard(index);
handleResultValidation();
changePlayer();
}
};
tiles.forEach( (tile, index) => {
tile.addEventListener('click', () => userAction(tile, index));
});
resetBoard 関数.この機能では、ボードを9つの空の文字列から構成され、アクティブにゲームを設定すると、アナウンサーを削除し、プレーヤーに戻るX 定義によってX は常に起動します).最後に我々はしなければならないタイルをループして、空の文字列に戻ってInnertextを設定し、タイルから任意のプレイヤーの特定のクラスを削除することです.
const resetBoard = () => {
board = ['', '', '', '', '', '', '', '', ''];
isGameActive = true;
announcer.classList.add('hide');
if (currentPlayer === 'O') {
changePlayer();
}
tiles.forEach(tile => {
tile.innerText = '';
tile.classList.remove('playerX');
tile.classList.remove('playerO');
});
}
resetButton.addEventListener('click', resetBoard);
あなたがどんな点ででも立ち往生するならば、ビデオを見てくださいproject's GitHub repository.
ハッピーハッキング!
どこから、私はより多くを学ぶことができますか？
私はいくつかのプラットフォームでWeb開発をカバーする教育コンテンツを作成する👀 それらをチェックします.
私も、私が私が作成した週または2週の教育内容を共有するニュースレターをつくります.雄牛なし💩 ちょうど教育内容.
🔗 リンク
Reference
この問題について(を使用して簡単なチックタックトーゲームを作成する), 我々は、より多くの情報をここで見つけました https://dev.to/javascriptacademy/create-a-simple-tic-tac-toe-game-using-html-css-javascript-i4kテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol