Happy Elements Labs: websocket + HTML5(canvas)でのゲーム開発(ボンバーマン風)
はじめに エンジニアの@ryooo321です。 よろしくお願いします。 Happy Elements株式会社では勉強会が活発に行われており、 その中の1つに「1.5時間で○○を作る」エンジニア向けワークショップがあります。(毎週開催@京都) ※ ○○は毎週かわり、設計/実装方法などは自由です。 今回はワークショップ2回(計3時間)で作成したボンバーマン風ゲームの紹介を通して、 他人とリアルタイムで遊べるゲームの可能性を感じていただければと思います。 ※ 技術的にはwebsocket、canvasを利用 ※ ライブラリ/ツールとしてNode.js、CreateJS、socket.io、coffeescriptを利用 ※ 急いで作ったのでほとんどリファクタリングされていませんmm また、おまけとして サーバーサイドでのcanvas描画とwebsocketでのバイナリメッセージについて 試してみ
表現力の高さに驚き。HTML5/Canvasグラフライブラリ·Flotr2 MOONGIFT
Flotr2はHTML5/Canvasを使ったグラフ描画ライブラリです。 これまでグラフと言えばFlashや画像出力が多かったですが、HTML5が使われるようになったことでぐっと表現力の高いグラフをWeb標準の技術で実装できるようになっています。その表現力を知るのにお勧めしたいのがFlotr2です。 たくさんのサンプルが用意されています。一気に紹介します。 線グラフです。 途中で途切れた曲線のグラフも描けます。 棒グラフです。 マウスオーバーで値を表示できます。 積み上げグラフです。 円グラフです。 レーダーチャート。 範囲グラフ。 ローソクチャートです。 滑らかな曲線のグラフです。 マウスオーバーでグリッドが表示されます。 マウスズームのデモです。 マウスで一部の範囲を指定できます。 折れ線グラフです。 マイナスの値にも対応。 クリックでリアルタイムにグラフを描きます。 画像ダウンロード
第4回 Camera API/HTML5 Canvas/プラグインを利用したカメラアプリを作ろう | gihyo.jp
前回はPhoneGapを支える各種APIの紹介と、jQuery Mobileを用いたメモ帳アプリを実際に作成するところまでを紹介しました。本連載最終回となる今回は、実機でのテストをするまでの手順と、Camera APIとHTML5 Canvas、PhoneGapプラグインを使ったカメラアプリケーションの作成方法を紹介しましょう。 ユニバーサルアプリのビルド方法、実機テスト準備、外部プラグインの導入手順 今回はPhoneGapのCamera APIを使って、簡単なカメラアプリケーションを作成してみましょう。今回実装するカメラアプリの要件は次のとおりです。 iPhone/iPadのユニバーサルアプリケーションであること iPhone/iPadともに横向き（Landscape）利用を前提とする カメラで写真を撮るか、アルバム内の写真を選択する 選択した写真に対して「グレースケール」「セピア」の
HTML5のCanvasを使ったパターン背景を簡単に作成出来るWebサービス・Patternizer - かちびと.net
珍しいなぁと思ったのでメモがてらご紹介です。 HTML5のCanvasを使用してパターン背景を 生成出来る、というWebサービス。線を描いて 数枚重ね、パターンのような背景を作成する ことが出来ます。まだ実用段階とは行きません けど。 簡単にHTML5製の背景を作成出来るジェネレーターです。Canvasは非プログラマーにとっては若干ハードルが高い印象ですので、この手のジェネレーターで使い方を覚えていくのもいいかもしれません。 こんな感じ。線の太さ、角度などを調整し、複数の線の連続を重ねてパターンを生成します。 使い方はこんな感じ。直感で分かるんじゃないですかね。 使い方 まず、patternizer.jsというスクリプトを読み込みます。 <script src="js/patternizer.js"></script> で、マークアップ <canvas id="bgCanvas"></ca
Google Chart APIを使えない場合に。Canvasタグで互換グラフを描く·Yokul MOONGIFT
YokulはCanvasタグを使ってGoogle Chart API互換のグラフを描くJavaScriptライブラリ。 YokulはJavaScript/HTML5製のオープンソース・ソフトウェア。Webサービスで工数がかかりやすいのがグラフの表示だ。システムから得られるデータを使って動的に変化させるため作るのが大変だ。そんな中、よく使われるのがGoogle Chart APIだ。 サンプル Google Chart APIを使えば画像ベースのグラフが簡単に作成することができる。しかし場合によっては外部にデータを渡すために利用できないかもしれない。そんな時に使えるのがYokulだ。 YokulはGoogle Chart API互換のグラフライブラリだ。さらに面白いのがサーバサイドの仕組みを用いないことだ。つまりCanvasタグを使ってJavaScriptだけでグラフを描くのだ。使い方も簡単
10 Great HTML5 Web Based Apps For Designers
HTML5 is a popular among developers and designer. It is a new web technology lead by Apple. It is weapon for designer in creating new innovative web based apps. There are many tools out there for designers and developers, but getting by free and good ones is not that easy. I tried to get 10 best web based html5 tools for all developers. Hope you will like it. DeviantART muroThis is a HTML5 based a
ヒートマップが描画できるHTML5 canvasベースのJSライブラリ「heatmap.js」:phpspot開発日誌
heatmap.js | HTML5 Canvas Heatmap Library ヒートマップが描画できるHTML5 canvasベースのJSライブラリ「heatmap.js」。 ユーザのマウス位置をヒートマップという形で表示してサイトの利用方法を解析する方法がありますが、そのヒートマップを描画できるライブラリが公開されています。 取得されたデータを元にヒートマップを描画できるのは当然ながら、マウスを動かしてリアルタイムにブラウザに描画されるデモも一見の価値があります サイト上の以下のボタンを押しましょう。 リアルタイムでヒートマップが描画されます。Chromeだととってもなめらか アクセス解析的な利用はモチロンのこと、何か他のものにも使ってみると面白い効果が得られたりするのかも。 関連エントリ クリック位置のヒートマップを作成できるオープンソースやサービス色々
HTML5 Canvasでランダムに図形を描く jCanvas版 - jsdo.it - Share JavaScript, HTML5 and CSS
http://jsdo.it/TFujinami/CanvasRandomDraw のjCanvas版です。 画面をクリックすると線→四角→丸でローテーションします。 jCanvas http://dothtml5.com/archives/20110511_jcanvas.html ノーマル版 http://jsdo.it/TFujinami/CanvasRandomDraw EaselJS版 http://jsdo.it/TFujinami/CanvasRandomDrawEaselJS Gury版 http://jsdo.it/TFujinami/CanvasRandomDrawGury Raphael (SVG) 版 http://jsdo.it/TFujinami/SVGRandomDrawRaphael CSS版 http://jsdo.it/TFujinami/CSSRand
高度なゲームも作れる。HTML5/Canvasフレームワーク·CasualJS MOONGIFT
CasualJSはCanvasタグを使ったアニメーション/ゲーム作成用JavaScriptフレームワーク。 CasualJSはJavaScript/HTML5製のオープンソース・ソフトウェア。JavaScriptはHTML5の登場によって大きく花開こうとしている。位置情報の利用、ストレージ、WebSocket（今は切り離されているが）、Canvasタグ等様々な新技術が盛り込まれている。 ボタン Canvasタグを使うことで、アニメーションを行ったりグラフィックを描くことができる。それもJavaScriptからインタラクティブに扱えるものだ。だが全てを作り込むのは大変だ。そこで使ってみたいのがCasualJSというJavaScriptフレームワークだ。 CasualJSはHTML5のCanvasを利用するためのフレームワークだ。ActionScript3ライクという説明がついている通り、アニ
HTML5/Canvasによる妙技。クライアントサイドで画像にイフェクト·CamanJS MOONGIFT
CamanJSはCanvasタグを使いクライアントサイドで画像にイフェクトを施すライブラリ。 CamanJSはHTML5/JavaScript製のオープンソース・ソフトウェア。オンラインで画像を扱うケースは多々ある。ユーザ向けのWebサイトで画像をアップロードしてもらうといったこともあるだろう。画像はテキスト以上のインパクトがあるので使いどころを考えればとても便利だ。 動的にイフェクト アップロードされた画像をそのまま使っても良いが、多少加工したいと思うときもあるだろう。そうなると突然面倒になる。サーバサイドで画像を加工を行うとなるとImageMagick等をインストールしなければならない。だが簡単な加工ならばCamanJSを使う手もある。 CamanJSはクライアントサイドで画像加工を行うJavaScriptライブラリだ。画像の描画にはCanvasタグを使っている。出来る加工は限られるが
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 Coding assessment test - jsdo.it
HTML5 Canvasでランダムに図形を描く Processing.js版 - jsdo.it - Share JavaScript, HTML5 and CSS