topimage

2017-07

スポンサーサイト - --.--.-- --

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jsdo.itでJavascriptのCanvas練習してみました2 - 2011.08.01 Mon

前回ブログエントリの続きで、jsdo.it上でJavascriptのCanvasの練習を行いました。

にもロールプレイングゲームもどきを作成するときに雛形とさせていただいた、Wonderfl上にあるワンダフルクエストというコードを、JavascriptのCanvas上に再現できないか試してみました。
ワンダフルクエスト

以下その経過リストです。 結果としては、ちょいちょいコードをごまかしつつのミニ?ワンダフルクエストができました。
1、ゲームっぽい画面表示、にできず。。。
2、前回コードから勇者の上下左右画像の表示機能を追加しました
3、前回コードから障害物に引っかかる?機能を追加しました
4、前回コードから勇者の移動をなめらか?にしました
5、前回コードからマップスクロール機能を追加しました
6、前回コードからFirefoxでも動くマップスクロール機能にしました
7、ワンダフルクエスト jsdo.it Ver.(最終成果物です)

・最終成果物の動作確認はChrome12.0.742.122とFirefox3.6.18で行っています
・画面表示されない場合はJsdo.itのReloadボタンで表示できるかと思います
・↑、↓、←、→またはw、s、a、dキーでマップスクロールします

以下は画像の表示倍率を3倍にしてWonderflのワンダフルクエストと同じような見た目にしようとしてけど失敗して作業終了したものです。。。 アンバランスな小人勇者が歩きまわる感じになってしまってます。。。 なので最終成果物は「ミニ」ワンダフルクエストとなってます。。。
前回コードから背景だけスケール3倍率表示にしてみました(失敗作です)

失敗作にもあるようなことをはじめ、Canvasの扱いにかなり苦労しました。 ChromeとFirefoxでの微妙な動作の違いなどもあったりして、前回ブログエントリに引き続きCanvasはムズイです、という感想で終了。。。
スポンサーサイト

jsdo.itでJavascriptのCanvas練習してみました - 2011.07.31 Sun

かなり前から少しづつ続けていた、jsdo.itに投稿しながらのJavascriptのCanvas練習についてのまとめです。 結論、Canvasムズイです。。。

以下リストとなります。

まずは、Canvasと関係ありませんが記念すべき?jsdo.it初投稿プログラムです。 ただのよくある「Hello World」ですが。。。 
js on 2010-6-19

ここからがCavans練習コードとなります。

はじめてのCanvasといった感じでまず以下の2コードを作成
1、canvasで文字表示
上記のHello Worldとは違い、Canvasを使い色を変えながら「Hello World」文字列を表示しています。
2、canvasで矩形領域ぬりつぶし
コードのタイトルのとおり矩形領域を色を変えながら塗りつぶしています。 関係ないですが、なんで長方形っていわずに矩形って言うのでしょう?

次に作業した以下のコードは最初は動いていましたが、その後仕様がかわって外部の画像が取り込めなくなったのか、動かなくなってしまったものです。 今もコードと画像ファイルを置く環境を同じにすれば動くかもしれません(試してませんが。。。)。
1、canvasで画像の組み込み
2、canvasで↑↓←→ボタンで組み込み画像の移動
3、canvasに画像を取り込めなくなった。。。

で、画像が読み込めなくなってしまったので、かわりに矩形領域を描画させていろいろ操作できるようにしたコードです(Firefoxで動きます)。
1、canvasで↑↓←→ボタンで矩形領域の移動
2、canvasでloopで繰り返し矩形領域ぬりつぶし
3、canvas上の移動する矩形領域の当たり判定

その後Base64形式で画像を取り込めることを知ったので、改めてBase64形式で画像を取り込んで操作できるようにコーディングしたものです(Dropboxに置いた画像ファイルが取り込めるらしいことは最近知りました。。。)。 Chromeブラウザのことを意識していなかったのでFirefoxブラウザでの動作確認がメインのコーディングとなります(IEは今も意識してません。。。)。
1、HTMLでbase64形式画像の表示
2、JavaScriptでbase64形式画像の表示
3、動かない。。。 作業用に保存
4、↑↓←→ボタンでcanvas上のbase64形式画像の移動
5、canvas上の2つのbase64画像をゲーム的?loopで表示
6、前回ソースからChromeでも動くように変更(「前回ソース」は4のソースのことです)
↑この最後のコードのみChrome対応です。

以上のようにCanvasを使って基礎的なものをいろいろ試してみましたが、それだけでもう自分にはいろいろとムズイです。。。 

このあと、上記コーディング作業の延長としてもう少しCanvasでの作業を続けてみました。 それについては次のブログエントリに載せる予定です。

WonderflからFacebookへのうさんくさい投稿機能実験 - 2011.07.10 Sun

タイトルにあるようにWonderflからFacebookにメッセージを投稿できないか試してみました。

以下のプログラムになります。 
うさんくさい感じのFacebook投稿機能

結局、タイトルにあるようにWonderflとの連携的にはいろいろとうさんくさくなりましたが、連携のために作成した(Wonderflプログラムから呼び出される)Facebook投稿用Javascriptの部分が思いのほかまともに動いてくれたので備忘録的に記録しておきます。
(↑ポップアップ機能を許可したFirefoxを使用したテストでの確認)

その投稿用Javascriptを置いているHPサイトです→ facebookTest
以前にこのブログエントリでのFacebook作業でも使用していたHPサイトです。 
現在はこのHPサイトを自分のFacebookアプリとして登録しているので、最近の自分のFacebook関連作業はここに集中してしまっています。 なので、今後もこのHPサイト上でのFacebook作業が重なっていくにつれて、見るに耐えないHTML&Javascriptのソースコードとなっていくと思われるので、今のうちに&まだ見れるうちに区分け・切りだして記録しておこうと考えた次第です。。。

で、以下がその切り出したソースコードです。

1、上記にも出てきた、以前のブログエントリ関連のActionscript3.0とJavascriptを切り出したものです
Facebook投稿機能を実装したActionscript3.0ソースと、そのソースによるクラスを呼び出すJavascript

2、今回作業を行ったJavascriptを切り出したものです
今回作業のWonderflプログラムから呼び出される、Facebookログイン・投稿機能を実装したJavascript
機能的には、呼び出し元のWonderflプログラムのURLを確認後、Facebookへのログインを確認してログインしていなければ促し、そうでなければ(ログインしていれば)、指定された文字列(今回作業ではWonderflプログラムから渡されてくるURLパラメータ)をFacebookに投稿する、というものです。
ここからさらに編集すれば、ソースコード途中にテキスト入力機能や確認ダイアログなどの挿入もうまくできるかも。 自分のイメージでは、とりあえずゲーム得点のFacebook上での投稿&共有といった機能であればサクっとできそうな気がします。

今回の作業のために以下サイトを参考にさせていただきました。
JavaScriptでお手軽にFacebookのアプリを作る
Facebook API Graph:自動的に投稿する。
GET送信によるパラメータの受け渡し

ん、なんか書いてるうちに今回のブログタイトルとブログの内容がずれてきたような気が。。。

Papervision3Dでかるい3Dエディターっぽいのが出来ないか試してみました、のつづきです - 2011.07.10 Sun

前にこのエントリで3Dエディターもどきのプログラムを作成後、ゲーム的な要素を含められないかいろいろ試したりしてフラフラした結果、結局エディターっぽいものに回帰しました。。。 アイデアも技術も不足してます。。。 以下、その不毛なプログラミング過程をWonderflに投稿したもののリストです。。。

1、少々エディターっぽくできないか試してみました2(上記にある前に作ったエディターもどき)
2、前回ソースからいろいろ制約条件とかパラメータとか追加してみました
3、前回ソースからクイズっぽい機能とか追加してみました
4、前回ソースからキャプチャ機能つけてエディターっぽいものに戻しました(今回の最終成果物)

参考までに以下は今回作成プログラムのキャプチャ機能で保存した画像です。
3DEditorCaptureImage

とりあえず一連のプログラミング作業は3Dエディター形式の成果物となったので、今後は他にもそのエディター形式でなにかできないか&広げられないか考えてみます。

WonderflにすばらしいAPIの手本があったのでYoutubeプレイヤーっぽくしてみました - 2011.04.22 Fri

Wonderflに以下のようなすばらしいYoutube APIのお手本があったのでForkしてYoutubeプレイヤーっぽくできないか試してみました。

まず、こちらの「Youtube ActionScript 3.0 API テスト」をForkさせていただいて、「YouTubePlayer API」や「YouTube ActionScript 3.0 Player API リファレンス」といったコード&サイトも参考にさせていただきながら、

Youtube動画を連続再生できるか試してみました

という自分のコードを作成しました。

その後、今回Youtubeプレイヤーを作ってみようかなという思いにさせてくれた
youtube api(以下のすべてのコードのFork元)
をForkさせていただき、上記の自分作成のコードと合わせて

JSON形式で読み込まれたYoutube動画ID使って動画連続再生

というコードを作成しました。
あとはこのコードをいつものように少しづつ改良していってなんとか最終成果物にしました(うさんくさい部分もまだいくつか残。。。)。

以下、少しづつ改良していったコードの改良過程と最終成果物です。
1、前回ソースから背景サムネイルとの連携機能を追加してみました
2、前回ソースから検索機能を追加してみました
3、前回ソースからAmazonアフィリエイト用ボタンを追加してみました(最終成果物)

おまけとして、英語圏サイトにも対応だ!、と意気込んでFacebookのプロフィール投稿用にと考えて作ったもののレイアウトが微妙にあわなくて結局使わなかったコードです。。。
My Youtube Player English Ver.
コード内容を英語版アマゾンに対応させただけのものですが。。。

自分的にはもう少しいろいろ改良したいところもある今回のYoutubeプレイヤーです。 が、自分の今の知識・スキルではまたかなりの時間が必要そうだな~、と思われます。 なのでとりあえずの改良作業はここまでにして、今後の自分の知識・スキルに余裕ができたらまた続きの改良を行っていきたいと思っています。

NEW ENTRY «  | BLOG TOP |  » OLD ENTRY

FC2カウンター

ブログ内検索

プロフィール

siouxcitizen

カレンダー

06 | 2017/07 | 08
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -

最近の記事

最近のコメント

最近のトラックバック

月別アーカイブ

カテゴリー

RSSフィード

リンク

このブログをリンクに追加する

スポンサーリンク

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。