タグ: HTML5

[MooTools, HTML5] ToDoアプリを萌え化してみた

Web Creatros Contest “Q”　っていうのがjsdo.itでやってます。
商品がApple製品だったのでまた釣られてしましました（ノω＾）

お題を呼んでわが身をふりかえってみると……
仕事のToDoは会社が用意してくれるポストイットに書き、
プログラムに係わることは//TODO で書いている。
プライベートでは使う事がないから……
ほとんどToDoアプリをつかったことがなかった！

……ならToDo管理以外にも使えるものだったら
私みたいな「ToDoアプリ？なにそれおいしい？」ユーザーも振り向いてくれるかもしれない。
などと考えていたら神様がそっと囁いた。

　ﾉﾉﾉﾉﾉ
（　○○）　＜ 身近にイイ人材がおるじゃないか…ほれ、脳内に
　　(||||)

なるほど！脳内にいる住人とかタルパとか妄想とか俺の嫁とかに覚えてもらえばいいのか！
具現化するに合う素材を探してみたら素敵な立ち絵素材と巡り会えたので
ニュートリノの速さでレジ直行した勢いのまま作ったのがこれです。

todoll-start

プロジェクト名 はtoDoll
販売中の素材集が男女よりどりみどりだったので
あとでバージョン増やせるようにカスタムできる構造にしました。

“[MooTools, HTML5] ToDoアプリを萌え化してみた” の続きを読む→

By Memo 、、、コメントする

[HTML5] アプリケーションキャッシュの使い方

アプリケーションキャッシュは指定したファイルをローカルにキャッシュさせることで、
表示の高速化やオフラインでの動作を可能にするものです。
ブラウザでもその効果は体感できるが、一番威力を発揮するのはスマートフォン環境。
特に速度の遅い3G回線下にあるiPhoneで使うと、まるでWifiを使っているような気分が得られます。

“[HTML5] アプリケーションキャッシュの使い方” の続きを読む→

By HTML5 、、3件のコメント

[html5] canvasでゲーム作成 – Typing Blood

CanvasのcreateLinearGradient、fillText、fillRect、context.shadow等のメソッド・プロパティに
jsdo.itで良く見るParticleテクニックを足してアニメーションで割り、寝不足の気だるさを小さじ１杯程度混ぜて作ったタイピングゲームです。
文字は今の所アルファベット＋数字でテンキーは使えません。
ダウンロードしてローカル起動する方がサクサク動くと思う。

Typing Blood – jsdo.it – share JavaScript, HTML5 and CSS

コンセプト
閻魔大王はさらっとした血の池地獄が好きなので、落ちてくる骨がそのまま沈むのを防止しよう。

ルール

  • テキストが池に落ちるとミス
  • テキストと違うキーを押すとミス
    （ゲーム中のスペースキーと、ポーズ中のエンターキーはカウントしない）
  • テキストと同じキーを押すとそのテキストはクリア（粉砕）
  • １文字クリアするごとに池の高さが１つ減る
  • レベルが上がると同時に落ちてくる文字数が増える（レベルと同じ数）

コンボ表示ありますが今の所レベル計算にしか使ってません。
レベルは「Passed + Combo – Miss + Karma　/13.5」っていう適当な計算で出してます。
Karmaはレベル計算用の裏カウンターで、文字クリアは+1、落下は-3、タイプミスは-2します。

未実装ネタ

  • 赤い文字は落ちた衝撃で砕ける骨なのでタイプしない。したらミスカウント
  • レベルＸ以上で大文字と小文字が出現（シフトキー開放）
  • 日本語モード
  • レベルＸ以上で落下速度ＵＰ
  • 文字の奥行きをランダムに変化（遠近感的な意味で）
  • bezierCurveToかquadraticCurveToで血の池の水面を水面っぽくする
  • クリアorミスしたキーの総計表示（Web Storage使えば出来そう）

元々タイピングゲームの作成はmooTypingみたいなのをMediaRSSでやろうとしてたが（JAM用に）
写真投稿サイトをあんまり使った事がない所為で問題作成のイイ手段が思い浮かばなくてネコ図鑑に落ち着いた。
Canvas+JavaScriptはゲーム作成に凄く向いてると思う。

Canvasのアニメーションで最大の謎だったのは異なるスピードのものを同じフレームレート上でぬるぬる動かす方法なんだけど、clockmakerさんやhakimさんのソースを舐めるように視姦プレイしてたら把握できました 😀

By Javascript 、、コメントする

[js] あの楽器の図形描画をcanvasで

あの楽器は初音ミクがPVで持ってる楽器の事です。

一年ちょっと前にMooToolsでやろうとして匙を投げたんだけど、
「canvas使えばやれるかな」と当時言ってた事を覚えがてらやっつけてみた。

AnoRect – jsdo.it – share JavaScript, HTML5 and CSS

忘れないうちに図形描画の解説入れておこうと思う。

“ あの楽器の図形描画をcanvasで” の続きを読む→

By Javascript 、、コメントする