!エンジニア人生を楽しみたい!仕事や趣味で学んだ技術的なことを書いていくブログです。2013の11日目の記事です。明日は@akuraruさんです。http://atnd.org/events/44814「いろふさんを探せ!」ゲームこんなゲーム(?といえるのか)を10分くらいで作りました。そもそも@irofさんって何なん...去年Javaを触り始めて、一番理解が難しかったのが「いろふさん」の存在でした。Calendarとは...謎でした。書いてる今も謎です...w数日前まで参加する気も全然なかったのですが、以下、鬼のような行為によって参加に至ります...。@bitter_foxさんが「動くirofさんに会いたい!!」を書いていて、面白いなぁと何気なく、以下つぶやきました。EEが入っていればすぐ作れる簡単なゲーム紹介です。ウォーリーを探せ!のいろふさん版的な。EE6で作りました(^^;先に流れからまずは、Webアプリを起動すると以下画面が表示されます。デスクトップに、いろふさんがいます。ドラッグ&ドロップしましょう。(ちなみに召喚ボタン押すとファイル選択ダイアログ)召喚されました。ゲームの世界に連れ込みます(単なるアップロードボタン)成功すると、消え去ります。ゲーム画面へボタンで次のページにいきます。召喚されたいろふさんを触ると、スライドしていろふさんが出てきます。画像からマウスポイントを離すと崩れ去ります。これが本物のいろふさんです。次に、増殖ボタンを押します。すると、偽物のいろふさんをいくらでも発生することができます。本物のいろふさんも、偽物のいろふさんもドラッグで自由に移動できるので、ごちゃまぜにして準備完了です。いろふさんを愛するプレイヤーに、どこに本当のいろふさんがいるか探してもらいましょう!みつけるといいことあるかも!コードドラッグ&ドロップとか、画像にマウスオーバーしてエフェクト(画像がスライドイン、コラスプしたり)、画像を移動したり...10分はうそでしょ!と思われるかもしれませんが、JSFのPrimeFacesというコンポーネントを使っていて、簡単に実現しています。ドラッグ&ドロップのアップロードやアップ画像のサムネイル表示はFileUploadコンポーネントマウスオーバーのエフェクトはToolTipコンポーネントhttp://www.primefaces.org/showcase/ui/tooltip.jsf画像のドラッグはDraggableコンポーネントhttp://www.primefaces.org/showcase/ui/draggableBasic.jsfを使ってます。ほとんどビュー定義のみで最初のアップロードするページビューはこんな感じ。</h:form></h:body>次のゲームページはこんな感じ。</h:form></h:body>コンポーネント置いてID指定するだけ...(^^;増殖ボタンでコンポーネントが増える部分はプログラム側でコンポーネントを生成しています。}}ちなみに昨日の時点では、アップロードした画像をImageCropperコンポーネントでバラバラにするという残酷なネタだったのですが、ImageCropperが動かなくて、デバッグしてもわからなかったので断念しました(^^;http://www.primefaces.org/showcase/ui/imageCropper.jsfうーん、なぜ動かない。#irof_historyTweet関連記事2015-03-04FacesContextのevaluateExpressionGetなるメソッド開発メモ。1.1のFluidGridでレスポンシブWebJSFのコンポーネントライブラリであるPrimeFacesの拡張ライブラ...2013-11-01JSFでもレスポンシブWebをやってみたい!Twitterで以下の情報が流れてました。ヶ月)長らくC#屋でした。EEを触ることになりました。Web開発も初めてです。日々の勉強メモとしてブログ作成。デビュー当時から堀北真希さんを愛するエンジニアです。現在は乃木坂46が大好きです。(15)にほんブログ村にほんブログ村はてなブログをはじめよう!kikutaro777さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。