2015.05.07

あのスマホゲームみたいにクリックした場所が点灯するサンプルつくってみた

こんにちは。マークアップエンジニアのやまともです。

魔法使いと黒猫のウィズというゲームを御存じでしょうか？
テレビCMをたくさんやっているあのゲームです。

私は、毎日の通勤時間や、休日の空いた時間にやっているのですが…
カードの組み合わせがよろしくないのか、なかなか攻略がはかどってはいませんが、知っているようで知らない知識をゲームを通じて得ることが出来ることや、イラストのタッチ、世界観が好みということもあり、日々楽しんでいます。

オススメのキャラは…とか語りはじめると時間がなくなってしまうので、このあたりで本題にはいります。

今回はこのゲーム中で必ず見る演出に注目しました。
このゲームはタッチした操作に対して必ずアクションをするように設計がされています。
タップしたボタンがぴょこんと動いたり、タップした位置がキラキラしたりします。
ユーザーがどこを押したか、どのボタンを押したのかを、迷わないようにしているのではないでしょうか。

日常の業務でもこれを生かすことはできないかと思い、簡単ではありますが、jQueryを利用してサンプルを作成してみました。

STEP.1 クリックした座標を取得してみる。

$(window)を使って、クリックしたxとy座標を取得します。
pageXとpageYはjQueryのAPIで、イベント発生時のマウスカーソル位置を返すプロパティです。
クリック毎に画面左上にマウスカーソルのX軸とY軸が表示されれば成功です！
（念の為、サンプルファイルではコンソール内でもx軸とy軸を表示するようにしています。）

$(function(){
  $(window).on('click', function(e){
    var x = e.pageX;
    var y = e.pageY;
    console.log('x=' + x, 'y=' + y);
    $('.log').text('x=' + x + ' y=' + y);
  });
});

STEP.1のサンプル

STEP.2 クリックして取得したXとYをcssのleftとtopに代入

続いて、クリックする毎に指定した要素のtop位置とleft位置を上書きします。
クリックする毎に位置を変える要素を用意します。サンプルでは、#clickです。
あとは、クリックしたときに取得したpageXとpageYの値を、jQueryでcssのtopの値にpageY、leftの値にpageXを指定します。
クリックする毎に、#clickで指定した要素が移動したら成功です！

このままだと、マウスカーソルまたは、タップした位置からずれて要素が表示されてしまいますので、要素の横幅と高さ分をx座標とy座標から引き算して、正確な位置に表示されるようにしましょう。

$(function(){
  var w = $('#click').width();
  var h = $('#click').height();

  $(window).on('click', function(e) {
    var x = e.pageX;
    var y = e.pageY;
    $('#click').css({
      top: y - h,
      left: x - w
    });
  });
});

STEP.2のサンプル

STEP.3 クリックしたら、要素をフェードイン、フェードアウトさせる

仕上げに、クリックする毎に位置を変える要素(サンプルでは#click)を表示しないために、cssにdisplay:noneを記述しておきます。
あとは、クリックするごとに、フェードインしたあとにフェードアウトさせれば、クリックした個所に要素が表示されたあと、非表示になります。
連打してしまうと、要素がチカチカと表示と非表示を繰り返してしまうため、if文で#clickがアニメーションしていなければ、クリックした位置を取得してアニメーションを実行するようにしました。

$(function(){
  var w = $('#click').width();
  var h = $('#click').height();

  $(window).on('click', function(e){
    if(! $('#click').is(':animated')){
      var x = e.pageX;
      var y = e.pageY;
      $('#click').css({
        top: y - h,
        left: x - w
      });
      $('#click').fadeIn(200).fadeOut(200);
    }
  });
});

STEP.3のサンプル

まとめ

イベント発生時のマウスカーソル位置を返してくれるpageXとpageYを有効活用することで、様々な機能をもたせることができそうですね。
今回作成したサンプルをカスタマイズしていけば、黒猫のウィズのように画面をタップしたらキラキラエフェクトが表示される機能を作成することも可能になりますね。

また、モバイルファーストといった観点から、タップ・フリックといった動作に合わせて何かしらのアクションを発生させることも必要不可欠になってきています。今後は、今回のサンプルのような細かいアクションひとつひとつがスマホサイトのユーザビリティを高めていくのではないでしょうか。