Code is beautiful

2011-05-13

アメーバピグの着せ替えインターフェイス

SPEC | Flash、JavaScript、HTML、CSSクリエイターの採用試験 - wonderfl build flash online

アバターコミュニティサービス『アメーバピグ』の素材を使って、キャラクタを着せ替えるインターフェースを考えてください。

にチャレンジ。

forked from: pigg - jsdo.it - Share JavaScript, HTML5 and CSS

古き良きRPGを彷彿とさせるコマンド式インターフェイス

どうせならWebフォントを使って書きたかったんだけど、その辺の規約云々で結局画像に。

真新しい事は何もしてないけど、実用性重視と言う事で。。と苦しい言い訳。

2011-02-23

Amebaぬいぐるみが届いた。

SPEC | Flash、JavaScript、HTML、CSSクリエイターの採用試験 - wonderfl build flash online

の賞品、Amebaぬいぐるみさんが届いた。ありがとうございます。

fork数がwonderfl側で80人、jsdoit側で48人て事で、diff1さん抜いたら実質何人になるんだって話だけど、とにかく自己満で作ってるだけより、誰かしらに見て評価される方がよっぽど良い筈。

気軽にって言葉は適当じゃないかも知れないけど、興味ある人はもっと参加して盛り上がったら良いのに。


・jsdo.it - Share JavaScript, HTML5 and CSS

(http://jsdo.it/)

・wonderfl build flash online

(http://wonderfl.net/)

2011-02-10

SPEC | Flash、JavaScript、HTML、CSSクリエイターの採用試験にてSilver受賞

SPEC | Flash、JavaScript、HTML、CSSクリエイターの採用試験 - wonderfl build flash online

モンスターを捕まえて、育て、戦わせるゲーム『GYAOS!(ギャオス)』のバトルシーンの演出方法を追求してください。

にてSilverを受賞。ありがとうございます。

擦って攻撃とかそういうのは割と早い段階で思いついたんだけど、マウス軌跡の実装に中々苦戦。

何と言うかもうちょいいい感じにしたかった。

指摘された視線の件も、ゲーム屋さんなら当たり前にやってるんだろうなと日々勉強。

2011-01-31

GYAOS!のバトルシーンの演出

SPEC | Flash、JavaScript、HTML、CSSクリエイターの採用試験 - wonderfl build flash online

モンスターを捕まえて、育て、戦わせるゲーム『GYAOS!(ギャオス)』の

バトルシーンの演出方法を追求してください。

にチャレンジ。

forked from: GYAOS_sample - jsdo.it - Share JavaScript, HTML5 and CSS

スクラッチの様にマウスで擦ると攻撃できる。

ただ闇雲に擦ってるだけじゃ面白くないのでAttackゲージを設けて制限を掛けたり、マウスの移動量やモンスターのDeffenceゲージによって与えるダメージが変わる様にしたけど、今回は演出面だからあんま関係ないかも。

バトルシーンの演出としてはパーティクルに始まり、パーティクルに終わる的な感じかと。

2010-12-01

CBCNET ( http://www.cbc-net.com/ ) のRSSFeedを利用して、CBCNETのトップページをリニューアル

JAM - HTML5 and Flash

Session5「CBCNET ( http://www.cbc-net.com/ ) のRSSFeedを利用して、CBCNETのトップページをリニューアルしてください。」

との事で、HTML5でマークアップ。

forked from: CBC NET - jsdo.it - Share JavaScript, HTML5 and CSS

始めは22面体とか突拍子のない事考えてたんだけど、結果的にはこんな感じに。

記事写真にマウスオーバーすると内容レイヤーが表示される仕組みで、その表示にCSS3のtransitionを使用してみた。

その対比というか、記事スライドは横方向にしている。

横スライドはjsでabsolute座標を変更してるんだけど、Operaがどうもカクカクでjsが速いんだか何だか。

カテゴリ、タグ、月別アーカイブのリンクには、Ajaxでもブラウザの「戻る」「進む」を有効にさせるべく、jQuery hashchange eventを使用。


(参考)

Ajaxやタブ切替には必須かも?ブラウザの「戻る」「進む」を有効にするjQueryのhashchangeプラグイン


ロゴ画像が四角い事もあり、全体的に四角なデザインを心掛けてみた。