タグ: 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 、、コメントする

CSS3 Code Generator

CSS3のソースコードをパパッと出力するジェネレータを作った。
巷には既に超有名ジェネレーターが２つ３つあるんだけど、
ボタンのマウスオーバーとかグラデーションで作るときもプレビュー出来るやつが欲しかったんで、
無いなら作ればいいじゃない理論で擬似クラスにも地味に対応してます。

CSS3 Code Generator

使い方は右上のHelpにちらっと書いてあるんだけど多分初見で使えると思う。
あんまりテストしてないのでバグとかリクエストとかあったらtwitterとかこの記事のコメントとかメールとかで教えて頂けると助かります。

未圧縮ソースはリポジトリに。
“CSS3 Code Generator” の続きを読む→

By CSS 、、コメントする

[HTML5+CSS3]　第二回コーディングコンテスト　に参加してました

締切後のソース公開OKらしいんで晒しておきます。

応募用デザインにキュンとしたので、思い立ったが吉日な勢いでコーディング。
連休中のいい暇つぶしになりました。
イベント自体は前々から知ってたんだけど、腰が重くてなかなか手を出さず…実質的な製作期間は４日くらい。
例によってMooToolsをしこたま多用してます。

応募用デザイン

完成したのはこれ

ボタンにはCSS3のtransitionとグラデーションをフル活用してます。
このプロパティ面白いんだけど手打ちは地獄を見れるぜ…！
transition.cssのカオスさは必見かもしれない。

一応IE6とかでも同じように見れるようにはしてあります。なんかもう癖みたいなもんで。
“[HTML5+CSS3]　第二回コーディングコンテスト　に参加してました” の続きを読む→

By CSS 、、、コメントする

[html] HTML5のサンプルソースと仕様メモ

HTML5のサンプルソースを作りがてら調べた仕様などを適当にメモっています。
サンプルはこのブログのトップをHTML5化したものです。

html5　demo image

この記事を書いてからHTML5で組んだものがいくつかあります。参考にどうぞ。

HTML4・XHTML1.0からの主な違い

  • 新しく追加された要素 – section, article, footer, audio, video, progress, nav, meter, time, aside, canvas, datagrid
    ※firefoxでは新要素がvoidになるので、CSSでdisplay:blockが必要。（MIMEをXHTMLのにすればおｋらしい）
    ※IEではjavascriptによるフォローが必要。
  • 新しいフォームのコントロールタイプ – dates と times, email, url, search
    ※フルサポートしているのは今のところopera9.6だけらしい。
    ※フルサポートしているのがOperaなのは変わらない。カレンダーの表示や時間枠の表示、type=”nuber”にしたとき矢印が表示されるのもOperaだけなので、同等の機能が他のブラウザにも欲しい時はJavaScriptで実装するしかない。
  • 新しい属性 – ping (a 、area要素), charset ( meta要素), async (script要素)
  • 全ての要素で使用可能なグローバル属性– id, tabindex, hidden
  • 廃止された要素 – center, font, strike

Sectionsの使いどころがイマイチよく分からない。
ブログの場合だとarticle＝各記事という扱いになるらしいが…。

“ HTML5のサンプルソースと仕様メモ” の続きを読む→

By HTML&XHTML コメントする