HTML5でゲームを作りたい時に参考になりそうな記事のメモ - もとまか日記
先日以下を書いたところ、 HTML5でスマホアプリを作ってみよう。第１回「じゃんけんゲーム」 あまり深く考えず「第１回」ってしちゃってたので(^^;;何かネタを考えないといけないなー・・・・ てことで、HTML5のCanvasを中心に、その他もろもろ、ゲーム作成に関連しそうなことについて色々調べてみたメモ。 HTML5全般について以前、以下でまとめた。前から気になってたHTML5について色々調べてみました この内容もまた整理し直さないと・・・ HTML5 Canvasの基礎HTML5のCanvasに関する基礎情報。Canvas - Canvasとは - HTML5.JP HTML5 CanvasのリファレンスCanvasリファレンス - HTML5.JPHTML5 Canvas Cheat Sheet 様々なゲームの作り方AppStoreのカテゴリ別だけど、JavaScriptが多いので参
HTML5でスマホアプリを作ってみよう。第１回「じゃんけんゲーム」 - もとまか日記
以前から書いてる、以下の開発向け簡単チュートリアル。 iPhoneアプリを作ってみよう（Xcode4編）第１回：じゃんけんゲーム 今回は、これをHTML5のCanvasで作ってみました。 で、ついでにチュートリアル的な内容を書いてみたメモ。 前提条件 前提条件として、ある程度HTML等が分かる人向け、という感じです。また、レンタルサーバの利用等についても割愛です。 その辺の詳細な説明は省いてるのでご了承ください。 HTML5の基礎情報 以前、以下でまとめました。 前から気になってたHTML5について色々調べてみました HTML5のスマホアプリの基本構成 ここから本題のコーディング。今回使う、スマホアプリ向けの基本となるHTMLは以下です。 html> head> meta name="viewport" content="width=device-width, initial-scale
リッチなHTML5コンテンツのためのフレームワーク「CreateJS」が公式サイトを公開 | ClockMaker Blog
Flashのエンジニアとして著名なGrant Skinner氏が開発している、「CreateJS」の公式サイトがオープンしました。 http://www.createjs.com/ CreateJSはHTML5を介してリッチなインタラクティブコンテンツの制作をサポートする、JavaScriptライブラリとツールのスイートです。CreateJS SuiteにはEaselJS、TweenJS、SoundJS、PreloadJS、とZoeのツールがあります。 私のブログでもEaselJS、TweenJSを使ったインタラクティブコンテンツのデモを幾つか制作して紹介してきましたが、Flashで培われた技術がそのまま利用できる点で非常に使い勝手のいいツール群だと思っています。 EaselJSとTweenJSでテキストエフェクト EaselJSを使った流体パーティクル入門 今回は公式サイトで明らかになっ
ActionScript入門Wiki - Arctic.js
AS3ライクに記述できるJavaScriptゲームライブラリです。(ライセンスはMIT License) ダウンロード - https://github.com/DeNADev/Arctic.js <html> <head> <script type="text/javascript" src="js/arctic.js"></script> <script type="text/javascript" src="js/game.js"></script> </head> <body> <canvas id="canvas"></canvas> </body> </html> (function() { // arcGameクラスを継承したメインクラス var Main = arc.Class.create(arc.Game, { // コンストラクタ(必要なら引数を指定) initial
rails3 + html5 canvasでお絵かき投稿サイトを作ろう！
はじめましてこんにちは。 KRAYアルバイトの浅海です。 html5のcanvasを使ってお絵かき投稿サイトを作ってみようと思います。 初めてブログ記事を書くということで気合が入りました。 ちょっと長めですがお付き合い下さい。 機能 お絵かき投稿サイトの必要最低限な機能って？ ざっと下のような機能を入れてみます。 絵を描ける 絵を消せる 描画を一回分戻れる 線の太さを変えられる 線の色を変える 絵を投稿できる 投稿された画像の一覧を表示できる → 完成見本はこちら完成見本の公開は終了致しました。 絵を描ける HTML5のcanvasにマウスの軌道に線を引いていくわけです。 canvasでのマウス軌道の描き方は、 ・mousemoveイベント発生時に点をプロット という手段が真っ先に思い浮かぶと思いますが、これは、以下の様になります。 これではお話になりません。 なので、点ではなく線を引くこ
jQueryを使ってWordPressの投稿エディターで、HTML5のタグを一応使えるようにする
さて、今日から3連休ですかね。無関係な 僕は普通に記事書きます。最近、HTML5製 のWebサイトも珍しくないくらい増えてき ました。このブログでも何度もHTML5製の WordPressテーマをご紹介していますが、 投稿時にタグを手打ちするのは極めて面倒 なのでちょっと強引に使えるようにします。 まぁ強引かどうか分かりませんけど現状不便なのと仕事で使うわけではないので、使えればいいんじゃない？みたいなノリで含めてみます。いずれエディター側で普通に対応すると思うのでそれまでの間に合わせですかね。 実装 こんな感じで。あんまりスマートでは無いですけどｗ追加したいタグをselectから選択すれば投稿エリアに反映されます。ただし、反映させるだけで、ドラッグで囲って・・・みたいなことは出来ません。 AddQuicktagというプラグインなら追加も余裕なんですが、他の用途で使っていてこれ以上タグが増
21 Incredible HTML5 Experiments - SpyreStudios
Today we have a collection of some incredible and impressive HTML5 canvas and java-script experiments. Enjoy! Coil Google Gravity Canvas ribbon & iOS4.2 device orientation Sketch 404 BreakDOM Move. Pick Up. Drop Fight or Flight? (HTML5 game) Make3D: Native Drag & Drop in browser FlowerPower Conductor Z type webGL water Fish Tree HTML5 logo Test Canvascycle Asteroids – HTML5 Canvas and JavaScript g
JavaScript最新動向 〜WebSocket編〜
Dev fest 2020 taiwan how to debug microservices on kubernetes as a pros (ht...
HTML5のCanvasを使ったパターン背景を簡単に作成出来るWebサービス・Patternizer
珍しいなぁと思ったのでメモがてらご紹介です。 HTML5のCanvasを使用してパターン背景を 生成出来る、というWebサービス。線を描いて 数枚重ね、パターンのような背景を作成する ことが出来ます。まだ実用段階とは行きません けど。 簡単にHTML5製の背景を作成出来るジェネレーターです。Canvasは非プログラマーにとっては若干ハードルが高い印象ですので、この手のジェネレーターで使い方を覚えていくのもいいかもしれません。 こんな感じ。線の太さ、角度などを調整し、複数の線の連続を重ねてパターンを生成します。 使い方はこんな感じ。直感で分かるんじゃないですかね。 使い方まず、patternizer.jsというスクリプトを読み込みます。 <script src="js/patternizer.js"></script>で、マークアップ <canvas id="bgCanvas"></canv
画像無しでアーガイルやタータンチェックなどのパターンを生成する -Patternizer
[ad#ad-2] 生成したパターンの利用方法 ページに利用する際は、下記のように記述します。 外部ファイル 「patternizer.js」を外部ファイルとして指定します。 <script type="text/javascript" src="patternizer.js"></script> HTML ページ内に空のcanvas要素を配置します。 <canvas id="bgCanvas"></canvas> <div class="wrapper"> <div class="content-wrapper"> <!-- Content here --> </div> </div> CSS 背景を固定表示にするために「position: fixed;」を指定し、コンテンツは「position: absolute;」と「left: 0px;right: 0px;」を指定します。 #bg
PNGを解析してJavaScriptでPNGを描く·png.js MOONGIFT
png.jsはJavaScriptを使ってPNGを解析し、その結果をCanvasタグにレンダリングするライブラリ。 png.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。Web上で扱われる画像のフォーマットと言えば、GIF/JPEG/PNGだ（WebPもあるか）。個人的な主観としてGIFはアニメーションやアイコン、JPEGは写真やサイズの大きな画像、その中間がPNGに向いていると感じている。 レコード画像を描く 写真を取り扱うサイトでは、そのメタデータを解析して撮影した機種や撮影場所、露出といったデータをEXIFから得ている。同様のPNGを解析するJavaScriptライブラリがpng.jsだ。 png.jsはPNGをJavaScriptで解析し、その結果をCanvasタグを使って画像として表示する。つまり表示されるのはPNG画像であり、単純にWebブラウザでim
『canvas』要素の勉強をする時の参考サイトまとめました | HTML5でサイトをつくろう
HTML5の『canvas』要素 今回の標題でもあるcanvas要素は、HTML5の新要素の中で最も注目されている要素の1つなので、私もこれから学習していくのがとても楽しみです。 まずcanvas要素について知るために参考サイトを見つけることから始めました。調べるとすぐにサンプルなどが数多くヒットし、その中には目を奪われる表現や複雑な処理を行っているモノがいくつもありました。また、サンプルは非常に多いのですがちゃんとしたサイトでの事例はまだまだ少ないのが現状だということも知ることができました。まずは焦らず基礎から勉強していこうと思います。 『canvas』要素のサンプルまとめ 今回調べた『canvas』要素を使ったコンテンツをいくつかピックアップしましたのでご紹介します。 HTML5 Canvas and Audio Experiment 音楽に合わせて複数のオブジェクトが円になったり、マ
HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル:phpspot開発日誌
Create a page flip effect with HTML5 canvas | Tutorial | .net magazine HTML5で超リアルなページめくり効果を実装するチュートリアルとサンプル。 canvasなんかも活用しつつ次のようにリアルに実現できちゃってます。Chromeなんかでは超なめらかでした。 Flashじゃなくてもできちゃうんですね。 ライブデモ 実装のためのコードがチュートリアル形式で解説されていますが、このテクニックは色々と使えそうですね。 関連エントリ CSS3を使った驚きのデモいろいろ２５種類 画面をスワイプさせてページ送りができるWordPressプラグイン「iPad Swipe」 iPadのブラウザ上で電子書籍風のめくる操作を可能にするJavaScript
[JS]ページの全体像を分かりやすくビジュアル化するスクリプト -jQuery.fracs
デモページ jQuery.fracsの実装 分けるエレメントの定義 エレメントはjQueryのセレクタを利用して定義できます。 var fracs = $( selector ).fracs(); 全体マップ 全体マップは空のcanvas要素を使用します。 <canvas id="outline" width="200" height="400"></canvas> 全体マップはJavaScriptで設定します。 $( "#outline" ).fracs( "outline", { crop: true, styles: [ { selector: 'header,footer,section,article', fillStyle: 'rgb(230,230,230)' }, { selector: 'h1', fillStyle: 'rgb(240,140,060)' } ] } )
JavaScriptでスクリーンショットが取れるライブラリ「html2canvas」:phpspot開発日誌
html2canvas - screenshots with JavaScript JavaScriptでスクリーンショットが取れるライブラリ「html2canvas」 サーバサイドでブラウザを動かしてスクリーンショットを取るというより、利用者のブラウザ上でスクリーンショットをJavaScriptとcanvasを使って生成しちゃおうというものらしいです。 canvas非搭載ブラウザはflashcanvasやExplorerCanvas等の代替が必要とのこと。 html2canvasでレンダリングされたサンプルも見ることが出来ます。 frameやobjectのサポートはしていない点に注意。 スクリーンショットを取る仕組みをサーバに仕込むとタイムラグがあったりサーバ側は大変だったりで色々問題点を抱えていますが、クライアント側でやれば画像を受け取るだけでいいので便利です。 クライアントごとの表示
HTML5花火大会から学ぶcanvasの表現力
HTML5花火大会が始まりました！ jsdo.itに集まった400以上の花火コードが、夏の夜空に打ち上がっています！ 本当にどの花火もクオリティーが高くて、見るだけでも楽しめます。 HTML5花火大会 花火のコードから学ぶcanvasの表現力 花火のコードの大半はHTML5のcanvas要素を使って描画されています。 canvasってなんだっけ？ javascriptから自由にグラフィックを描画できる要素です。 以下のエントリーにわかりやすくまとまっています。 図を書き込めるhtml要素です。 OpenGLやDirectXのような面倒な設定を書くことなく、 手軽にグラフィック描画が行えます。 ブラウザだけでローカルアプリケーションのような グラフィカル（かつ動的な）表現が行えるわけです。 今更聞けないcanvasの基礎の基礎 canvasで花火を描くには？ 花火のお手本コードから見ていきま
HTML5でベクターグラフィックを描画する「Paper.js」 – creamu
HTML5でベクターグラフィックを描画する「Paper.js」です。 paper.jsと、サンプルHTML（Smoothing.html）の中に入っているjsを呼んで以下のHTMLを記述することで、描画できます。 HTML5 他にもいろいろできるようなので、ぜひ見てみてください。 Paper.js 先日遊びに行ったときにたまたまジミヘンのPurple Hazeが大音量でかかっていてしびれたので、勢いで久々にギターを買いました。51年リイシューのカスタムショップのテレキャスです。超久々にお茶の水に行って若者に紛れて購入。 オーディオインターフェースがいろいろ出ていて、ギターがつなげてコンデンサマイクもついているApogeeのONEをゲットしました。前からほしかったスタジオモニタのSONY MDR-CD900STも手に入れてテンションが上がっています。ひとまずGarageBandで何でもできる
Search by Drawing - jsdo.it - Share JavaScript, HTML5 and CSS
類似画像検索エンジン GazoPa がコンシューマ向けサービスを停止したと思ったら、 Google Images で "Search by Image" できるように なった。 しかし、GazoPa にあった「その場で絵を書いて検索」機能がなかったのでつくった。 （ただし http://images.google.com/support/bin/answer.py?answer=1325808 に 「『画像で検索』機能は、ウェブ上に一定の情報があるコンテンツに対応できるように最適化されています。そのため、個人的な画像（たとえば子どもが描いた絵）よりも、有名なランドマークや芸術作品の画像のほうが適切な結果を得ることができます。」 と書いてあるとおり、あまり精度いい結果がでてくるわけではありません。） 絵を書くところのコードは いろんなサイトに落書きするブックマークレット - 素人がプログラミ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.thesinglelanesuperhighway.com/
Browse code samples
