HTML5で書かれた「スーパーマリオ」みたいなゲーム

2009年11月25日

HTML5の目玉機能の1つにCanvasタグがあります。このCanvasタグとJavaScriptを使ってWebブラウザで遊べるゲームが少しずつ登場してきたので、いくつか紹介しましょう。HTML5がどんなポテンシャルを持っているのか、その一部が楽しく分かると思います。

1つめはスーパーマリオみたいなゲーム。ブログ「PurpleFloyd's Blog 」のエントリ「 A Platform Game Using HTML5 Canvas 」で紹介されていました。

fig HTML5で作ったスーパーマリオみたいなゲームの画面

遊び方は、カーソルキーで主人公を左右に移動、スペースキーでジャンプです。音は出ませんしスコアも計算しません。Internet Explorer 7/8では「耐え難いほど遅い」そうですので、プレイはFirefoxなどでどうぞ。

もう1つのゲームは、Google Chromeの高速性やとHTML5のデモンストレーションのためにグーグルが公開している「Chrome Experiments」で公開されいてる「JS WARS」という横スクロールシューティングゲーム。

fig HTML5で作ったゲーム「JS WARS」の画面

スペースキーでスタート、操作はカーソルキーとスペースキーです。エスケープキーで一時停止します。

3つ目に紹介するのはゲームとしては遊べませんが、Canvasでここまでできるのか、という例。3D迷路の中を動き回って銃を撃ちまくる、一人称視点のシューティングゲーム「Canvascape - "3D Walker"」です。敵は出てきません。

fig HTML5で作ったゲーム「3D-Walker」の画面

これは有名なcanvasを使ったデモのバリエーションの1つですから見たことがある人も多いかもしれませんね。これを進化させると、WebブラウザでDOOMのようなゲームが遊べるようになるのでしょうか。

オペラのWebサイトには「Creating pseudo 3D games with HTML 5 canvas and raycasting」という記事で、この3D迷路を歩き回るプログラムの詳しい解説を行っています。英語ではありますが、興味のある方はぜひご一読を。

このエントリーをはてなブックマークに追加
follow us in feedly

タグ : HTML5 , JavaScript , Webブラウザ , Web標準



≫次の記事
Perl5とPerl6は同じ血統ではない、Perlは2つの系統へ
≪前の記事
企業向けのサービスに特化し続ける、セールスフォースのクラウド戦略

Loading...

Blogger in Chief

photo of jniino Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。新しいオンラインメディアの可能性を追求しています。
詳しいプロフィール


Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed



Publickey 最新記事 10本

Publickey Topics 最新記事 10本


PR - Books


fig

fig

fig

fig



blog comments powered by Disqus