優れたJavascript / HTML5ベースのゲームの例[終了]


37

Flashの大部分がHTML5要素(ビデオ、オーディオ、キャンバスなど)に置き換えられていますが、完全にオープンな標準(Javascript、HTML、CSS)に基づいて構築されたWebベースのゲームの良い例はありますか?かつてFlashにしかなかったもの(http://www.html5rocks.com/など)の純粋なHTML5実装の例はたくさんありますが、多くのゲームはまだありません。私は何が可能か、そして何が制限なのか興味があります。


6
最初の行を削除することをお勧めします-最高評価の回答はあなたの質問に答えませんが、あなたの前提に腹を立てています;)
oberhamsi

回答:


14

HTML5には多くの誇大宣伝がありますが、Flashが大部分はそれに置き換えられていると言っても過言ではありません。ビデオとオーディオのタグは注目を集める可能性がありますが、ゲームは優れたツールとパフォーマンスだけでなく、Swfファイルの配布を中心に構築されたビジネスインフラストラクチャがあるため、長い間待ち望んでいる1つの領域になります。 HTMLとjsに適応します。canvasを使用して見たhtml5ゲームは、おおよそFlashが7年前の場所であり、ie9が十分に広く配布されてcanvasが実行可能なオプションになるまでに、Flashは既に3dおよびハードウェアアクセラレーション機能を計画しています。


12
アドビが彼らの行動を一緒にしなければ、FlashはHTML5に置き換えられ、私は個人的に涙を流すことはありません。
Simurr

@シムリ-私もそう思う。私は彼らのFlexをプロとして使用しており、SunがJavaを管理する方法と比較して、Adobeはもっと多くの...ずさんな(より良い言葉がないため)と言うでしょう。
weiji

2
Adobeが彼らの行動をまとめる必要があることは確かに同意します。ただし、HTML5は明らかに最新の流行語(以前はAJAX、Web2.0など)であり、今すぐ外に出て使用したい実際のテクノロジーではありません。
イアン

1
同意しません。IE5がHTML5テクノロジーを採用しているというマイクロソフトからの最近の発表で、本当に欠けているのはまともなIDEだけです。そして、DreamweaverとVisual Studioの両方の背後にいる人々がまさにそれを理解しようとしていることを保証します。これは早い時期かもしれませんが、これらのテクノロジーの使用を検討し始め、そしてベストプラクティスを確立する時が今です。
ライリーコラディーニ

@シムリはその理由を説明しますか?Adobeは完璧とはほど遠いですが、Flashに対する不当な敵意があるようです(一部の人は、Flashが学校で昼食のお金を盗んだと思うかもしれません)。HTML5の最大の不満は、ブラウザ間の一貫性の欠如、パフォーマンスの欠如であり、JavaScriptのファンではありません(厳密な言語が好きです)
Allan

12

最新のブラウザをどこまで利用できるかを探求するために、私と同僚たちはQuake IIのオープンソースJavaポートをSafari / Chromeにクロスコンパイルしました(ある時点でFirefoxでも動作するはずです、最初はそうではありませんでしたが、主にパフォーマンス上の理由から)。プロジェクトはこちら:http : //code.google.com/p/quake2-gwt-port/

起動して実行するには多少の注意とフィードが必要です(たとえば、WebGLはどの出荷ブラウザでもデフォルトで有効になっていません)が、ここにビデオをアップロードしました:http : //www.youtube.com/watch?v = XhMN0wlITLk(非常に暗いのでごめんなさい-ガンマの問題が残っています)、Google I / Oのトークはこちらでご覧いただけます:http : //code.google.com/intl/fr-FR/events/io/2010/sessions/gwt -html5.html

これらのすべての新しいブラウザー機能(WebGL、WebSocket、オーディオ/ビデオ、ローカルストレージなど)に現実的に依存することができるようになるまでの期間はわかりませんが、それらがすべて揃った場合、大きな違いが生じる可能性がありますゲームをウェブ上で直接出荷する能力。しかし、まだ多くのハードルが残っています(たとえば、MicrosoftがIE10でWebGLを実装するために息を止めないでください)。


1
これは非常にクールなデモですが、技術的には質問に対する答えではありません。彼はWebGLではなくHTML5について尋ねました。2つはしばしば混同されますが、それらは異なります(たとえば、Internet ExplorerはHTML5を実装しますが、WebGLは実装しません。)
jhocking

6

EAのLord of Ultimaは、おそらく私が見た中で最も視覚的に印象的なJavascript / HTMLベースのゲームです。

注:戦略ゲームであり、アクションタイトルではないため、スムーズなスクロールマップが用意されていますが、直接的な対話性が得られる限り、ボタンをクリックする以外に何もありません。


試してみました-かなり印象的です!
ティム・ホルト

あなたが提供するリンクは、ゲームのインデックスに私を連れて行きます。
期限切れの忍者

5

「何が可能か、そして何が制限なのか興味があります。」

制限はブラウザベースです。Webkitナイトリーのようなホットなものを使用している場合、ブラウザがネイティブに実行できないことは基本的にFlashで実行できません。

  • 回転、スケーリング、不透明度などを含む2Dグラフィック(キャンバス経由)
  • 3d(キャンバスおよびWebGL経由)
  • 音声(音声タグを介しますが、現在、それをサポートするブラウザでも使用できません)
  • HTTP(XMLHTTPRequest経由)
  • ローカルストレージ(localStorage API経由)
  • ソケット(Webソケット経由)
  • SVG
  • ビデオ(ビデオタグ経由)

私の知る限り、Google Chromeでも同様のことが可能です(そうでない場合は、まもなく可能になります)。私には完全なゲーム環境のように聞こえます:)

(私は最初のドラフトにこれらすべてのものへのリンクを含めましたが、StackExchangeは私が新しいのでそれらを投稿させません;ごめんなさい!)


すべての機能はありますが、アクセスそれらへの道は、JavaScript、ActionScriptの3と比較して不足している
バートバンHeukelom

どうして?強調してください。
-richtaur

1
ActionScript 3にはクラスがあり、個人的にはプロトタイピングよりも直感的に使用できます。静的型付け(ただし、必要に応じてJSと同じように動的にすることができます)により、パフォーマンスが向上し、オートコンプリートを備えた優れたIDEが可能になり、実行時ではなくコンパイル時に多くのエラーが検出されます。パッケージは、複数のプロジェクトからのコードの混合を容易にします。
バートヴァンヒューケロム

2
これらはすべて主観的な利点であるか、言語自体とは関係ありません
...-Rushyo

1
7:芋、Javascriptが一部は今、大きな問題であるところで、「現在、吸うオーディオ」その良い部分^^のために取らクールで流体言語である
オスカーDuveborn


4

jquery uiの男がjavascript / htmlを使用してAvesと呼ばれるゲームエンジンを構築しています。このビデオでは、開発中に彼が遭遇したいくつかの課題について説明しています。彼は、キャンバスがどれほど遅いか、そして現在は高速化されていないことについてたくさん話しました。

また、Effect Gamesエンジンを使用して開発された多数のゲームを見つけることもできます。エンジンはサイトにかなりサンドボックス化されているように見えますが、すべてのツールとアセットがそこに存在しています。

IMO js / htmlゲーム開発の最大の制限はサウンドです。タグは、safari / firefox / chrome全体でイベントごとに異なる方法で実行されます。これらはすべて最新バージョンでなければなりません。最後に、サファリがMP3でのみ動作し、firefoxがOGGでのみ動作することを確認しました。サーバーサイドロジックのコンボでこれを克服することは完全に実行可能ですが。

私は現在、Flashゲームを書くことに趣味があり、ポータルが受け入れを開始するか、Webアプリストアがオンラインになるまで、そのドメインがHTML5(js / css / html)によって克服されるのを見ることができません。


4

代替テキスト

コントラサウルス

このゲームは、血、汗、涙、およびHTML5を使用して苦労して作成されました。コアマトリックス変換ライブラリはMatrix.jsとしてスピンアウトされました。さらに、コア言語拡張機能、スプライト、サウンド、およびキャンバスライブラリの多くが、The Pixie Game Platformに組み込まれています

フラッシュなし、すべてのHTML5キャンバスおよびオーディオ。Chromeで最適に動作します。


4

あなたは本当にCAATライブラリをチェックアウトする必要があります-それは素晴らしいです!これは、キャンバス用のシーングラフ(例:thing.addchild / thing2.removechild)ライブラリです。

それのこのデモは、そのページに含まれているゲームとともに私を吹き飛ばしました:http : //labs.hyperandroid.com/animation

あまりにも多くのことで、私は自分のゲームを使ってそれを使用するように移行しました。

ドロップイン、マルチプレイヤー雪合戦 http://holiday2010.ogilvy.com

あまりにも多くのことで、私はリラリを改善し、それに追加することを試みました:http ://github.com/onedayitwillmake/CAAT-Hello

githubで入手可能:http : //github.com/onedayitwillmake/CAAT-Hello/tree/circlepack



2

Google Pacmanは、私が見た中で最も印象的なJS / HTMLゲームの1つである必要があります(確かに、私が見た唯一のゲームですが、それでも本当に印象的です:)

ソースコードの場所


3
HTML5ではなく、DHTMLだけです。さらに、サウンドはFlashを介して行われました。これは最大限の互換性を得るためのすべてでした。
イアン



2

Space StrategyゲームのSilverlight / C#から純粋なHTML5 / Javascript / Canvasへの移植を終えました。

Astriarch-星の支配者

これは2Dゲームであり、グラフィカルに非常にシンプルであるため、多くのペイントが行われないため、キャンバスの使用に適しています。そうは言っても、他のより多くのアニメ化されたゲームが同じテクノロジーを使って行っていることに感銘を受けています。ChromeウェブストアのAngry BirdsAngry Birdsのように、他の例については、Chrome Webストアの他のゲームをチェックすることもできます。

ゲームを移植した理由の1つは、JavaまたはObjective Cですべてをコーディングし直さずにタブレット/モバイルデバイスで実行できるようにしたかったことです。iOSとAndroidの両方には、これを簡単にする「WebView」コントロールがありますが、私はそれを使って少しいじくり回すのに苦労しました(私が見た限りでは、iOSはすべてのアセットが1つのフォルダーにある必要があります)。

このタイプのクロスプラットフォーム要件は、一部の人々がFlashからHTML5に移行する正当な理由ですが、欠点は、N個の異なるブラウザーとバージョンでテストする必要があり、一般的なWeb開発に関連するすべての頭痛の種があることです。これらの問題は、jQueryのようなライブラリや、ここで説明した他のHTML5ゲームライブラリ/プラットフォームによって緩和されます(ImpactJSは私が見たことがありますが、試していません)。また、これらの問題は、FireFox 7がリリースされ、IE 9+がより普及した場合にはそれほど問題になりません。

SilverlightからHTML5 Canvasへの移植に直面した問題に興味がある場合は、ブログ投稿をご覧ください:HTML5 Canvasタグを使用したSilverlightアプリのjavascriptへの移植


2

ImpactJSエンジンを使用した3つの優れたゲームを次に示します。

Impactは、デスクトップおよびモバイルブラウザー用の見事なHTML5ゲームを開発できるJavaScriptゲームエンジンです。

現在、HTML5で何ができるかわからない場合は、これらが現在の最良の例だと思います。ただし、これは非常にホットなトピックであるため、フィールドは急速に変化しています。


Zタイプ

入力して撮影するスペースシューティング

バイオラボ

このJump'n'Runで、感染したBiolabで戦いましょう。プラズマガンを使用して、動くすべてのものを撃ちましょう!探検する3つのレベルと戦う6種類の敵があります。

クリーチャーと城

若いトレジャーハンターが中世の城から膨大な量の宝物を盗むのを手伝うアクションパズルゲーム。




0

私が最近偶然見つけた本当に興味深いHTML5開発フレームワークはSenchaです。主にハンドヘルド/タッチデバイス向けですが、数年後にタッチベースにならないものは何ですか?カードゲームを含むいくつかの興味深いデモを次に示します。

http://www.sencha.com/products/touch/demos.php




弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.