スポンサーサイト

2014.01.27 Monday

一定期間更新がないため広告を表示しています

  • -
  • -
  • -

 最近音楽系アプリが楽しくてしょうがない。

とりあえずielectribeとnanostudioを入れてみんだけど、

すごすぎる!昔一生懸命お金貯めて買った機材の 2割 2%くらいの値段で

同じようなことが、、、

そんでせっかくだからHTML5でBGM再生しようと思ったんだけど

どーにもループがうまく出来ない。なぜ?

途切れるんですよ、繋ぎ目で。

なんかいろいろ試したけどsetTimeoutで交互に繋げるのが

一番スムーズになったみたい。

でもiOSではまだ1音しか鳴らせないし。

なんかもっとスムーズに繋げる方法どなたかご存知ないでしょうか??


そんで全然関係ございませんが、なんとなく今更jQtouchって

どんな感じかしらと思って使ってみました。

なにを作ろうかと考えてまたもやHTML5、CANVASにてスクラッチカードもどきを作成。




safariかChromeじゃないとうまく表示できません!

4 / 6同じ絵柄です。2箇所まで削れて、絵柄が合えば貯まっていきます。

3箇所以上削る、絵柄が揃わないと消えます。

scratch card

cake_scratch
デフォルト
とりあえず普通に画像がシャッフルされます

default_scratch
カスタム
cakeがかわいい

probability
確率変動??
1箇所スクラッチで画像ごとに50%、30%、10%、8%、2%と出現確率を設定しました
社内SEにょえのブログ参考に
させていただきました。

コード

scratch.js
default_scratch.js
scratch.css
<div id="scratchBox">
        <div id="cover">
            <span id="back" class="btn">&lt;&lt;back</span>
            <span id="next" class="btn">Loading....</span>
        </div>
        <canvas id="can"></canvas>
        <canvas id="can_bg"></canvas>
        <canvas id="can_is"></canvas>
    </div>
scratch.js、scratch.cssがまぁベースになりまして、

default_scratch.jsにて各種設定を指定して実行しています。

default_scratch.jsとscratch.cssを少しいじりまして上のスクラッチを作成してみました。

引数の説明はdefault_script.jsファイルに記載してあります。

canvasを3枚重ね、1枚目にスクラッチ部分を描き、2枚目に画像を配置、3枚目にパスを描き

そこでisPointInPathにてどこが削られたか判定しています。

案の定retinaディスプレイに少々躓きました、、が大分なれてきました!

画像を倍で作成し、半分で表示ってやつですが、同じようにcanvasもscale(2,2)にて

半分表示を行っているのですが、タッチ座標を取得する3枚目もscale2倍にして

悩んでしまいました。。

勉強がてら無理してクラスを使って作ったまとまりのないコードになり、

大分前に中途半端に作成したものを、再度作り直したりしたので、

かなり無茶な部分も多いと思いますがよかったら使ってみてください。

ちょっとずるもできちゃいますし、コードに関しても責任は持てませんが、、、。

canvasとコールバックで出てくるページに背景画像を

指定して、スクラッチ分のお好きな画像を用意し、指定すれば結構簡単にカードがつくれます!

色々素材も作ろうと思ったんですが時間がなくてできませんでした!!

とりあえず作ったドットのパターン素材だけ

ドット

さみしい。いずれもっと増やしたい。

チェックのパターン素材は

Tartan Designer

この素晴らしいサイトで作成できます。

かわいいケーキのイラストは素材庭園さんよりお借りしました。

jQtouch

そんでそれをアプリの一部的な使い方ができるかなぁとか思い、jQtouchに組み込んでみました。

icon

iPhone,iPadの方はこちらからどうぞ。

一応iPhoneのフル画面に最適かしていますので

下のツールバー分ちょっと狭い感じですが、、、、。

以前jQueryMobileを使ってみたのですが、正直自分的にはjQueryMobileの方が良かったです。

いろいろカスタムもしやすそうだったし、情報も多かった。

jQtouchはあまり活発ではないようですね。

がしかし、一瞬でiPhoneサイトが完成します!

すばらしい!

スマフォ最適化の勉強中ですがアンドロイドを触ったことがない!!

うーんほしい。いろいろ試してみたい。

けどこれからはデータベースの勉強に没頭しよう。

スポンサーサイト

2014.01.27 Monday

  • -
  • -
  • -

コメント
コメントする








   
この記事のトラックバックURL
トラックバック

calendar

S M T W T F S
   1234
567891011
12131415161718
19202122232425
262728293031 
<< March 2017 >>

profile

last entry:2013/06/10

selected entries

categories

archives

recent comment

search this site.

others