jQuery初心者がwindowsのイルカ作ってみた

Adways Advent Calendar 2017 9日目の記事です。

http://blog.engineer.adways.net/entry/advent_calendar_2017

おはようございます、17新卒SEの礒部です！
広告運用系の部署にいます。最近体重が５キロ増え、運動しなきゃなぁと思っています。

皆さんこのイルカのキャラクターをご存知でしょうか？

f:id:AdwaysEngineerBlog:20171213145134j:plain

windowsお助けキャラクターのカイル君といいます。
話しかけたり、色々することができる元大人気キャラクターです。

この子をjQueryの勉強をしつつ実装してみたいと思います。
（私はjQuery超初心者です）

実装機能

画面上をランダムに動く
クリックすると喋る

実装開始！

イルカの画像は自分で描きました。~~（これが一番時間かかった）~~
f:id:AdwaysEngineerBlog:20171213145303g:plain
まずは基本のイルカを配置し、移動範囲を作ります。

<body>
    <div>
        <img id="iruka" src="images/iruka.gif">
    </div>
</body>

このままだと動かないので、どんどんjQueryで要素を追加していきます。
まずは画面上を動くようにしたいので、以下の３つを使用してみます。

setInterval # 指定した間隔で処理を実行する
animate     # スタイルを指定し、アニメーション効果を実行させる
attr        # 要素を変更させる。画像のパスを変更させる

$(function() {
    setInterval("move()",2000); // 2秒間隔で実行
});

function move() {
    var rand  = Math.round(Math.random() * 4);
    if(rand == 0){ 　　　//右
        move_right();
    }else if(rand == 1){ //左
        move_left();
    }else if(rand == 2){ //下
        move_bottom();
    }else if(rand == 3){ //上
        move_top();
    }
}

function move_left() {
    $('#iruka').animate({left: '-=100px'},1000);
    $("#iruka").attr("src","images/iruka_left.gif");
}

function move_right() {
    $('#iruka').animate({left: '+=100px'},1000);
    $("#iruka").attr("src","images/iruka_right.gif");
}

function move_top() {
    $('#iruka').animate({top: '-=100px'},1000);
    $("#iruka").attr("src","images/iruka_top.gif");
}

function move_bottom() {
    $('#iruka').animate({top: '+=100px'},1000);
    $("#iruka").attr("src","images/iruka_bottom.gif");
}

2秒ごとにランダムに移動しつつ、画像が切り替わるようになりました。

しばらく眺めていると画面外に消えてしまったので移動範囲を指定してみます。

#range {
    border:3px solid #6e6eff;
    width:600px; 
    height:600px;
}
/* 移動範囲を600pxとする */

position # 親要素からの現在位置をtop・leftの２つ形式で取得する

var range = $('#iruka').position();

if(range.left <= 400){
    move_right();
}else{
    move_left();
}

上記のような分岐を各方向に入れてあげます。画面内にとどまらせることに成功しました。
他にも色々やり方はあると思います。

f:id:AdwaysEngineerBlog:20171213145647g:plain

次に、クリック時に動きを止めてみます。

clearInterval # setIntervalの解除
click         # クリック時に処理を実行させる
stop          # 実行中のアニメーションを中断させる
setTimeout    # 関数の実行タイミングを遅らせることができる

$(function() {
    var move = set_timer();

    $("#iruka").click(function(){
        stop_timer(move);
        $(this).attr("src","images/iruka.gif").stop();
        setTimeout('set_timer();', 3000);
    });
});

function set_timer() {
    var move = setInterval("move()",3000);
    return move;
}

function stop_timer(move) {
    clearInterval(move);
}

上記で、クリック時に３秒間止まるようになりました。

次に、話しかけてくれるようにしてみます。
jquery.balloon.js という、簡単に吹き出しを作成できるプラグインを使ってみます。

balloon  # マウスオーバー時に、吹き出しとして表示
contents # balloonのオプション。表示内容を指定できる

githubからjsファイルをcloneし、実装してみます。

git clone https://github.com/urin/jquery.balloon.js

<script src="jquery.balloon.js"></script>

$("#iruka").click(function(){
    stop_timer(move);
    $(this).attr("src","images/iruka.gif").stop();
    $(this).balloon({contents: 'Enjoy Life Adways!'}); // 吹き出しの表示
    setTimeout('set_timer();', 3000);
});

f:id:AdwaysEngineerBlog:20171213153751p:plain

話してくれました。
contents要素を変えれば、ランダムで話すこともできそうですね。

話せるようになったものの、クリックした後にマウスをホバーし続けないといけない挙動になってしまいました。

f:id:AdwaysEngineerBlog:20171213162821g:plain

元のソースがマウスホバーで動く仕様で作られているのが原因です。
jquery.balloon.jsのソースを見たところ、balloonメソッドで下記の２つのメソッドをマウスホバー時に呼び出していました。なので個別に呼んでみます。

showBalloon # 吹き出しを作る
hideBalloon # 吹き出しを消す

$("#iruka").click(function(){
    stop_timer(move);
    $(this).attr("src","images/iruka.gif").stop();
    $(this).showBalloon({contents: 'Enjoy Life Adways!'});
    setTimeout('$(\'#iruka\').hideBalloon();', 2000);
    setTimeout('set_timer();', 3000);
});