CanvasのcreateLinearGradient、fillText、fillRect、context.shadow等のメソッド・プロパティに
jsdo.itで良く見るParticleテクニックを足してアニメーションで割り、寝不足の気だるさを小さじ１杯程度混ぜて作ったタイピングゲームです。
文字は今の所アルファベット＋数字でテンキーは使えません。
ダウンロードしてローカル起動する方がサクサク動くと思う。
See the Pen
Typing Blood by Tenderfeel (@Tenderfeel)
on CodePen.
コンセプト
閻魔大王はさらっとした血の池地獄が好きなので、落ちてくる骨がそのまま沈むのを防止しよう。
ルール
- テキストが池に落ちるとミス
- テキストと違うキーを押すとミス
（ゲーム中のスペースキーと、ポーズ中のエンターキーはカウントしない） - テキストと同じキーを押すとそのテキストはクリア（粉砕）
- １文字クリアするごとに池の高さが１つ減る
- レベルが上がると同時に落ちてくる文字数が増える（レベルと同じ数）
コンボ表示ありますが今の所レベル計算にしか使ってません。
レベルは「Passed + Combo – Miss + Karma /13.5」っていう適当な計算で出してます。
Karmaはレベル計算用の裏カウンターで、文字クリアは+1、落下は-3、タイプミスは-2します。
未実装ネタ
- 赤い文字は落ちた衝撃で砕ける骨なのでタイプしない。したらミスカウント
- レベルＸ以上で大文字と小文字が出現（シフトキー開放）
- 日本語モード
- レベルＸ以上で落下速度ＵＰ
- 文字の奥行きをランダムに変化（遠近感的な意味で）
- bezierCurveToかquadraticCurveToで血の池の水面を水面っぽくする
- クリアorミスしたキーの総計表示（Web Storage使えば出来そう）
元々タイピングゲームの作成はmooTypingみたいなのをMediaRSSでやろうとしてたが（JAM用に）
写真投稿サイトをあんまり使った事がない所為で問題作成のイイ手段が思い浮かばなくてネコ図鑑に落ち着いた。
Canvas+JavaScriptはゲーム作成に凄く向いてると思う。
Canvasのアニメーションで最大の謎だったのは異なるスピードのものを同じフレームレート上でぬるぬる動かす方法なんだけど、clockmakerさんやhakimさんのソースを舐めるように視姦プレイしてたら把握できました 😀