1-1.単純なゲームで遊んでみる

サンプルは単純な方が判りやすいが、単純すぎると役には立たない。

samplejpg

HTML5に対する世間の関心は高く、既にインターネットにはHTML5で書かれたサンプルページが沢山あります。 それらの中にはゲームサイトもあり、多くのサイトでは「HTML5でここまで出来る!」という事を強調するために、ゲームの作りはゴージャスになっています。

しかし、それらのゲームがゴージャスな事とHTML5で書かれている事とはあまり関係はありません。 ゲーム作りの参考にしたい場合には、もっと単純なプログラムの方が判りやすい分、便利です。

ただし、インターネットにはHTML5の機能を紹介した単純なサンプルコードも多数アップされていますが、それらを見てもゲーム作りにはあまり役には立ちません。 ゲーム作りの中で、それらがどう使えるか、という事が示されていないからです。

本節では、サイト管理者が作成した幾つかの単純なゲームを紹介しつつ、HTML5で何が出来るのかを見ていきます。 なお、以下のゲームはスマートフォンやタブレットデバイスには対応させていませんので、参照する場合には、PC/Macを使用して下さい。

テーブルテニス




画像をクリックするとサイト管理者が別サイトで公開している「テーブルテニス」ゲームが別ウインドウ/タブで開きます。



【注目点】

このゲームでは画像を表示するために画像ファイルを一切使っていません。 従来のHTMLでは、画像を表示するためにはimg要素で画像ファイルを指定する必要がありました。しかし、HTML5ではJavaScriptを使って画像を生成できるようになったため、画像ファイルを使用しなくても画像表示が行えるようになりました。

また、このゲームでは効果音も出ています。 従来のHTMLでは音声を再生するためには特殊な埋め込みオブジェクトを使用する必要がありました。しかし、HTML5では互換性が高い形で、簡単に音声を再生できるようになりました。

月面着陸ゲーム




画像をクリックするとサイト管理者が別サイトで公開している「月面着陸ゲーム」が別ウインドウ/タブで開きます。



【注目点】

このゲームでは「テーブルテニス」よりも複雑な図形を表示しています。 このため、1フレーム分の画像表示のために、数百の描画コマンドを実行しています。しかし、処理はさほど重くはありません。

HTML5で作成するアプリはネイティブアプリと比べると性能面では劣ります。しかし、簡単なゲームなら、十分な速度で遊べるものが作れます。

小惑星撃退ゲーム




画像をクリックするとサイト管理者が別サイトで公開している「小惑星撃退ゲーム」が別ウインドウ/タブで開きます。



【注目点】

前出の2つのゲームはモノクロ表示でしたが、このゲームはカラー表示です。 また、このゲームではBGMが流れ、再生音量が異なる幾つかの効果音が同時に再生されます。

HTML5ではフルカラーの画像をプログラムで生成して表示できます。また、音声ファイルの繰り返し再生や、ボリュームの変更、同時再生が行えます。

ブロック崩し




画像をクリックするとサイト管理者が別サイトで公開している「ブロック崩し」ゲームが別ウインドウ/タブで開きます。



【注目点】

このゲームは前出の3つのゲームと比べると見栄えがちょっとクールです。 前出のゲームでは画面表示は線が基本でしたが、このゲームではグラデーションが施された四角形が基本です。

HTML5にはグラデーション表示が簡単に行えるメソッドが用意されています。また、プログラムで作成した画像を保持しておき、指定した四角形の領域に描画できるメソッドも用意されています。

フリーセル




画像をクリックするとサイト管理者が別サイトで公開している「フリーセル」ゲームが別ウインドウ/タブで開きます。



【注目点】

このゲームでは前出のゲームとは異なり、トランプの表示用に画像ファイルを読み込んで使用しています。 しかし、トランプ数分の画像ファイルを使用している訳ではありません。

HTML5では画像ファイルに簡単な操作を施して表示する機能があります。また、HTMLファイルに表示用以外の描画領域を設定しておけば、その領域をワーク領域として画像を作成後、表示用領域に表示することもできます。

神経衰弱ゲーム




画像をクリックするとサイト管理者が別サイトで公開している「神経衰弱」ゲームが別ウインドウ/タブで開きます。



【注目点】

このゲームでは「フリーセル」と同一のトランプ画像を表示しています。 しかし、トランプ移動時の表示方法を変更しているため、トランプ移動中の表示負荷は軽くなっています。

HTML5では同一領域にz-indexを変えた複数の表示領域を持たせる事でレイヤーみなしの処理が行えます。レイヤーを使うと必要な部分のみを再描画できるようになるため、表示処理のオーバーヘッドを減らせます。

スピードレーシング




画像をクリックするとサイト管理者が別サイトで公開している「スピードレーシング」ゲームが別ウインドウ/タブで開きます。



【注目点】

このゲームでは背景画像は各フレームの表示毎にスクロールしていきます。 しかし、各フレームの表示タイミングで背景画像を再度生成している訳ではありません。

HTML5には既に描画されている画像を取り込むメソッドが用意されています。このメソッドを利用すると、画像の表示位置の変更やスクロール処理も行えます。

15パズル




画像をクリックするとサイト管理者が別サイトで公開している「15パズル」ゲームが別ウインドウ/タブで開きます。



【注目点】

このゲームではパズルの図柄として20枚の写真を使用しています。 しかし、読み込んでいる画像ファイルは一つだけです。

HTML5には読み込んだ画像ファイルの指定領域のみを表示できるメソッドが用意されています。また、表示した画像の指定領域のみを取り込み、加工した上で、別の領域に表示することも出来ます。

三次元迷路ゲーム




画像をクリックするとサイト管理者が別サイトで公開している「三次元迷路ゲーム」が別ウインドウ/タブで開きます。



【注目点】

このゲームではマップ表示は迷路画像と同一領域に対して行われます。 しかし、マップの背景は半透明になっているため、マップを表示させても臨場感を損ないません。

HTML5では前出のようにレイヤー見なしの処理が行えます。また、各レイヤーの描画時には透明度を指定することができます。 このため、半透明描画を上手く使えば、臨場感を損なうことなく、情報ウインドウ等をメイン画像上に表示できます。

まとめ

HTML5を使うと、画像データをプログラムで生成して表示できるようになります。 また、画像ファイルを読み込み、その画像を加工した上で表示することもできます。

音声再生に関しても、標準でサポートされるようになったため、特殊な埋め込みオブジェクトを使用することなく、互換性の高い形で再生が行えます。 また、ループ再生、複数音源の同時再生、ボリューム調整も行えます。

HTMLページの同一領域にz-indexを変えた複数の画像領域を定義しておくと、メイン表示領域以外をワーク用やレイヤー的な目的のために使用できます。 また、表示色には透明度も指定できるため、半透明画像を様々な効果用に利用できます。