ブラウザだけでここまで！　HTML5で作られた「スーパーマリオブラザーズ」がスゴい：日々是遊戯

Flashなどの外部プラグインを使わず、HTML5だけで「スーパーマリオブラザーズ」を再現してしまった人が登場。さらにあの人気ゲームもHTML5に!?

» 2011年08月18日 17時14分 公開
[池谷勇人，ITmedia]
Share'); html.push('XPostPost見る'); html.push('
LINE
LINE'); html.push('
Hatena
Hatena'); html.push('HomeHome'); box.className = 'my_social'; box.innerHTML = html.join(''); wrap.appendChild(box); window.addEventListener('load',function(){ var rel = '',rel_id = ['endlinkConnection','logly-lift-4272841']; for(var i = 0; i < rel_id.length; i++){ if(d.getElementById(rel_id[i])){ rel = '
関連記事
関連記事'; } } box.innerHTML += rel; }); })(document,'my_social_top');

ブラウザゲームの可能性が一気に広がりそうです

　次世代のWebフォーマットとして注目され、徐々にいろんなところで使われはじめている「HTML5」。そんなHTML5で作られた「スーパーマリオブラザーズ」が公開され、話題となっています。

　従来のHTMLに比べ、マルチメディア機能が大幅に強化されたHTML5では、今までのようにFlashなどの外部プラグインに頼らなくても、単体で複雑なゲームなどを動かすことが可能と言われています。今回紹介する「Infinite Mario Bros」も、ベースはあくまでJavascriptで、HTML5の高いポテンシャルを感じさせてくれるものとなっています。当然ながら、ブラウザがHTML5に対応していないと遊べませんので、古いブラウザを使っている人はご注意を。

パッと見はよくあるFlashゲームですが、もちろんFlashは一切使っていません

　操作は方向キーで左右移動、「S」キーでジャンプ、「A」キーでダッシュ。ファイアマリオに変身すれば、もちろんファイアボールを投げることも可能。あと一応カベキック的なこともできたりしますが、たぶんあんまり使いどころはありません。

　普通のマリオとちょっと違うのは、遊ぶたびにコースやマップが自動生成される点。コースの構造はわりと単純ですが、言われなければ自動生成とは気付かないレベルで、これはこれでスゴい気も。ちとジャンプの挙動がクイックすぎる気もしますが、「マリオ度」はなかなかに高く、マリオ好きな人なら普通に楽しめるのではと感じました。

　調べてみたところ、もともとはJavaで作られていたゲームで、オリジナル版はなんとあの「Minecraft」の作者・notch氏の作品。タイトルも同じ「Infinite Mario Bros」で、HTML5版と遊び比べて、違いを探してみたりしても楽しいかもしれませんね。

　なお日本でもつい先日、HTML5で作成された「グラディウス」が公開され話題になりました。こちらは一度非公開になってしまったものの、現在はテクニカルデモという名目で再び復活。現状ではステージ1のみの実装ですが、こちらも再現度はかなり高く、HTML5のスゴさがよく分かる内容となっています。

ステージ1だけとは言え、アーケード版をほぼ完全移植。ブラウザ単体でここまでできてしまうのはスゴい

関連キーワード

HTML5 | マリオ | Flash | 自動生成 | ブラウザゲーム | 日々是遊戯 | プラグイン | 再現 | ラディウス


Copyright © ITmedia, Inc. All Rights Reserved.

'; div_1.appendChild(div); addJS('//widgets.outbrain.com/outbrain.js'); }); })(document,'rm51882_1');
昨日の総合アクセスTOP10
  1. /nl/articles/2501/05/news034.jpg 天皇皇后両陛下と愛子さま、“仲むつまじいショット”　女性皇族「ティアラ」にも注目……　80万いいね
  2. /nl/articles/2501/05/news006.jpg 目からウロコな“ビニール袋のたたみ方”が100万再生　超便利な“裏技”に「こっちの方が絶対いい」
  3. /nl/articles/2501/05/news023.jpg 「目がバグる」　どこからどう見ても“平面”にしか見えない千葉のビルが話題　投稿者にその後を聞いた
  4. /nl/articles/2501/05/news002.jpg “100歳おばあちゃん”の朝食作りに密着したら……驚きの姿と「最高の朝食」に大反響　2024年ねとらぼで読まれた【レシピ記事トップ5】を紹介
  5. /nl/articles/2501/04/news056.jpg 「WEST.」、メンバー結婚発表から“YouTube登録者2万人減”　目標の100万人を突破したばかりだった
  6. /nl/articles/2501/04/news025.jpg サバの腹に「アニサキス発見ライト」を当てたら……？　衝撃の結果に「ゾワっとした」「泣きそう」と悲鳴　その後の展開を聞いた
  7. /nl/articles/2501/05/news001.jpg 幼稚園の「名札」を社会人が大量購入→その理由は……斜め上のキュートな活用術に大反響　2024年に読まれた面白記事トップ5
  8. /nl/articles/2501/05/news033.jpg 「昔はモテた」と話す母→全然信じていない息子だったが……　当時の“異彩を放つ姿”に驚き「わぁ！」「とても魅力的」【海外】
  9. /nl/articles/2501/04/news037.jpg 白髪でやる気がわかなくなった女性、“白髪手術“したら……　“二度見必至な若返り”に「ビックリ」「凄い変わり様」
  10. /nl/articles/2501/03/news005.jpg 「妹が入学式に着るワンピース作ってみた！」→こだわり満載の完成品に「すごすぎて意味わからない」と大反響　2024年に読まれたハンドメイド記事トップ5
先週の総合アクセスTOP10
  1. 東京美容外科、“不適切投稿”した院長の「解任」を発表　「組織体制の強化に努めてまいる所存」
  2. 大谷翔平、妻・真美子さん妊娠公表→エコー写真に“まさかの勘違い”　「デコピン妊娠？」「どう見てもデコピンで草」
  3. 「すごい漢字！」 YouTuberゆたぼん、運転免許証公開　「本名の漢字」に衝撃の声続々
  4. 「麻央さんにそっくり……」 市川團十郎の11歳息子・勸玄の成長ぶりに驚きの声 「大きくなってる！」「すでに貫禄がある」
  5. チェジュ航空社長、日本語で謝罪　犠牲者は170人以上との報道　公式サイトは通常のオレンジからブラックに
  6. 「スマホ入荷しました」　ハードオフ店舗がお知らせ→まさかの正体に大横転　「草しか生えない」
  7. 母「昔は数十人もの男性の誘いを断った」→娘は信じられなかったが……　当時の“想像を超える姿”が2800万再生「これは驚いた」【海外】
  8. 毛糸で作ったお花を200個つなげると……　“圧巻の防寒アイテム”完成に「なにこれ作りたい……!!」「美しすぎる！」と100万再生【海外】
  9. 「思わず泣きそう」　シャトレーゼの“129円クリスマスケーキ”に衝撃　「すごすぎない!?」「このご時世に……」
  10. 「デコピンを抱き寄せたのはもしかして」　妻・真美子さん第1子妊娠発表で大谷翔平の発言と行動に再注目　「“もう帰る？”は気遣っていたのかも」
先月の総合アクセスTOP10
  1. ザリガニが約3000匹いた池の水を、全部抜いてみたら……　思わず腰が抜ける興味深い結果に「本当にすごい」「見ていて爽快」
  2. パパに抱っこされている娘→11年後……　同じ場所＆ポーズで撮影した“現在の姿”が「泣ける」「すてき」と反響
  3. 東京美容外科、“不適切投稿”した院長の「解任」を発表　「組織体制の強化に努めてまいる所存」
  4. ズカズカ家に入ってきたぼっちの子猫→妙になれなれしいので、風呂に入れてみると……　思わず腰を抜かす事態に「たまらんw」「この子は賢い」
  5. 母親から届いた「もち」の仕送り方法が秀逸　まさかの梱包アイデアに「この発想は無かった」と称賛　投稿者にその後を聞いた
  6. イモトアヤコ、購入した“圧倒的人気車”が思わぬ勘違いを招く　スーパーで「後ろから警備員さんが」
  7. 「何があった」　絵師が“大学4年間の成長過程”公開→たどり着いた“まさかの境地”に「ぶっ飛ばしてて草」
  8. フォークに“毛糸”を巻き付けていくと……　冬にピッタリなアイテムが完成　「とってもかわいい！」と200万再生【海外】
  9. 「何言ったんだ」　大谷翔平が妻から受けた“まさかの仕打ち”に「世界中で真美子さんだけ」「可愛すぎて草」
  10. 鮮魚スーパーで特価品になっていたイセエビを連れ帰り、水槽に入れたら……　想定外の結果と2日後の光景に「泣けます」「おもしろすぎ」
'; var div_outer = d.createElement('div'); div_outer.className = 'colBoxOuter'; div_outer.innerHTML = html; var target = (d.getElementById('colBoxCategoryList'))? d.getElementById('colBoxCategoryList') : d.getElementById('colBoxAsideCategoryList'); target.className = 'colBox colBoxCategories'; target.appendChild(div_outer); }; const dataLargeCategory = { "categories": [ { category:"ニュース", categoryid:"341", }, { category:"エンタメ", categoryid:"342", }, { category:"クイズ", categoryid:"343", }, { category:"ゲーム", categoryid:"344", }, { category:"グルメ", categoryid:"345", }, { category:"住まい", categoryid:"346", }, { category:"地域", categoryid:"347", }, { category:"おかね", categoryid:"348", }, { category:"乗り物", categoryid:"349", }, { category:"教育・子育て", categoryid:"350", }, { category:"家電・PC・カメラ", categoryid:"351", }, { category:"就職・転職", categoryid:"https://nlab.itmedia.co.jp/research/category/recruit/", }, { category:"ホビー", categoryid:"353", }, { category:"ファッション", categoryid:"354", }, { category:"動物", categoryid:"355", }, { category:"健康・筋トレ", categoryid:"356", }, { category:"ライフスタイル", categoryid:"357", }, { category:"美容", categoryid:"358", }, { category:"IT・科学", categoryid:"361", }, { category:"カルチャー・アート", categoryid:"381", }, ] }; const arrayNoSmallCategoryList = ["ニュース","クイズ","ゲーム","グルメ","住まい","おかね","家電・PC・カメラ","就職・転職","ホビー","健康・筋トレ","ライフスタイル","美容","dummy"]; var tempCategoryGroupId = document.head.querySelector('[name=categorygroupid]') var flgView = true; if(!!tempCategoryGroupId){ for(var i = 0; i < dataLargeCategory.categories.length; i++){ if(dataLargeCategory.categories[i].categoryid == tempCategoryGroupId.content && arrayNoSmallCategoryList.includes(dataLargeCategory.categories[i].category)){ flgView = false; break; } } } if (d.head.querySelector('[name=categoryid]') && flgView) { var categoryid = d.head.querySelector('[name=categoryid]').content; var json_url = '/include/category/' + categoryid + '/categories.json'; jsonRequest({url:json_url, charset:'Shift_JIS', callback:function(_data){outputCategoryList(_data.json,ini.heading)}}); } else { var data = dataLargeCategory; outputCategoryList(data,ini.l_heading); } })();
アクセスランキング

幼稚園の「名札」を社会人が大量購入→その理由は……斜め上のキュートな活用術に大反響　2024年に読まれた面白記事トップ5

「男に間違われまくったこの写真」　女性レイヤーの姿に「え！？」「えぐい」

辻希美＆杉浦太陽、“新しい家族”が誕生　抱っこし「すくすく大きくなぁれ」

「昔はモテた」と話す母→全然信じていない息子だったが……　当時の“異彩を放つ姿”に驚き「わぁ！」「とても魅力的」【海外】

「目がバグる」　どこからどう見ても“平面”にしか見えない千葉のビルが話題　投稿者にその後を聞いた

5位以下のランキングを見る
昨日のアクセスランキング

天皇皇后両陛下と愛子さま、“仲むつまじいショット”　女性皇族「ティアラ」にも注目……　80万いいね

目からウロコな“ビニール袋のたたみ方”が100万再生　超便利な“裏技”に「こっちの方が絶対いい」

「目がバグる」　どこからどう見ても“平面”にしか見えない千葉のビルが話題　投稿者にその後を聞いた

“100歳おばあちゃん”の朝食作りに密着したら……驚きの姿と「最高の朝食」に大反響　2024年ねとらぼで読まれた【レシピ記事トップ5】を紹介

「WEST.」、メンバー結婚発表から“YouTube登録者2万人減”　目標の100万人を突破したばかりだった

先週のアクセスランキング

東京美容外科、“不適切投稿”した院長の「解任」を発表　「組織体制の強化に努めてまいる所存」

大谷翔平、妻・真美子さん妊娠公表→エコー写真に“まさかの勘違い”　「デコピン妊娠？」「どう見てもデコピンで草」

「すごい漢字！」 YouTuberゆたぼん、運転免許証公開　「本名の漢字」に衝撃の声続々

「麻央さんにそっくり……」 市川團十郎の11歳息子・勸玄の成長ぶりに驚きの声 「大きくなってる！」「すでに貫禄がある」

チェジュ航空社長、日本語で謝罪　犠牲者は170人以上との報道　公式サイトは通常のオレンジからブラックに

先月のアクセスランキング

ザリガニが約3000匹いた池の水を、全部抜いてみたら……　思わず腰が抜ける興味深い結果に「本当にすごい」「見ていて爽快」

パパに抱っこされている娘→11年後……　同じ場所＆ポーズで撮影した“現在の姿”が「泣ける」「すてき」と反響

東京美容外科、“不適切投稿”した院長の「解任」を発表　「組織体制の強化に努めてまいる所存」

ズカズカ家に入ってきたぼっちの子猫→妙になれなれしいので、風呂に入れてみると……　思わず腰を抜かす事態に「たまらんw」「この子は賢い」

母親から届いた「もち」の仕送り方法が秀逸　まさかの梱包アイデアに「この発想は無かった」と称賛　投稿者にその後を聞いた

FEEDBACK