Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              <script src="http://code.createjs.com/easeljs-0.6.1.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.3.1.min.js"></script>
<canvas id="myCanvas" width="450" height="450"></canvas>
            
          
!

CSS

            
              body {
  background-color: #ffffff;
  margin: 0;
}

canvas {
  background-color: #ffffff;
}
            
          
!

JS

            
              // forked from siouxcitizen's "CreateJS 0.6.1 前回コードからSpriteSheetによる背景表示機能を追加" http://jsdo.it/siouxcitizen/cPci
//
//自分のスマホから操作できるゲーム目指して。。。
//
//スクロール機能を追加しました
//SpriteSheetを使えるかわりにこれまで使っていたスクロールのロジックが
//変わってしまい、座標の計算にうんうん悩まされました。。。
//なんとか動くようになったと思います
//
//参考にさせて頂いた大元のコードと画像は以下となります
//ワンダフルクエスト
//http://wonderfl.net/c/wu8f
//
//以下はSpriteSheetを使うにあたって参考にした自分のコードです
//CreateJS SpriteSheet マップがスクロールするように修正
//http://jsdo.it/siouxcitizen/mOHt
//
var stage;
var message;
var queue;
var manifest;

//ボタン用画像
var leftButtonBmp;     //左ボタン画像
var rightButtonBmp;    //右ボタン画像
var upButtonBmp;       //上ボタン画像
var downButtonBmp;     //下ボタン画像
var aButtonBmp;        //Aボタン画像
var bButtonBmp;        //Bボタン画像

var prevDirection = 0;
var direction = 4; //歩いていく方向 (0~3:下上左右  4:止)
var keyFlags = [false, false, false, false];

var graphics;
var backGroundRect;
var mapGround;
var mapData;
var mapObstacleData;
//スプライトシートによる勇者アニメーション用
var animation;
var charaX = 0;
var charaY = 0;
var CHARA_SPEED = 4;

var field;
//0:芝生 1:砂 2:石畳 3:フローリング 4:橋(縦) 5:橋(横) 6:木(小) 7:木(大) 8:サボテン 9:水
//10:壁(石) 11:壁(木) 12:壁(武器屋) 13:壁(防具屋) 14:壁(宿屋) 15:壺 16:タンス 17:石像 18:真っ暗
var firstMapData = [[ 0, 6, 9,18,10,10,10,10,10,18, 2,18,11,11,11,11],
                    [ 0, 0, 9,18,16,16, 2, 2, 2,18, 2,18, 3, 3,15,16],
                    [ 0, 0, 9,18, 2, 2, 2, 2, 2,18, 2,18, 3, 3, 3, 3],
                    [ 7, 0, 9,18, 2, 2, 2, 2, 2,18, 2,18, 3, 3, 3, 3],
                    [ 0, 0, 9,18,10,10,10,10, 2,13, 2,14, 3,11,11,11],
                    [ 0, 0, 9,18, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
                    [ 0, 0, 9,18, 2, 2, 2, 2, 2, 2, 2,12,10,10,10,10],
                    [ 0, 0, 9,18, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,16],
                    [ 0, 0, 9,18, 2, 2, 2, 2, 2, 2, 2,18, 2, 2, 2, 2],
                    [ 1, 0, 9,18,17,15, 2,17, 2, 2,17,18, 2, 2, 2, 2],
                    [ 1, 1, 9,10,10,10,10,10, 2, 2,10,10,10,10,10,10],
                    [ 1, 1, 9, 9, 9, 9, 9, 9, 4, 4, 9, 9, 9, 9, 9, 9],
                    [ 1, 1, 0, 0, 0, 9, 9, 0, 0, 0, 0, 6, 0, 0, 0, 7],
                    [ 1, 1, 1, 0, 0, 5, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [ 8, 1, 1, 1, 9, 9, 9, 9, 0, 0, 1, 1, 0, 0, 6, 0],
                    [ 1, 1, 1, 9, 9, 9, 9, 9, 9, 9, 9, 9, 1, 1, 1, 0]];

var firstMapObstacleData = 
                   [[ 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1],
                    [ 0, 0, 1, 1, 1, 1, 0, 0, 0, 1, 0, 1, 0, 0, 1, 1],
                    [ 0, 0, 1, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0],
                    [ 1, 0, 1, 1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0],
                    [ 0, 0, 1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1],
                    [ 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [ 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1],
                    [ 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
                    [ 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0],
                    [ 0, 0, 1, 1, 1, 1, 0, 1, 0, 0, 1, 1, 0, 0, 0, 0],
                    [ 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1],
                    [ 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1],
                    [ 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1],
                    [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
                    [ 1, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 0],
                    [ 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0]];

window.onload = init;

function init() {
    var myCanvas = document.getElementById('myCanvas');
    stage = new createjs.Stage(myCanvas);
    createjs.Touch.enable(stage); 

    message = new createjs.Text("Now Loading...", "24px Arial", "#ffffff");
    stage.addChild(message);
    message.x = 0;
    message.y = 0;

    stage.update();

    setMnifest();
    queue = new createjs.LoadQueue(false);
    queue.loadManifest(manifest,true);
    queue.addEventListener("fileload",handleFileLoad);  
    queue.addEventListener("complete",handleComplete);

}

function handleFileLoad(event){
}

function handleComplete(event){
    
    //背景塗りつぶし用矩形
    graphics = new createjs.Graphics();
    graphics.beginFill("#000000");
    graphics.drawRect(0,0,450,450);
    graphics.endFill();
    backGroundRect = new createjs.Shape(graphics);
    backGroundRect.x = 0;
    backGroundRect.y = 0;
    stage.addChild(backGroundRect);

    //メッセージを一度リリースしてから再表示(上で背景塗りつぶしているので)
    stage.removeChild(message);
    message.text = ""
    stage.addChild(message);
    message.x = 0;
    message.y = 0;

    mapData = firstMapData;
    mapObstacleData = firstMapObstacleData; 

    mapGround =new createjs.Container;
    var mapSpriteSheet = new createjs.SpriteSheet({
        images: [queue.getResult("mapImg")],
        frames: { width: 16, height: 16 }
    });
    field = new createjs.BitmapAnimation(mapSpriteSheet);

    var x = 0, y = 0; 
    while (y < mapData.length){
        while (x < mapData[y].length){
            var map = field.clone();
            map.setTransform(x*32, y*32);
            map.gotoAndStop(mapData[y][x]);
            map.scaleX = map.scaleY = 2;
            mapGround.addChild(map);
            x += 1;
        }
        x = 0;
        y += 1;
    }
    stage.addChild(mapGround);


    //アニメーション用のスプライトシートを作成
    var spriteSheet = new createjs.SpriteSheet({
        images: [queue.getResult("yuushaImg")],
        //↓manifestによるロードを使わず、以下のように直接画像のパスを指定しても動きました
        //images: ["http://jsrun.it/assets/n/x/7/h/nx7he.png"],
        frames: { width:16, height:16 },
        animations: {
            down: { frames: [0, 1], frequency: 5 },
            up: { frames: [2, 3], frequency: 5 },
            left: { frames: [6, 7], frequency: 5 },
            right: { frames: [4, 5], frequency: 5 }
        }
    });
    animation = new createjs.BitmapAnimation(spriteSheet);
    animation.scaleX = animation.scaleY = 2;
    stage.addChild(animation);
    animation.gotoAndPlay("down");

    //アニメーションさせるキャラの最初の座標を設定
    charaX = 192; //  //32の倍数
    charaY = 192; //  //32の倍数
    //↑かわりに近い32の倍数値を使用
    //↑キャララクターとマップの画像は32*32単位で表示しているため
    //charaX = 209; //450/2 -16  //32の倍数でない  //いくら4を増減しても32で割り切れないので没
    //charaY = 209; //450/2 -16  //32の倍数でない  //いくら4を増減しても32で割り切れないので没
    animation.x = charaX;
    animation.y = charaY;

    //ボタン作成
    //左ボタン作成
    leftButtonBmp = new createjs.Bitmap(queue.getResult("leftButtonImg"));
    leftButtonBmp.x = 10;
    leftButtonBmp.y = 330;
    leftButtonBmp.scaleX = leftButtonBmp.scaleY = 4;
    leftButtonBmp.alpha = 0.6;
    leftButtonBmp.addEventListener('mousedown',onPressLeftButton,false);
    stage.addChild(leftButtonBmp);

    //右ボタン作成
    rightButtonBmp = new createjs.Bitmap(queue.getResult("rightButtonImg"));
    rightButtonBmp.x = 150;
    rightButtonBmp.y = 330;
    rightButtonBmp.scaleX = rightButtonBmp.scaleY = 4;
    rightButtonBmp.alpha = 0.6;
    rightButtonBmp.addEventListener('mousedown',onPressRightButton,false);
    stage.addChild(rightButtonBmp);

    //上ボタン作成
    upButtonBmp = new createjs.Bitmap(queue.getResult("upButtonImg"));
    upButtonBmp.x = 80;
    upButtonBmp.y = 280;
    upButtonBmp.scaleX = upButtonBmp.scaleY = 4;
    upButtonBmp.alpha = 0.6;
    upButtonBmp.addEventListener('mousedown',onPressUpButton,false);
    stage.addChild(upButtonBmp);

    //下ボタン作成
    downButtonBmp = new createjs.Bitmap(queue.getResult("downButtonImg"));
    downButtonBmp.x = 80;
    downButtonBmp.y = 380;
    downButtonBmp.scaleX = downButtonBmp.scaleY = 4;
    downButtonBmp.alpha = 0.6;
    downButtonBmp.addEventListener('mousedown',onPressDownButton,false);
    stage.addChild(downButtonBmp);

    //Aボタン作成
    aButtonBmp = new createjs.Bitmap(queue.getResult("aButtonImg"));
    aButtonBmp.x = 270;
    aButtonBmp.y = 330;
    aButtonBmp.scaleX = aButtonBmp.scaleY = 4;
    aButtonBmp.alpha = 0.6;
    aButtonBmp.addEventListener('mousedown',onPressAButton,false);
    stage.addChild(aButtonBmp);
    
    //Bボタン作成
    bButtonBmp = new createjs.Bitmap(queue.getResult("bButtonImg"));
    bButtonBmp.x = 370;
    bButtonBmp.y = 330;
    bButtonBmp.scaleX = bButtonBmp.scaleY = 4;
    bButtonBmp.alpha = 0.6;
    bButtonBmp.addEventListener('mousedown',onPressBButton,false);
    stage.addChild(bButtonBmp);

    //30FPSでスタート
    createjs.Ticker.setFPS(30);
    createjs.Ticker.addListener(this);

    //キーが押された時のイベントリスナーの登録
    document.addEventListener('keydown', handleKeyDown, false);
    //キーが離された時のイベントリスナーの登録
    document.addEventListener('keyup', handleKeyUp, false);
}

//キーボードのキーが押された時の処理
function handleKeyDown(event) {
    if (event.keyCode==40 || event.keyCode==83) {//↓ s ボタン
        keyFlags[0] = true;
    } else if (event.keyCode==38 || event.keyCode==87) {//↑ w ボタン
        keyFlags[1] = true;
    } else if (event.keyCode==37 || event.keyCode==65) {//← a ボタン
        keyFlags[2] = true;
    } else if (event.keyCode==39 || event.keyCode==68) {//→ d ボタン
        keyFlags[3] = true;
    }
}
//ビットマップボタンが押された時の処理
function onPressLeftButton(event) {
    //message.text = "Left Button Pressed!";
    keyFlags[2] = true;
    event.addEventListener("mouseup", releaseLeftButton);
}
function onPressRightButton(event) {
    //message.text = "Right Button Pressed!";
    keyFlags[3] = true;
    event.addEventListener("mouseup", releaseRightButton);
}
function onPressUpButton(event) {
    //message.text = "Up Button Pressed!";
    keyFlags[1] = true;
    event.addEventListener("mouseup", releaseUpButton);
}
function onPressDownButton(event) {
    //message.text = "Down Button Pressed!";
    keyFlags[0] = true;
    event.addEventListener("mouseup", releaseDownButton);
}
function onPressAButton(event) {
    //message.text = "A Button Under Construction !";
    event.addEventListener("mouseup", release);
}

function onPressBButton(event) {
    //message.text = "B Button Under Construction !";
    event.addEventListener("mouseup", release);
}

//キーボードのキーが離された時の処理
function handleKeyUp(event) {
    if (event.keyCode==40 || event.keyCode==83) {//↓ s ボタン
        keyFlags[0] = false;
    } else if (event.keyCode==38 || event.keyCode==87) {//↑ w ボタン
        keyFlags[1] = false;
    } else if (event.keyCode==37 || event.keyCode==65) {//← a ボタン
        keyFlags[2] = false;
    } else if (event.keyCode==39 || event.keyCode==68) {//→ d ボタン
        keyFlags[3] = false;
    }
}
//ビットマップボタンがリリースされた時の処理
function releaseLeftButton(event) {
    //message.text = "Message Place";
    keyFlags[2] = false;
}
function releaseRightButton(event) {
    //message.text = "Message Place";
    keyFlags[3] = false;
}
function releaseUpButton(event) {
    //message.text = "Message Place";
    keyFlags[1] = false;
}
function releaseDownButton(event) {
    //message.text = "Message Place";
    keyFlags[0] = false;
}
function release(event) {
    //message.text = "Message Place";
}

function tick(){

    if ((charaX % 32) == 0 && (charaY % 32) == 0) { //操作キャラ・マップチップは縦横32ドットより
        direction = 4; //止まる

        //とりあえずこの方法で勇者座標から配列インデックスを設定
        var x;
        var y;
        x = Math.floor(charaX/32);
        y = Math.floor(charaY/32); //
        //↑Math.floorで小数点以下切り捨て

        if(keyFlags[0]) { //↓ s ボタン
            if (prevDirection != 0) {
                animation.gotoAndPlay("down");
                prevDirection = 0;
            }
            if (charaY <= 476 && mapObstacleData[y+1][x] == 0){ 
                //↑canvas縦480と移動スピード4から 480-4=476より
                direction = 0;
            }
        } else if (keyFlags[1]) { //↑ w ボタン
	    if (prevDirection != 1) { 
                animation.gotoAndPlay("up");
                prevDirection = 1;
            }
            if (charaY >= 4 && mapObstacleData[y-1][x] == 0) { //縦の上方向に移動スピード4分の高さがあれば移動
                direction = 1;
            }
        } else if (keyFlags[2]) { //← a ボタン
	    if (prevDirection != 2) {
                animation.gotoAndPlay("left");
                prevDirection = 2;
            }
	    if (charaX >= 4 && mapObstacleData[y][x-1] == 0) { //左横に移動スピード4分の幅があれば移動
                direction = 2; 
            }
        } else if (keyFlags[3]) { //→ d ボタン
	    if (prevDirection != 3) {
                animation.gotoAndPlay("right");
                prevDirection = 3;
            }
	    if (charaX <= 476 && mapObstacleData[y][x+1] == 0) { //32はキャラクタ幅
                //↑canvas横480と移動スピード4から 480-4=476より
                direction = 3;
            }
        }

    }

    //次のマスまで操作キャラを自動的に歩かせる
    if(direction == 0) {
        charaY += CHARA_SPEED;
    } else if (direction == 1) {
        charaY -= CHARA_SPEED;
    } else if (direction == 2) {
        charaX -= CHARA_SPEED;
    } else if (direction == 3) {
        charaX += CHARA_SPEED;
    }
    if (direction < 4) moveMap(); //マップをスクロール

    stage.update();
}

//マップをスクロール
function moveMap() {

    //(x, y) = (192,192)は勇者キャラクターをcanvas上に配置した座標
    //そこから勇者キャラクターが計算上移動した分をさしひいて、
    //スクロールさせるマップ画像の左上座標を導出する
    mapGround.x = 192-charaX;
    mapGround.y = 192-charaY;

}

function setMnifest(){

    manifest = [
        {id: "yuushaImg", 
         type:"image", 
         src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAAAQCAYAAADeWHeIAAACRElEQVR4nM2YC07EMAxEcz2Oyym4BHcxSFWK48z418BSqdql9NnjsbPN7hCRIdcx9DnePgWd9j52dvkCB2M186bqz9be4OVVuUMB8+g2scKz5hEu1bRTDVC1PBl+xuvrHf2jy1MD7uPj/TpVIzMGFvlXDICwWKRxupbSAKV54FVpgBs8M9MzMTSgwXc4qKPJi9e47DA94R3NmUa2+c2M5cbvaZqv8320mpp8uHoBJwf5mFP6K4OX5XUN1qvqAFZ42kDUPKeIp/y/G4BFq64l+clV5e/3yCvQ0FM8NdNroFtAj0810cv5kBfLdxr4VwNwknfNvDcVuolrUmnwAljRXKJ5qIHXhT5P85vNm9Vf5WP/wCOTeIf7x/lNf2bVbMbqv3XQiPfiZPKy+6r8YgA3eNFtatbXh3lN846nG4u8EzNMEY9iLBODhFED91UBn4WUm19XCnmd3DUefGy26t9j9WpI5IbekQGoxFgNAELo5KAEAQ//VzAfFDBYbI8317b6oxqoV1VeD4CKl/F83oK8jzQsMWcQke2ZshWrD2hggmdFOfGXy0AzvNfljV5b/8b5i4PFo7zRZ/OHnptPsuWZz3g2ROFunCTXKw8awHgtxpj15CdovNoZjzdlfBMHTEQNqPJo8Jh2mlt+dv4JftgY4QCwcwZTTaywugBqHMmZHgIvBoqX4VED9EouxAi/PWRyN3q25mVmmgP9zJkaHhbvFHdKt2ckiF3WkdTiamf6g0a7uisGtM9uzAr3G7qTJh/R8irPvwAcrrGhQ8E+mQAAAABJRU5ErkJggg==" },

        {id: "mapImg", 
         type:"image", 
         src: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAATAAAAAQCAYAAACRICNxAAAE70lEQVR4nO2bwXHbQAxF1UwKSBdJLenAZfiQowvwLRdP3ECK8OiURhgvY2g+oQ8sFrvykk4080ckP5aSuOQTAFGn+/NpsfT5u+2Jlp9fTD3f+X7R09PT8vDwsOrl5WVVWS7bRZ5//vr6Go+fLmpd//ZrWU6nU0plrCg7Fo9l2e4d85qPcUyt8yfjvJj1s9+fV/34vawqy5tj4/jZY/9ffyXXhmh0fOv+2L4jMWnVLoYegEWEcBIoCaRQlo9QysBMLqKyvF6s4DNhLF6EZVuLZLyGU1FZtuBl+SxOSyY9Mn/69cw4gJMcD4EUyvR3AIEjS8MAvziY2JjIec+uAw9Oxbt8YVXipgBMMoEsuCQ701kVfjiBlednMy9Z7wUYrrdIxljQQdDUfMy6LHhZY62sC+Nl/2wedVaF0BJYef5sABxdDF5WLINY5Jz3roUIwARiLL77GERLRS8Di5SKXgnJsi7ZVvNbYMUyNQ2hSOakASYnAe63toyTwLIkXPf8GuTYenn2MjD2GutnNEpIlnXJtpo/GwBH1x4B9gaWS+YtmfauMrBRJWSkz+X5o3pgPRlYFFp62YKYBywtBi8cY40XiLFel47HDE98DbBsH2w2AI4uDYJICcnG9b6+zrx0+8Aa030MZgMs0ufy/GimdaseGI7JAswCTcRvLR91JibLmGVZ74M190N9Ls/fAQSOrCsY3D37ImNa+7dYjVjwwvJxU0qqbOzwAIv0uTx/dA8sU0KOAFgNNhE/EqvjRQhCvR8GN9kW6XN5/mwAHF20JAvCCwHW+roaYG8wufgMWuw9dx+D2QCL9Lk8vwdee8nABAq1LMnyW0rOlljxGMDwRO3pg80GwNF1BYJXUK3H1Xom46xzX2K9a0DDyGrgT/0V0mvyt/ziaAEs2u9i/kfogbWWjdpncVHQaSjVYCcxArXW+760z05obxteJLqFwOa35p/LfILkobczCTBQ3oNlRNGy35oT3cCPCsdGqw9WhXhN/AjE3gVg71FCRvpdzI9mWpa/hxIyAg7L90q/2uTj/EVgyN5b831fyveyCnaSj+rfXEQAFoFXBGBsnQEMH7Iux9jbtieAEbBQiOl5PDzAWvpdzB/dA5tVQnoZlOfjXFiTvDxyeFnzx0DIMjrdxM/0wyLfyF5m1ppxXfmnLUCiDw9grP9Uy8A0oDS42LbRAGsRAqw8X4FKfWGxmA8FsOh9X+xXyEimZa2PAljrgZcxHnhqYGLzweAlABPfmz8GS7pfiW+870v7tfIRT3IWOyIDy8BrZAbmZV0eyDYQeOtxheAFDX3v3Mdz1boGNJhYthWNOSTAMv9/RH90DyxTQkbGsf0wSCFsGJgsX8cKuDTAIvOHFxaCj8Vm/v+IfgRgzJP1W/TAekpIhJZevmUJKfsMwcsAWKaEtOAU0XCAec36CMAyd+Rn/v+IfgZe+DwiA+tJwTWcsNxj8GK+BTqJ9SBmAQwhttmvim2+70v5WYDdsgcWhZgFsGrmNbCJv1HtHjB4XXYuZs7f6WoFloZcK7A05DL/f0R/Dz0wXI/2H/QJoIGjJ8ryvSxNA49BLNIDw54XA1hPHwzBJO+zFWC9PbCsatBw4XULgCWVhT9AJKcZALtVDyzbB4tmWrUeWEZ6bAvAEEDW/kf0wGpjrHm5AqgVl/j/48YfdBH+q+pphA9pok/WH8VFIUq3SYW3AAAAAElFTkSuQmCC" },

        {id:"leftButtonImg", 
         type:"image", 
         src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAVklEQVQ4ja2TMQ4AIAjE+v9Pn4MLIkZQTFiENkEEQLcDKKoDhC+y4WGfkzQFVXi5j5IZ+CjIwqGgAm+CKrwIXuBewXcLLY/YMsaWj1SRhFPISgz3t84DFIz6FDNASPsAAAAASUVORK5CYII="},

        {id:"rightButtonImg", 
         type:"image", 
         src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAV0lEQVQ4jb3TwQ4AEAwD0P7/T9cBl6Wj0oSTsL0MAwCsAwDVuoyrSTtRzWsMyQl0AQ7SAg5yBW6IBZwQG+iQJ0Ahf4HoCNElRs8YNdJTK8vSjOS1l33nARoy+hQuSDBSAAAAAElFTkSuQmCC"},

        {id:"upButtonImg", 
         type:"image", 
         src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAWklEQVQ4jb2SwQoAIAhD3///tJ0KUjPbISFQ55ZaAKYaYGyBOy2sKsj8UJOBTzkP+JurToKA5M/EbeYMXwKdhR3H65KLTvrkQ+0bOYgo5OtH+i+g7mC9gmqADalv+hRh7HQBAAAAAElFTkSuQmCC"},

        {id:"downButtonImg", 
         type:"image", 
         src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAYElEQVQ4jc2TQQoAIAgE9/+ftkMQalq6XQoCzXUSLQAQdgEQGKexVx6TrCEfAJTBJE9AF2K02qlANr0f4wnidaaJN0gU36ZA2f62sMyksvQdtM6yplUaG07BCwqxt+88AIVA+hSZ+rCyAAAAAElFTkSuQmCC"},

        {id:"aButtonImg", 
         type:"image", 
         src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAU0lEQVQ4jbWSWwoAIAgE5/6Xtr8wI1+Y4IfiDrIKIN0AhKMo5NZ1xBriAqLtXIDuuzNfAKXeOCA0LQMIn+cFyPzENT8GyIgtZA5QEVuzyTjvXWQBOLwGF55pZ7YAAAAASUVORK5CYII="},

        {id:"bButtonImg", 
         type:"image", 
         src:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAASUlEQVQ4jWNgYGD4Ty5gYGD4z4DCIQHD9SFrxmsTDkMwDMCpkBIDcMkNUgMIRhu5LkCJOnINQFczXA0gJSbgBhBjM54YoSw7AwBBsi/tTbP8zwAAAABJRU5ErkJggg=="}
    ];

}

            
          
!
999px

Console