HTML5で作られたスーパーマリオブラザースのサイトを発見しました。
ブラウザーはChromeのみのです。



Full Screen Mario -GitHub

他のブラウザーで開くとSorry, this needs Chrome!と出ます。
私の小学生時代はスーパーマリオにあけくれた毎日でした。
このサイトとにかく再現率がやばい!!ワクワクしちゃいますね!

操作はキーボードで行うようです。

■移動
左右の矢印キー or AとD
■ジャンプ
上の矢印キー or W or スペース
■ファイア
Shift
■ポーズ
P
■ミュート
M


仕事中にはやってはだめですよ(笑)
こっそりやりたいときは音を消してミュートで!

ステージも選べるという優れもの。スーパーマリオ好きにはたまりませんね~。
それもこれがHTML5で作られているってどんな仕組みなんだろう。。。


他HTML5で作られたゲームサイトも紹介します。

グラディウス



ステージ1のみですが、アーケード版を完全移植!

移動 : 矢印キー
ショット : Z
ミサイル : X
パワーアップ : C



HTML5であそんでみたクエスト



ドラゴンクエスト風ゲーム。通常のゲームと違って、ローカルの画像をブラウザに直接ドラッグ&ドロップして戦います。

画像がJPEGなら「たたかう」、GIFなら「まほう」、PNGなら「かいふく」といった具合に、ドロップした画像の拡張子によってコマンドが変化。


すっごいですね!ドラクエも好きだった私には感動です。

パックマン



なつかしい!パックマン。とてもスムーズに動きます、操作性抜群です!
※Firefox推奨

テトリス



誰もが一度は遊んだことがあるであろうタイトル!

←、→で移動
↑で回転
↓で落とします



本当にWEBはどんどん進化していますね。HTML5の勉強をするのにソースを見るのもいいですね!

この記事を書いた人

横山 裕子WEBデザイナー

1977年 岐阜県岐阜市生まれ チラシ、パンフレット等のDTP業務を経験後、WEBデザイナーに転向。 現在までに累計400以上のWEBサイト制作を手がけた伝説のWEBデザイナー。スピード、センスともに一流である。