Createjs sprite没有循环

时间:2016-08-29 23:21:00

标签: javascript createjs

在createjs中循环sprite时遇到问题。当我尝试移动精灵时,精灵没有循环。我希望精灵在我使用捕鼠器库拿着左或右键时循环。这是我写的代码:

var canvas = document.getElementById("mainScreen");
var stage = new createjs.Stage(canvas);

//fullscreen
window.onload = function () {
  "use strict"
  resize()
  //resize canvas when window resizes
  window.addEventListener('resize', resize, false)

  function resize() {
    stage.canvas.width = window.innerWidth;
    stage.canvas.height = window.innerHeight;
  }
};

//simple spritesheet animations
var speed = 10;
var sPlayerIdle = new createjs.SpriteSheet({
  frames: {
    width: 47,
    height: 64,
    numFrames: 8,
    regX: 23,
    regY: 32,
  },
  animations: {
    idle: [0, 4, true],
    run: [6, 8, true]
  },
  images: ["playeridle.png"]
});

var idle = new createjs.Sprite(sPlayerIdle, "idle");
idle.x = 100;
idle.y = 100;
idle.framerate = 7;

//keybind movement
document.addEventListener("keyup", function () {
  idle.gotoAndPlay("idle");
});

//player movement
Mousetrap.bind("d", function () {
  idle.gotoAndPlay("run");
  idle.x += speed;
  idle.scaleX = -1;
})

Mousetrap.bind("a", function () {
  idle.gotoAndPlay("run");
  idle.x -= speed;
  idle.scaleX = 1;
})

Mousetrap.bind("w", function () {
  idle.gotoAndPlay("run");
  idle.y -= speed;

})

Mousetrap.bind("s", function () {
  idle.gotoAndPlay("run");
  idle.y += speed;

})

stage.addChild(idle);
createjs.setFPS = 60;
createjs.Ticker.on("tick", stage);
createjs.Ticker.setInterval(25);
stage.update();

1 个答案:

答案 0 :(得分:0)

<!DOCTYPE html>
<html lang="en">
<head>
<title>Nomplate - Simple Templates</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width" initial_scale="1.0">
<link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
<style>
html body
{
    margin: 0px;
    font-family: arial;
    background-color: #313842
}

/*default*/
li
{
    list-style-type: none;
}

.beside
{
    padding: 0px;
    margin: 0px;
    display: inline-block;
}

.center
{
    display: block;
    margin: auto;
}/*default*/


.wrapper
{
    vertical-align: top;
    width: auto;
    height: auto;
    display: inline-block;
    background-color: red;
}

.nav
{
    width: auto;
    height: auto;
    min-height: 30px;
    background-color: #1b242b;
    padding: 3px;
    box-sizing: border-box;
}

.nav ul
{
    width: auto;
    height: 100%;
}

.static-btn
{
    width: auto;
    height: 30px;
    vertical-align: top;
    font-weight: bold;
    border-style: solid;
    border-width: 1px;
    color: white;
    min-width: 110px;
    border-color: #1b242b;
    user-select: none;
    display: block;
    transition: 0.0744s;
    font-size: 13px;
    box-sizing: border-box;
    outline: none;
    opacity: 0.9;
}

#clear-text
{
    background-color: #f3463c;
}

#copy-text
{
    background-color: #6a6f73;
}

#create-template
{
    background-color: #3dcc3d;
}

.nav span
{
    color: #596475;
    margin-top: 8px;
    padding-right: 10px;
    width: auto;
    height: 100%;
    float: right;
    box-sizing: border-box;
}

#version-number
{
    user-select: none;
}

.container textarea
{
    min-width: 500px;
    min-height: 400px;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    display: block;
    font-size: 20px;
}

.static-btn:hover
{
    cursor: pointer;
    opacity: 1.0;

}

.static-btn:active
{
    color: #e1e1c4;
}

.popup
{
    width: auto;
    height: auto;
    background-color: #25292f;
    visibility: hidden;
    padding: 5px;
}

.text-box
{
    width: 100%;
    height: 200px;
    box-sizing: border-box;
    min-width: 300px;
    display: block;
}

.input-box
{
    box-sizing: border-box;
    width: 100%;
    height: 30px;
}

.delete-btn
{
    width: 25px;
    height: 25px;
    background-color: #dd423a;
    color: white;
    font-weight: bold;
    cursor: pointer;
    border-style: none;
    opacity: 0.8;
}

.delete-btn:hover
{
    opacity: 1.0;
}

.input-label
{
    color: white;
    margin-top: 5px;
    margin-bottom: 5px;
    display: block;
}

#save
{
    transition: 0s;
    width: 100px;
    background-color: #39ba3b;
}

#inner-btn-container
{
    width: 450px;
    height: auto;
}
</style>
<div class="wrapper beside">
    <div class="nav">
        <ul class="beside">
            <li class="beside"><button class="static-btn" id="copy-text">Copy</button>
            </li><li class="beside"><button class="static-btn" id="clear-text">Clear</button>
            </li><li class="beside"><button class="static-btn" id="create-template">New Template</button></li>
        </ul>
        <span class="beside" id="version-number">moody v_1.0</span>
    </div>

    <div class="container">
        <textarea id="main-notepad" placeholder="..."></textarea>
    </div>

    <div class="nav" id="btn-container">
        <div id="inner-btn-container">
        </div>
    </div>
</div>
<div class="popup beside" id="template-ui">
    <div class="nav">
        <button class="delete-btn" id="hide">X</button>
    </div>
    <span class="input-label">Title</span>
    <input type="text" class="input-box" maxLength="30" id="title">
    <span class="input-label">Notes</span>
    <textarea class="text-box" id="note"></textarea>
    <div class="nav">
        <button class="static-btn center" id="save">Save</button>
    </div>
</div>
<script type="text/javascript">
v   window.onload=function init()
{
    //load main button functions
    //main pipeline
    initStaticButton();
    //map toggle event to both
    //ui button and create template button
    toggleShow("create-template","template-ui");
    toggleShow("hide","template-ui");
    createBtn("save","inner-btn-container");
    addEventButton();
};

function toggleShow(id,target)
{
    var templateBtn = document.getElementById(id);
    var templateUi  = document.getElementById("template-ui");
    templateUi.style.visibility = "hidden";

    templateBtn.addEventListener("click",function()
    {
        /*check if template ui visible
        if not toggle show/hide
        */
        if(templateUi.style.visibility === "hidden")
        {
            templateUi.style.visibility = "visible";    
        }
        else
        {
            templateUi.style.visibility = "hidden"; 
        };
    });
};

function setStaticButton(id,target,command)
{
    /**handle all static
    button event distribution 
    **/ 
    var targetElement = document.getElementById(id);
    var textArea      = document.getElementById(target);
    targetElement.addEventListener("click",function()
    {
        /*
        select notes in textArea
        run input field command
        */
        textArea.select();
        document.execCommand(command);
    });
};

function initStaticButton()
{
    //possible text editor commands
    var command = 
    {
        copy: "copy",
        //mozilla compatability
        delete: typeof InstallTrigger !== 'undefined' ? "cut" : "delete"
    };
    //dom ibutton id container
    var id = 
    {
        copyBtn : "copy-text",
        clearBtn: "clear-text",
        textArea: "main-notepad"
    };
    //map commands to nav buttons
    setStaticButton(id.copyBtn,id.textArea,command.copy);
    setStaticButton(id.clearBtn,id.textArea,command.delete);
};

function createBtn(id,target)
{
    //generates new buttons
    //throws them in a container div onclick
    var inputField = document.getElementById("title");
    var note       = document.getElementById("note");
    var btn        = document.getElementById(id);
    var container  = document.getElementById(target);
    btn.addEventListener("click",function()
    {
        container.innerHTML += " <div class='flex-container beside'>" + "<button class='dynamic-button' note='" + note.value +"'>"
        + inputField.value + "</button><button class='dynamic-remove-btn delete-btn'>X</button>";
        addEventButton();
        clear(note);
        clear(inputField);
    });
};

function clear(target)
{
    target.value = "";
};

function addEventButton()
{
    //adds event click
    //checks div if empty
    //if not add re-add event to buttons
    //done to ensure event lives even after saving and reopening
    for(i=0;i<document.getElementsByClassName("flex-container").length;i++)
    {
        document.getElementsByClassName("dynamic-button")[i].addEventListener("click",printAttributValue);
        document.getElementsByClassName("dynamic-remove-btn")[i].addEventListener("click",explodeDiv);
    }
};

function printAttributValue(e)
{
    insertAtCaret("main-notepad", e.target.getAttribute("note")) 
};

function insertAtCaret(areaId, text) 
{
  var txtarea = document.getElementById(areaId);
  var strPos = 0;
  var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ?
    "ff" : (document.selection ? "ie" : false));

  if (br == "ie") 
  {
    txtarea.focus();
    var range = txtarea.selection.createRange();
    range.moveStart('character', -txtarea.value.length);
    strPos = range.text.length;
  } 

  else if (br == "ff") 
  {
    strPos = txtarea.selectionStart;
  }

  var front = (txtarea.value).substring(0, strPos);
  var back = (txtarea.value).substring(strPos, txtarea.value.length);
  txtarea.value = front + text + back ;
  strPos = strPos + text.length;

  if (br == "ie") 
  {
    txtarea.focus();
    var ieRange = document.selection.createRange();
    ieRange.moveStart('character\n', -txtarea.value.length);
    ieRange.moveStart('character\n', strPos);
    ieRange.moveEnd('character\n', 0);
    ieRange.select();
  }

  else if (br == "ff") 
  {
    txtarea.selectionStart = strPos;
    txtarea.selectionEnd = strPos;
    txtarea.focus();
  }

};


function explodeDiv(e)
{
    //deletes parent div
    e.target.parentNode.outerHTML = "";
};
</script>
</body>
</html>