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迷路を歩き回るプログラムの詳しい解説を行っています。英語ではありますが、興味のある方はぜひご一読を。

Tags: HTML/CSS JavaScript Web技術 Web標準 Webブラウザ

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





タグクラウド

クラウド / AWS / Azure / Google Cloud
コンテナ / Docker / Kubernetes
クラウドネイティブ / サーバレス
クラウド障害 / 運用・監視

プログラミング言語 / 開発ツール
JavaScript / Java / .NET / WebAssembly
HTML/CSS / Web標準

アジャイル開発 / スクラム / DevOps / CI/CD
ソフトウェアテスト・品質
ローコード/ノーコード開発

データベース / RDB / NoSQL / 機械学習・AI
Oracle Database / MySQL / PostgreSQL
Office / 業務アプリケーション

ネットワーク / HTTP / QUIC / セキュリティ
OS / Windows / Linux / VMware
ハードウェア / サーバ / ストレージ

業界動向 / 働き方 / 給与・年収
編集後記 / 殿堂入り / おもしろ

全てのタグを見る

Blogger in Chief

photo of jniino

Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。
詳しいプロフィール

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

最新記事10本