JavaScriptで簡単に「チェス」ゲームが作れる「chessboard.js」を使ってみた！

公開日：2015/02/03

「チェス」ゲームの制作に特化したJavaScriptライブラリ「chessboard.js」のご紹介！

シンプルな構成になっているので理解しやすく、簡単なコードを書くだけで本格的なチェスが楽しめる素敵なライブラリになっています。

事前準備！

まず、サイトからchessboard.jsの本体をダウンロードし、jQueryも用意しておいてください。

（参考）
「chessboard.js」サイト
「jQuery」サイト

　
最初に用意するHTMLファイルは、以下のとおり！

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>チェスのサンプル</title>
    <link rel="stylesheet" href="css/chessboard-0.3.0.css">
    <script src="js/jquery.js"></script>
    <script src="js/chessboard-0.3.0.min.js"></script>
  </head>
  <body>
    <div id="board" style="width: 400px"></div>	
    <script src="js/game.js"></script>
  </body>
</html>

chessboard.jsをダウンロードしたファイルに入っている「JS本体」と「css」、さらに「jQuery」を最初に読み込んでいます。

あとは、body要素に専用の「divタグ」を設置すれば完了です！

※今回は、「game.js」というファイルを作って、こちらにコードを書いていきます。

使い方！

それでは、早速使ってみましょう！

まずは基本となる「チェスボード」を表示してみます。そこで、「game.js」に以下のコードを書いて実行！

var cfg = {
  position: 'start'
};
 
var board = new ChessBoard('board', cfg);

　
すると、以下のように「チェスボード」が表示されたかと思います！

　
さらに、「cfg」の中へ別のオプションコードを挿入すると…

var cfg = {
  draggable: true, //ドラッグ操作をON
  position: 'start'
};
 
var board = new ChessBoard('board', cfg);

　
なんと、これだけでマウス操作可能なチェスゲームの完成です！

ルールを知っている人同士であれば、対人戦が楽しめるでしょう。

　
このように、コード内へ書いた「cfg」の中に、さまざまなオプションコードを書くだけで、立派なチェスゲームを生成してくれるのです。

（参考）
「オプションコード一覧」

CPU対戦に挑戦！

オプションコードをいじるだけでも楽しめるのですが、別途「chess.js」というライブラリを読み込むことで、CPU対戦も可能なので少しだけ紹介しておきます。

まず最初に、HTMLのhead要素内にchess.jsを読み込んでおきます。

1	<script src="js/chess.min.js"></script>

　
あとは、「game.js」にchess.jsを使ったコードを以下のように書きます。

var board,
    game = new Chess();
 
// ゲームオーバー処理
var onDragStart = function(source, piece, position, orientation) {
	if (game.in_checkmate() === true || game.in_draw() === true ||
			piece.search(/^b/) !== -1) {
	      return false;
	    }
};
 
// CPU処理
var cpuMove = function() {
 var possibleMoves = game.moves();
 
  // ゲームオーバー
  if (possibleMoves.length === 0) return;
 
  var randomIndex = Math.floor(Math.random() * possibleMoves.length);
  game.move(possibleMoves[randomIndex]);
  board.position(game.fen());
};
 
var onDrop = function(source, target) {
  var move = game.move({
    from: source,
    to: target,
    promotion: 'q'
});
 
// 想定外の動きを防止
if (move === null) return
 
// CPU移動
window.setTimeout(cpuMove, 250);
};
 
// ボードの更新
var onSnapEnd = function() {
	board.position(game.fen());
};
 
// プレイヤー処理
var cfg = {
  draggable: true,
  position: 'start',
  onDragStart: onDragStart,
  onDrop: onDrop,
  onSnapEnd: onSnapEnd
};
board = new ChessBoard('board', cfg);

これで、CPU対戦可能なチェスゲームの完成です！

少し複雑ですが、chess.jsで用意されているいくつかの関数を利用しているので、普通にコードを書くよりも遥かにシンプルかと思います。

（参考）
「chess.js関数一覧」

　
また、他にも「CPU VS CPU」とか、駒が行ける範囲をハイライト表示したりなど、多彩なカスタマイズも出来るようになっているので、ぜひ参考にしてみてください！

（参考）
「chess.js連携ガイド」
「chessboard.js公式サイト」

うえぶまなぶ