JavaScript、HTML、および CSS を使用して 2 人用の三目並べゲームを作成する
三目並べは、3×3 のグリッドを使用する人気のあるゲームです。ゲームの目標は、3 つのシンボルを水平、垂直、または斜めの列に配置する最初のプレーヤーになることです。
HTML、CSS、および JavaScript を使用して、Web ブラウザーで実行される三目並べゲームを作成できます。HTML を使用して 3×3 グリッドを含むコンテンツを追加し、CSS を使用してゲーム デザインにスタイリングを追加できます。
その後、ゲームの機能に JavaScript を使用できます。これには、シンボルの配置、プレイヤー間の交代、勝者の決定が含まれます。
Tic-Tac-Toe ゲームの UI を作成する方法
Tic-tac-toe は、プログラミングの方法を学ぶときに作成できる多くのゲームの 1 つです。PICO-8 ゲーム開発エンジンなど、新しい言語や環境を練習するのに最適です。
Web ブラウザーで実行される Tic-tac-toe ゲームを作成するには、ページ コンテンツの HTML を追加する必要があります。次に、CSS を使用してこれをスタイルできます。
- 「index.html」という名前の新しいファイルを作成します。
- 「index.html」内に、HTML ファイルの基本構造を追加します。
<!doctype html>
<html lang="en-US">
<head>
<title>Tic Tac Toe Game</title>
</head>
<body>
</body>
</html> - HTML body タグ内に、各行に 3 つのセルがある 3 つの行を含むテーブルを追加します。
<div class="container">
<table>
<tr>
<td id="1"></td>
<td id="2"></td>
<td id="3"></td>
</tr>
<tr>
<td id="4"></td>
<td id="5"></td>
<td id="6"></td>
</tr>
<tr>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
</tr>
</table>
</div> - HTML ファイルと同じフォルダーに、「styles.css」という名前の新しいファイルを作成します。
- CSS ファイル内で、3 x 3 グリッドにスタイルを追加します。
table {
border-collapse: collapse;
margin: 0 auto;
}
td {
width: 100px;
height: 100px;
text-align: center;
vertical-align: middle;
border: 1px solid black;
} - CSS ファイルを head タグに追加して、HTML ファイルにリンクします。
<link rel="stylesheet" type="text/css" href="styles.css">
ゲームボードにシンボルを順番に追加する方法
ゲームには、「X」または「O」のシンボルを持つ 2 人のプレーヤーがいます。グリッド セルの 1 つをクリックして、「X」または「O」記号を追加できます。これは、いずれかがまっすぐな水平、垂直、または斜めの行を作成するまで続きます。
この機能は、JavaScript を使用して追加できます。
- HTML および CSS ファイルと同じフォルダーに、「script.js」という JavaScript ファイルを作成します。
- body タグの末尾にスクリプトを追加して、JavaScript ファイルを HTML ファイルにリンクします。
<body>
<!-- Your code here -->
<script src="script.js"></script>
</body> - JavaScript ファイル内に、プレーヤーのシンボルを表す文字列を追加します。これは、「X」または「O」のいずれかです。デフォルトでは、最初のプレーヤーが「X」を配置します。
let playerSymbol = "X"; - ゲームが終了したかどうかを追跡する別の変数を追加します。
let gameEnded = false - HTML テーブルの各セルには、1 から 9 までの ID があります。テーブルの各セルに対して、ユーザーがセルをクリックするたびに実行されるイベント リスナーを追加します。
for (let i = 1; i <= 9; i++) {
document.getElementById(i.toString()).addEventListener(
"click",
function() {
}
);
} - イベント リスナー内で、現在のシンボルを表示するように内部 HTML を変更します。JavaScript 条件ステートメントを使用して、最初にセルが空であること、およびゲームがまだ終了していないことを確認してください。
if (this.innerHTML === "" &&! gameEnded) {
this.innerHTML = playerSymbol;
} - クラスを HTML 要素に追加して、グリッドに表示されるシンボルのスタイルを設定します。CSS クラスの名前は、記号に応じて「X」または「O」のいずれかになります。
this.classList.add(playerSymbol.toLowerCase()); - 「styles.css」ファイル内に、「X」記号と「O」記号用にこれら 2 つの新しいクラスを追加します。「X」と「O」の記号は異なる色で表示されます。
.x {
color: blue;
font-size: 80px;
}
.o {
color: red;
font-size: 80px;
} - JavaScript ファイルで、innerHTML を変更してシンボルを表示した後、シンボルを入れ替えます。たとえば、プレーヤーが「X」を配置した場合、次のシンボルを「O」に変更します。
if (playerSymbol === "X")
playerSymbol = "O"
else
playerSymbol = "X" - ゲームを実行するには、Web ブラウザーで「index.html」ファイルを開いて、3 x 3 グリッドを表示します。
- セルをクリックして、グリッドにシンボルを配置し始めます。ゲームでは、「X」と「O」のシンボルが交互に表示されます。
勝者の決定方法
現時点では、プレーヤーが 3 つの連続したシンボルを配置しても、ゲームは続行されます。これを確認するには、毎ターン終了条件を追加する必要があります。
- JavaScript ファイル内に、新しい変数を追加して、3 x 3 グリッドのすべての可能な「勝利」位置を格納します。たとえば、「[1,2,3]」は一番上の行、「[1,4,7]」は斜めの行です。
let winPos = [
[1, 2, 3], [4, 5, 6],
[7, 8, 9], [1, 4, 7],
[2, 5, 8], [3, 6, 9],
[1, 5, 9], [3, 5, 7]
]; - checkWin() という新しい関数を追加します。
function checkWin() {
} - 関数内で、可能な勝利位置のそれぞれをループします。
for (let i = 0; i < winPos.length; i++) {
} - for ループ内で、すべてのセルにプレーヤーのシンボルが含まれているかどうかを確認します。
if (
document.getElementById(winPos[i][0]).innerHTML === playerSymbol &&
document.getElementById(winPos[i][1]).innerHTML === playerSymbol &&
document.getElementById(winPos[i][2]).innerHTML === playerSymbol
) {
} - 条件が true と評価された場合、すべてのシンボルは直線上にあります。if ステートメント内で、ユーザーにメッセージを表示します。「win」という CSS クラスを追加して、HTML 要素のスタイルを変更することもできます。
document.getElementById(winPos[i][0]).classList.add("win");
document.getElementById(winPos[i][1]).classList.add("win");
document.getElementById(winPos[i][2]).classList.add("win");
gameEnded = true;
setTimeout(function() {
alert(playerSymbol + "wins!");
}, 500); - この「win」CSS クラスを「styles.css」ファイルに追加します。プレーヤーが勝つと、勝ったセルの背景色が黄色に変わります。
.win {
background-color: yellow;
} - 前の手順で追加したイベント ハンドラー内で、プレイヤーがターンするたびに checkWin() 関数を呼び出します。
for (let i = 1; i <= 9; i++) {
// Whenever a player clicks on a cell
document.getElementById(i.toString()).addEventListener(
"click",
function() {
if (this.innerHTML === "" &&! gameEnded) {
// Display either "X"or "O"in the cell, and style it
this.innerHTML = playerSymbol;
this.classList.add(playerSymbol.toLowerCase());// Check if a player has won
checkWin();// Swap the symbol to the other one for the next turn
if (playerSymbol === "X")
playerSymbol = "O"
else
playerSymbol = "X"
}
}
);
}
ゲームボードをリセットする方法
プレイヤーがゲームに勝ったら、ゲーム ボードをリセットできます。同点の場合は、ゲームボードをリセットすることもできます。
- HTML ファイルで、表の後にリセット ボタンを追加します。
<button id="reset">Reset</button> - リセット ボタンにスタイルを追加します。
.container {
display: flex;
flex-direction: column;
}
#reset {
margin: 48px 40%;
padding: 20px;
} - JavaScript ファイルで、ユーザーがリセット ボタンをクリックするたびに実行されるイベント ハンドラーを追加します。
document.getElementById("reset").addEventListener(
"click",
function() {
}
); - グリッド内のセルごとに、getElementById() 関数を使用して HTML 要素を取得します。innerHTML をリセットして「O」と「X」の記号を削除し、その他すべての CSS スタイルを削除します。
for (let i = 1; i <= 9; i++) {
document.getElementById(i.toString()).innerHTML = "";
document.getElementById(i.toString()).classList.remove("x");
document.getElementById(i.toString()).classList.remove("o");
document.getElementById(i.toString()).classList.remove("win");
gameEnded = false;
} - 「index.html」ファイルを Web ブラウザで開いてゲームを実行します。
- グリッドに「X」と「O」の記号を配置し始めます。シンボルの 1 つが勝つようにしてください。
- リセットボタンを押してゲームボードをリセットします。
ゲームを作ってJavaScriptを学ぶ
JavaScript でさらに多くのプロジェクトを作成することで、プログラミング スキルを継続的に向上させることができます。JavaScript や HTML などのクロスプラットフォームのオープン テクノロジを使用して、Web 環境で簡単なゲームやツールを簡単に作成できます。
プログラムを書く練習ほど、プログラミングを上達させる良い方法はありません!
コメントを残す