canvas

[html5] canvasでテキストのコピペ防止

2010/09/01 Javascript No comments ,

Web2.0的にHTMLソースを隠す方法を修正しているときに思ったんだけど、
単純に小説とかのコピーブロックならCanvas使う手もあるよね。ってことでデモ書いてみた。

Canvas novel – jsdo.it – share JavaScript, HTML5 and CSS

Canvasのテキスト関係は図形とかの描画に比べると貧弱貧弱ゥ!な感じだから自分で処理書かないと何も出来ないのだが、Flash化や画像化に比べると格段に楽チンだと思う。
DOMや接続をモニタリングする解析ツールには弱いものの、素の状態でコピペが出来ないというのは強い。

考えられるデメリットは…

  • ガラケーで見れない
  • IEが9からしか対応してない(ライブラリとかで対応させる手間がある)
  • スクロールとかページングとかの処理を実装するのが面倒

jsdo.itにうpしたデモのロジック解説

  • 小説テキストをXHRで読み込む
  • ページ分割フラグ(–\d–)でsplitして配列作成。[0]のタイトルは除く
  • 現在のページ番号と同じインデックスにある配列の中身をループ処理。
    1文字ずつくっつけてmeasureTextでwidthを計測し、設定の横幅を超えたら次の行に移る。
    空行の場合は行番号を繰り上げる。
  • 次の行に移る前に文字カウント(i)を-1する
  • ページ移動用の矢印出力

ページ移動用の矢印は矢印をクリックしてるかどうかの判定が面倒だから、普通に画像とかで作った方が楽かも。
やろうと思えばiPhoneのi文庫みたいなUIも出来そうな感じ。
縦書きはmeasureTextでheightが取得できないからフォントサイズから算出するしかないのだが、
句読点がarcとかで描けるっていう利点があるかな。

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

2010/08/29 Javascript No comments , ,

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

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

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

ルール

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

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

未実装ネタ

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

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

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

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

2010/07/02 Javascript No comments , ,

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

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

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

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

(さらに…)