3-3.動かしてみる

作ったゲームはローカル環境でも動かせる

samplejpg

前節までに、15パズルゲームの全てのルーチンを記述しました。このため、本節では動作させてみることにします。

動作確認はサーバーにアップした状態で行うのが確実ですが、ローカル環境でも動作確認は行えます。

サンプルページからコードを取り込む

前節までに記述した内容を纏めると、動作するHTMLファイルを作成できますが、記述するのが面倒な人は以下のリンクからサイト管理者が作成したページを読み込む事が出来ます。

サンプルページを見る

上記のページでは、CSS/JavaScriptの記述もHTMLファイル内で行っているため、ページのソースを取り込めば、必要な記述の全てが得られます。

ただし、画像ファイルについては別途用意しないと、ローカル環境では正しく動作しません。 HTMLファイルのあるフォルダにpicフォルダを作成し、その中に192x192ピクセルの画像を、0.jpg/1.jpg/2.jpg/3.jpgとして保存しておいて下さい。

また、上記コードでは、音声ファイルについては、サイト管理者がインターネットの別サイトに置いているデータにアクセスするようになっているため、自前の音声ファイルを用意した場合には、audio要素の記述を変更して下さい。

ローカル環境で動かす場合の注意点

作成したHTMLファイルは、基本的には、ローカル環境でも動作しますが、前章で説明した通り、Firefox/Chromeでは、デフォルト状態ではgetImageDataメソッドが動作しません。 このため、動作させる前には、前章で説明したオプション指定を行っておく必要があります。

また、2011年1月現在、IE9のβ版では、ローカル環境ではWebストレージ機能がエラーするため、IE9を使用する場合には、localStorageオブジェクトを使っている行はコメントアウトしてWebストレージ機能を利用しないようにしておく必要があります。

動作を確認してみる

HTMLファイルを開くと、最初に一瞬パズル領域が黒くなり、その後、以下のような画像が表示される筈です。 ただし、背景画像はpicフォルダ内の0.jpgを元に作成されるため、別の画像ファイルを使用した場合には、背景画像は異なったものになります。

その状態で、ピースのある位置の何処かをクリックするとピースがシャップルされ、以下のような画像になる筈です。

その後は、移動可能なピースをクリックする毎にピースが移動するようになり、パズルが解けると以下のような画像が表示されます。

この状態でピースをクリックすると、画像が変わり、最初のシーケンスに戻ります。