どうも、まさとらん（@0310lan）です。
今回は、JavaScriptによる簡単なゲーム作りに挑戦するため、「チェス」をテーマにした開発チュートリアル記事となっています。
「なんだか難しそう…」と思うかもしれませんが、簡単な手順で実現できるJavaScriptライブラリを活用するので誰でも最後まで楽しめると思います。
また、後半には「CPU対戦」機能も組み込んでいくので、チェスやゲーム開発にご興味ある方は、ぜひトライしてみてください！
■必要なファイルを準備しよう！
まずは、チェスの骨組みを簡単に構築する方法として「chessboard.js」というJavaScriptライブラリを使ってみましょう。
【 chessboard.js 】
「chessboard.js」を使うと、チェスで遊ぶための「駒」や「ボード」を簡単にWeb上へ描画することが可能で、駒を動かす際のアニメーションやマウスによるドラッグ&ドロップなどのイベント処理も充実しているのでとても便利です。
まず最初に、サイトへアクセスして必要なファイルをダウンロードしておきましょう！
ファイルの中には、「chessboard.min.css」と「chessboard.min.js」が入っているので、これをHTMLファイルから読み込むようにすればOKです！
<!-- index.html --> <!doctype html> <html> <head> <meta charset="utf-8" /> <title>チェスゲーム</title> <link rel="stylesheet" href="css/chessboard.min.css" /> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="js/chessboard.min.js"></script> <script src="js/game.js"></script> </body> </html>
「chessboard.js」はjQueryをベースに作られているので、一緒に「jquery.min.js」を読み込んでおくのを忘れないようにしましょう。
（「game.js」は、これから作っていくJavaScriptファイルになります）
ちなみに、ダウンロードしたファイルの中に「img」フォルダがあると思いますが、これはチェスの「駒」画像になるので、そのまま「index.html」と同じディレクトリに配置しておきます。
ここまでのフォルダ構造は以下のとおり！
これで必要なファイルが揃ったので、いよいよ「チェスゲーム」の開発に挑戦してみましょう！
■「チェスボード」を作ってみよう！
チェスで遊ぶには「駒」と「ボード」が必要ですが、「chessboard.js」を使って簡単に描画してみましょう！
まずは、HTMLファイルに「ボード」を描画するための領域を「divタグ」で指定します。
<!-- index.html --> <body> <!-- ボードの描画領域 --> <div id="board" style="width: 400px"> <!-- 以下省略 --> </body>
インラインでCSSの「幅（width:400px）」を指定していますが、もちろん外部スタイルシートに記述しても問題ありません。
次に、JavaScriptファイルの「game.js」に、先ほど作った「divタグ（#board）」を指定してボードを描画してみましょう！
// game.js var config = { // チェスの駒を初期位置にする position: 'start' }; // divタグ「board」を指定して「config」を設定する var board = ChessBoard('board', config);
初期設定用のオプション「config」を「ChessBoard()」から参照するだけでOK！
これで、index.htmlをブラウザで開くと立派な「チェスボード」が表示されるはず！
ただし、このままだと駒が表示されるだけで、自由に動かすことができません。
そこで、駒をマウスで自由に動かせるように、先ほどの設定オプション「config」に「draggable」を追記します。
// game.js var config = { position: 'start', // マウスで駒を動かせるようにする draggable: true };
これだけで、駒を自由にドラッグ&ドロップで動かすことが可能になります！
実は、すでに相手の駒を取る動作も可能になっているので、対人戦であればこの状態でも遊ぶことは出来るでしょう。
■「ゲームロジック」を構築しよう！
さて、ここまでのプログラミングで、チェスを遊ぶための骨組みは完成しました。
ただし、今の状態だと「駒」をどこにでも動かせるし、どちらの手番なのかも不明なうえ、ゲームが終了したかどうかの判定もできません。
つまり、チェスという「ゲームロジック」が必要になるのですが、普通にプログラミングすると膨大な時間と労力が掛かってしまいます。
そこで、このロジック部分を提供してくれるJavaScriptライブラリが公開されているので、こちらを利用してみたいと思います！
【 chess.js 】
jQueryと同じく、こちらもCDN経由で手軽に利用することが出来るので、以下のスクリプトをHTMLファイルに追記すれば準備完了です！
<!-- index.html --> <script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.min.js"></script>
「chess.js」を使う上で重要なポイントは、「駒の状態監視」と「駒が動ける場所」を常に把握しておくという点です。
// gameインスタンスを作成 var game = new Chess(); // 駒の状態監視 game.move(); // 駒が動ける場所 game.moves();
それぞれの使い所は以下のとおり！
- 「game.move()」：駒がルールに沿って移動したかどうかを確認する
- 「game.moves()」：相手の動ける駒の場所をすべて配列で取得する
このライブラリと「chessboard.js」と組み合わせることで、手軽にロジックを組み込んだ「チェスゲーム」が構築できるわけです。
そこで、設定オプション「config」に、駒が移動した後のイベント処理を追記します。
// game.js var config = { position: 'start', draggable: true, // 駒が移動した後にonDrop関数を実行する onDrop: onDrop };
「onDrop」を追記することで、駒を移動してボードに置いた瞬間に発動するイベント処理を書くことが出来るようになります。
この時に実行する関数として、「onDrop」を作成します。
// game.js // 関数 var onDrop = function(source, target) { // 処理内容を書く };
「config」に追記した「onDrop」は、引数として「駒を移動する前の位置」と「駒を移動した後の位置」を受け取ることが可能なので、それぞれの位置を「source」「target」に割り当てています。
そして、先ほどご紹介した「game.move()」を組み込むことで、ルールに沿った移動ができているかをチェックし、問題があれば元の位置に戻すようなプログラミングをしていきます。
// game.js var onDrop = function(source, target) { // 駒の移動パターンをチェックする var move = game.move({ from: source, // 移動元の位置 to: target // 移動後の位置 }); // 駒の移動に問題があれば元の位置に戻す if (move === null) return 'snapback'; };
「game.move()」は、駒の移動に問題があったら「null」を自動的に返すようになっているので条件分岐が書きやすいですね。
ちなみに、「null」が返ってくるパターンとしては…、
- ルールで動かせない場所に移動した場合
- 取ることが出来ない駒を取ろうとした場合
- 自分の手番じゃないのに駒を動かした場合
…など。
ゲームを遊ぶ上で最低限のロジックを兼ね備えているので便利です。
また、「game.moves()」は相手の動ける駒の場所をすべて配列で取得できるわけですが、逆に言うと「もう動けない…」という状況になったら配列は空っぽの状態ということになります。
これを利用すれば、ゲームの終了判定も簡単にプログラミングできるのが分かります。
// game.js var playerMove = game.moves(); // 配列の中身が0になったらゲームを終了する if (playerMove.length === 0) { alert('終了'); }
■「CPU対戦」機能を組み込もう！
最後に「CPU対戦」ができる機能を簡易的に組み込んでみましょう！
実は、これまでに学んできた内容で十分に実現できる機能なので、難しい処理を構築する必要はありません。
まず、「CPUプレイヤー」の駒を自動的に動かす方法ですが、すでにご紹介したように「game.moves()」で相手の駒が動かせる場所をすべて配列で取得することが出来るようになっています。
そこで、乱数を使ってこの配列の中から1つ選んで、そこへ駒を移動させるようにしてみましょう！
// game.js var game = new Chess(); // CPUプレイヤーの移動処理 var makeCPUmove = function() { // CPUが動ける場所を変数に代入 var cpuMoves = game.moves(); // 駒が動かせる場所をランダムに1つ選ぶ var randomNum = Math.floor(Math.random() * cpuMoves.length); // 選択した場所へ駒を動かす game.move(cpuMoves[randomNum]); // チェスボードの描画を更新する board.position(game.fen()); }
プログラミングしやすいように、CPUプレイヤーの移動パターンを管理する「makeCPUmove()」という関数を作りました。
中身は単純で、CPUが動ける場所を取得し、乱数を使って次に動く場所を決めて移動するだけの処理です。
ポイントは「game.move()」と「board.position()」の使い方です。
これまで「game.move()」は、ルールに沿った駒の移動ができているかのチェックに使っていましたが、実はボードの位置を指定するとそこへ移動させることも可能です。
また、CPUプレイヤーの駒が移動した後は、一度ボードの描画を更新する必要があるので、「board.position()」を使ってすべての駒を再描画しています。
あとは、自分の駒をボードへ置いた後に、「makeCPUmove()」関数を実行させれば「CPU対戦」機能の完成です！
// game.js var onDrop = function(source, target) { // 一部省略 // CPUプレイヤーの移動処理を実行 makeCPUmove(); };
ぜひ、以下のリンクからチェスゲームを遊んでみてください！
（PCブラウザ推奨）
【 チェスゲーム サンプルデモ 】
■開発シミュレーションプログラミングゲーム「もし次の常駐先が女子エンジニアばっかりだったら」が2016年12月6日（火）から公開！！
paizaでは、開発シミュレーションプログラミングゲーム「もし次の常駐先が女子エンジニアばっかりだったら」の公開を予定しています。
最高の開発現場を作れるかどうかは、あなたのプログラミングスキルと采配次第！2016年12月6日（火）から、ぜひ挑戦してみてください！
※イベントは終了しました。
■まとめ
今回は、「chessboard.js」に画面の描画を担当してもらい、「chess.js」にゲームロジックを任せてみました。
このように便利なライブラリを活用することで、本格的なチェスゲームを短時間で制作することが出来るのでとても便利だと思います。
それぞれの公式ドキュメントには、さらなるカスタマイズ方法も記述されており、ゲームの結果を「FEN形式」で書き出したりも可能なので、ご興味ある方はぜひトライしてみてください！
＜参考＞
paizaは、技術を追い続けることが仕事につながり、スキルのある人がきちんと評価される場を作ることで、日本のITエンジニアの地位向上を目指したいと考えています。
自分のスキルを磨いていきたいと考えている方におすすめなのが「paizaラーニング」。オンラインでプログラミングしながらスキルアップできる入門学習コンテンツです。初心者でも楽しくプログラミングの基本を学ぶことができます。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
