jQueryを使ってキー入力で画像アニメーション - ゼロからはじめるWEBプログラミング入門

内容

HTMLとJavaScript(jQuery)を使ったアニメーションのサンプル。
キーボードからの入力を使用する。

キー入力で hippo が移動するDEMO画面

枠内をクリックしキーボードの「↑」「←」「→」「↓」を押して hippo を動かす

（枠の外にはみ出すと見えなくなるので注意！！）

HTMLファイル

<!DOCTYPE html>
<html>
<head>
        <title>移動するhippo</title>
        <meta charset="UTF-8">
</head>
<body>
        <div id="box1">
                <div id="hippo"></div>
        </div>

        <script src="http://code.jquery.com/jquery-3.2.1.js"
                integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
                crossorigin="anonymous"></script>
        <script>
                $(function() {
                        var y = 0;
                        var x = 0;
                        var dis = 100;

                        $(document).on('keyup', function(e) {
                                console.log("キーコード：" + e.keyCode);
                                switch (e.keyCode) {
                                case 38: // ↑
                                        move(-dis, 0);
                                        break;
                                case 37: // ←
                                        move(0, -dis);
                                        break;
                                case 39: // →
                                        move(0, dis);
                                        break;
                                case 40: // ↓
                                        move(dis, 0);
                                        break;
                                default:
                                }
                        });

                        function move(pY, pX) {
                                y += pY;
                                x += pX;
                                $("#hippo").animate({
                                        'top' : y + 'px',
                                        'left' : x + 'px'
                                });
                        }
                });
        </script>

        <style>
#box1 {
        position: relative;
}

#hippo {
        position: absolute;
        background-image: url(../img/hippo.png);
        background-size: 100px;
        width: 100px;
        height: 80px;
}
</style>
</body>
</html>

ポイント

座標の基準を決めてそこからの位置を指定する

hippoを表示する箱(box1)を相対位置を指定

#box1 {
        position: relative;
}

画像の要素には絶対位置を指定

#hippo {
        position: absolute;
～
}

キー入力イベント

今回はキーアップイベントを使用。keyCodeで入力キーを判定して処理を実行

$(document).on('keyup', function(e) {
                                console.log("キーコード：" + e.keyCode);
                                switch (e.keyCode) {
                                case 38: // ↑
～
}

キーボードイベントの種類

イベント	説明
keypress	キーボードを押したとき
keydown	キーボードを押し込んだとき
keyup	キーボードを押した後に上がったとき