Javascript入門。Tic-Tac-Toe(○×ゲーム）Webアプリを作成。 - その１ - 開発のための準備
JavascriptのTic-Tac-Toe(○×ゲーム）Webアプリの作り方を解説!!
こちらの記事でも説明していますが、Javascriptはクライアントサイドのスクリプト言語でブラウザ上で動作します。そのため、HTML,CSS,Javascriptがあれば簡単なゲームを作ってしまうことも可能です。
今回は、Javascript入門として、Tic-Tac-Toeを作りながら、Javascriptの使い方を解説していきます。
Tic-Tac-Toeとは？
今回は、Javascriptの実践入門ということで、Tic-Tac-Toeと言われるといまいちピンとこないかもしれませんが、要は○×ゲームで、3×3のマスに順番に○と×を書いていき、先に○や×を三つ並べたほうが勝ちというゲームです。
今回は実際に作ったものも公開していますので、ぜひこちらから確認してみてください。 https://webnari.github.io/tick-tac-toe/
ソースはこちらです。 https://github.com/webnari/tick-tac-toe
開発の準備
開発に必要なものは
- お気に入りのテキストエディタ
- お気に入りのブラウザ
テキストエディタにはvim,atom,sublime textなどなどあるので、ご自分の趣味にあったエディタを選択しましょう。メモ帳でもプログラミングはできなくないのですが、コードに色がつかず、コードが非常に読みづらい状態になって辛いので、何かしら開発専用のテキストエディタを使用することをオススメします。
HTML/CSSの雛形を用意
今回は、Javascriptのアプリ開発なので、HTML/CSSの雛形はあらかじめ用意しておきます。今回使用するHTML/CSSファイルはそれぞれ一つで足りるので、以下のコードをコピペするなり写経するなりしてファイルを用意してください。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tic Tac Toe</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div class="container">
<div class="content">
<h2 class="content-title">○× Buttle</h2>
<input type="hidden" id="finished" value="false">
<p> Next :</p>
<div class="buttons flex">
<a id="circle" class="btn circle active">○</a>
<a id="x-mark" class="btn x-mark">×</a>
</div>
<h2 id="message" class="message hidden"></h2>
<table class="table">
<tr class="row">
<td id="pannel-1-1" class="pannel">-</td>
<td id="pannel-2-1" class="pannel">-</td>
<td id="pannel-3-1" class="pannel">-</td>
</tr>
<tr class="row">
<td id="pannel-1-2" class="pannel">-</td>
<td id="pannel-2-2" class="pannel">-</td>
<td id="pannel-3-2" class="pannel">-</td>
</tr>
<tr class="row">
<td id="pannel-1-3" class="pannel">-</td>
<td id="pannel-2-3" class="pannel">-</td>
<td id="pannel-3-3" class="pannel">-</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript" src="function.js"></script>
</body>
</html>style.css
.container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 5%;
}
.content-title{
text-align: center;
}
.flex{
display: flex;
}
.btn {
text-align: center;
display: block;
width: 100%;
padding: 1rem;
font-size: 2rem;
}
.circle{
background: red;
border-bottom: 5px solid #de0000;
border-right: 1px solid #ad0101;
color:white;
}
.x-mark{
background: skyblue;
border-bottom: 5px solid #75b2cc;
border-right: 1px solid #6193a9;
color:white;
}
.table{
margin-top: 50px;
}
td {
border-right: 1px solid black;
border-bottom: 1px solid black;
width: 1rem;
height: 1rem;
padding: 2rem;
font-size: 2rem;
}
td:last-child {
border-right: 0;
}
tr:last-child td {
border-bottom: 0;
}
.btn.circle.active{
background: red;
border: 0;
box-shadow: inset 1px 1px 15px grey;
}
.btn.x-mark.active{
background: skyblue;
border: 0;
box-shadow: inset 1px 1px 15px grey;
}
td.pannel.active{
background: #f0f351;
color: white;
}
.message{
color: green;
align-text: center;
}
次回 | クリックして○×を入力できるようにする
上のファイルが作成できたら、index.htmlをダブルクリックで開いてみるか、ブラウザにドラック&ドロップしてみましょう。
正しくファイルを作成できていれば、上にあげたTic-Tac-Toe の画面が出てくるはずです。正しくといっても別に難しいことはないです。上のソースファイルをコピーして、それぞれを同じディレクトリの下にペースとしてあげてください。
Ticこの段階では、Tic-Tac-Toe の画面がでてくるだけで実際に動作はしません。このままではただHTML/CSSで画面を作っただけなので次の記事以降ですこしずつ動的に動くようなアプリの作り方を解説していきます。
次回は、クリックしたらJavascriptのイベントが発火するようなコードを書いて、画面をクリックすることで○×が入力されるようなコードを書いて行きます。
この記事が役に立ちましたらシェアをお願いします。
サイト管理人
Webなり
中小SIer、事業会社のリードエンジニアを経てフリーランスとして独立。 人にやさしいコードがかけるエンジニアを増やすためにWebエンジニアとして 知っておきたい情報を発信していきます。
管理人に関する記事はコチラ:
