在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();
答案 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>