JavaScript アーカイブ

jQueryの練習として簡単なゲームを作成してみた。 単純に表示された円のオブジェクトに対して、クリック（タップ)していくだけの単純な内容。 クリックゲーム＜サンプル版＞ - jsdo.it - share JavaScript, HTML5 and CSS 動作検証したのは、PCとiPhone4のみ。 スマホの場合はここから閲覧できる。QRコードは下記。 Androidは所持していないので、実際...

続きを読む

canvas でのドラッグ処理サンプル。 PCではマウスイベント、iPad / iPhone ではタッチイベントで処理を振り分けているので、どちらでも同じように動作ができるようにしている。 ⇒こちらからもサンプルを見れます（別ウインドウ） しかし、canvas であこれやこれやと動作させることは可能っちゃ可能なんだけども、やっぱり限度もあるような気がする。普通に html + javascript...

続きを読む

HTML5 canvas 上でちょっと簡単に 3D アニメーションを試してみた。 まぁ、3D といっても、別に何かテクニックがあるわけでもなく、ひたすら、XYZ座標の変換処理が走っているだけなんだよね（汗） ⇒サンプルを見る（別ウインドウ） まぁ、それでも、HTML ページ上で、Flash を使用せずに 3D でオブジェクトが動くのは新鮮。 クリックする度にオブジェクトの形状が変化する。 最初はこ...

続きを読む

前回に作ったHTML5 canvas のお絵かきツールのサンプルを iPad で見てみたところ、全然、絵が描けないことに気付く。まぁ、そりゃそうか。何も対応処理させていないものねー。 それで、今度は iPad でもちゃんと絵が描けるようにイベントなどを調整。 ⇒サンプルを見る（別ウインドウ） ※iPad で動作確認。iPhone でも同じように動作するはず（？） iPad や iPhone にはそ...

続きを読む

オブジェクトのアニメーション制御にちょっと挑戦。 Flash では「Tweener」とかモーション系のライブラリがあるので、オブジェクトのアニメーション制御が非常に楽なんだけども、javascript の場合、そういう情報に疎かったりする…汗 とりあえず、以前に自分で作ってたことのある Flash ライブラリの処理を参考にして、アニメーションの制御をしてみた。 ⇒サンプルを見る（別ウインドウ） 上...

続きを読む

前回の雪が降るアニメーションサンプルで、少しマウス座標に絡む処理を追加してみたのだが、Flash でも定番なマウスカーソルに追従するオブジェクト処理のサンプルを作ってみた。 ⇒サンプルを見る（別ウインドウ） ただ純粋に追尾するだけではなく、少し慣性の動きを加えてアニメーションさせてみた。この辺のパラメータは毎回ページを更新する度にランダムで設定しているので、何度か更新しつつサンプルを見てみると良い...

続きを読む

本来は Flash がメインとなるブログのはずなんだが、ついつい HTML5 の canvas が小っちゃい Flash っぽく手軽に作れるので、あれこれと触ってみたくなってしまう。 それに actionscript も javascript も親戚みたいな感じだから、どちらで作っても、同じような書き方なで、どっちでもいいやー、みたいな。むしろ旬は html5 だろ、みたいな んで、今回も同様に ...

続きを読む

HTML5 の canvas であれこれとサンプルを作っていくうちに、簡単なお絵かきツールくらいだったらすぐに作れそうだと、早速サンプル作成してみたところ、これがまた意外にもあっさりと作ることができた。 さらには、描いたイラストをPNG画像にも変換ができるようにもしてみた。 ⇒サンプルを見る（別ウインドウ） javascript のコードはすこーし長めになってしまったんで割愛。気になる人はサンプル...

続きを読む

今度は、HTML5 の canvas にマウス座標などを絡めたサンプルなんぞを作ってみた。 てゆーか、本来、今現在、こんなサンプルを作っている暇がない状況なんだけども、ちょっとした気晴らしで現実逃避だったりもするw ⇒サンプルを見る（別ウインドウ） とりあえずあんま余裕がなかったんで、座標取得やらマウスイベントの簡単なサンプル。 マウスを動かすとXY座標が表示。クリックでその場所に赤い円が描かれ、...

続きを読む

HTML5 の canvas での javascript も Flash のアクションスクリプトもわりと共通性が高いんで、引き続き、HTML5 の canvas でアニメーション処理を行ってみた。 サンプルは三角関数を使ったアニメーション。ちょうど、このブログでエントリしている「三角関数とFLASH」が、同じようなアニメーションの記事があるので、これをもとに作ってみた。 ⇒サンプルを見る（別ウイン...

続きを読む

なんか、HTML5 の canvas がちょっと面白そうだってことで、どんなもんか試してみた。 とりあえずは、乱数を使ってランダムで3パターンの簡単な描画が表示されるようにしてみる。 ⇒サンプルを見る（別ウインドウ） IE の場合、基本的に canvas に対応していないが、「ExplorerCanvas」という javascript ライブラリを利用すると同じように描画が可能となるようだ。しかし...

続きを読む

前々からも言っているが、ここ最近ホントに JavaScript の利用頻度やカスタマイズが多い。 個人的には Flash をメインに追及したいと思っているから、JavaScript は覚えないと公言していたりしていたのだけども、こうやっていろいろ JavaScript でできる便利なことを知ってしまうと、ついつい使いたくなってくるのが人間の性。 いまさらって感じだけども、便利になったもんだね、Ja...

続きを読む