Javascript 这种奇怪的easelJS行为是什么？
我对javascript和easelJS/createJS非常陌生，但我认为我对它们的理解足以完成简单的任务。我开始用帆布做实验，只停留在一个地方 这个小项目使用canvas和easelJS来渲染带有2个引擎的简单穿梭机，并使用简单的物理来移动它。（伪）物理工作正常：对于两个引擎，分别执行操作，但渲染失败。每当我打开发动机（钥匙“q”或“w”）时，发动机的火就会熄灭 我试图找到这个代码的最简单子集来重现那个问题，但失败了，所以我提供了这个简单项目的全部代码Javascript 这种奇怪的easelJS行为是什么？,javascript,canvas,easeljs,createjs,html4,Javascript,Canvas,Easeljs,Createjs,Html4,我对javascript和easelJS/createJS非常陌生，但我认为我对它们的理解足以完成简单的任务。我开始用帆布做实验，只停留在一个地方 这个小项目使用canvas和easelJS来渲染带有2个引擎的简单穿梭机，并使用简单的物理来移动它。（伪）物理工作正常：对于两个引擎，分别执行操作，但渲染失败。每当我打开发动机（钥匙“q”或“w”）时，发动机的火就会熄灭 我试图找到这个代码的最简单子集来重现那个问题，但失败了，所以我提供了这个简单项目的全部代码 <!DOCTYPE HTML&g
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style>
/*#myCanvas{
width: 1200px;
height: 600px;
}*/
</style>
<script src="createjs-2013.12.12.min.js"></script>
<script>
/* Keyboard */
var Key = {
_pressed: {},
/*LEFT: 37,
UP: 38,
RIGHT: 39,
DOWN: 40,*/
Q: 81, W: 87, E: 69, R:82, T:84, Y: 89,
isDown: function(keyCode) {
return this._pressed[keyCode];
},
onKeydown: function(event) {
this._pressed[event.keyCode] = true;
},
onKeyup: function(event) {
delete this._pressed[event.keyCode];
},
getThrottles: function () {
var resObj = {};
for(var code in this._pressed){
resObj[String.fromCharCode(code)] = 1;
}
return resObj;
}
};
/* Vector2 */
function Vector2 (x, y, dx, dy){
this.x = x ? x : 0;
this.y = y ? y : 0;
this.dx = dx ? dx : 0;
this.dy = dy ? dy : 0;
}
/* Physics */
var Physics = {
objects: [],
update: function(){
for(ind in this.objects){
var obj = this.objects[ind];
for(ind2 in obj.forces){
var f = obj.forces[ind2];
// velocities calculations
if(f.x == obj.x && f.y == obj.y){
obj.velocity.dx += f.dx/obj.mass;
obj.velocity.dy += f.dy/obj.mass;
}
else{
var len = Math.sqrt((f.x-obj.x)*(f.x-obj.x) + (f.y-obj.y)*(f.y-obj.y));
var fpar = new Vector2(0, 0, (obj.x-f.x)/len, (obj.y-f.y)/len);
var fper = new Vector2(0, 0, (obj.y-f.y)/len, -(obj.x-f.x)/len);
var factorpar = f.dx*fpar.dx + f.dy*fpar.dy;
var factorper = f.dx*fper.dx + f.dy*fper.dy;
obj.velocity.dx += f.dx/obj.mass;
obj.velocity.dy += f.dy/obj.mass;
// TODO: here radius should be considered in equation
obj.avelocity += factorper/obj.imoment;
}
}
obj.forces.length = 0;
// rotations and translations
obj.x += obj.velocity.dx;
obj.y += obj.velocity.dy;
obj.rotation += obj.avelocity;
// dumping
var dumping = 0.95;
var adumping = 0.95;
var minvel = 0.0001;
var minavel = 0.0001;
obj.velocity.dx = dumping * obj.velocity.dx;
obj.velocity.dy = dumping * obj.velocity.dy;
obj.avelocity = adumping * obj.avelocity;
}
}
};
var myStage;
createjs.DisplayObject.prototype.mass =0.5;
createjs.DisplayObject.prototype.imoment = 0.1;
createjs.DisplayObject.prototype.forces = [];
createjs.DisplayObject.prototype.velocity = new Vector2();
createjs.DisplayObject.prototype.avelocity = 0;
function Engine(width, height){
var that = this;
this.width = width;
this.height = height;
this.innerThrottle = 0;
this.throttle = function(value){
if(value!==null)
that.innerThrottle = value;
that.flame.graphics.clear();
that.flame.graphics.beginFill("#ff0000").drawRoundRect(
-that.width*that.innerThrottle/2,
that.height+that.margin,
that.width*that.innerThrottle,
that.width*that.innerThrottle,
that.margin);
return that.innerThrottle;
};
//drawing
this.margin = 0.1 * this.width;
this.body = new createjs.Shape();
this.body.graphics.beginFill("#999999").drawRect(-this.width/2, 0, this.width, this.height);
this.addChild(this.body);
this.flame = new createjs.Shape();
this.flame.graphics.beginFill("#ff0000").drawRoundRect(
-this.width*this.throttle()/2,
this.height+this.margin,
this.width*this.throttle(),
this.width*this.throttle(),
this.margin);
this.addChild(this.flame);
}
Engine.prototype = new createjs.Container();
function Shuttle(radius){
var that = this;
this.engineNames = ['Q','W','E','R','T','Y'];
this.engines = {};
this.addEngine = function (x,y,rotation){
var tmpEn = new Engine(radius/2, radius/1);
tmpEn.x = x;
tmpEn.y = y;
tmpEn.rotation = rotation;
that.addChild(tmpEn);
that.engines[that.engineNames[Object.keys(that.engines).length]] = tmpEn;
};
this.steering = null;
this.shuttleTick = function(){
var throttles = that.steering.getThrottles();
var engines = that.engines;
for(var key in engines)
engines[key].throttle(0);
for(var key2 in throttles){
if(engines[key2]){
engines[key2].throttle(throttles[key2]);
var end = engines[key2].localToGlobal(0,-0.1);
var start = engines[key2].localToGlobal(0,0);
that.forces.push(new Vector2(start.x, start.y, (end.x-start.x)*throttles[key2], (end.y-start.y)*throttles[key2]));
}
}
};
// drawing
var core = new createjs.Shape();
core.graphics.beginFill("#000000").drawCircle(0,0,radius);
this.addChild(core);
}
Shuttle.prototype = new createjs.Container();
var shuttle;
function init(){
// Key object initialization
window.addEventListener('keyup', function(event) { Key.onKeyup(event); }, false);
window.addEventListener('keydown', function(event) { Key.onKeydown(event); }, false);
myStage = new createjs.Stage("myCanvas");
//var engine = new Engine(200,300);
var r = 10;
shuttle = new Shuttle(r);
shuttle.steering = Key;
shuttle.addEngine(-r,0,0);
shuttle.addEngine(r,0,0);
shuttle.x = 500;
shuttle.y = 200;
//shuttle.velocity.dx = 1;
//shuttle.avelocity = 1;
myStage.addChild(shuttle);
Physics.objects = [shuttle];
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener('tick', tick);
}
function tick(){
shuttle.shuttleTick();
Physics.update();
myStage.update();
}
</script>
</head>
<body onload="init()">
<canvas id="myCanvas" width="1200" height="600">
</canvas>
</body>
</html>
/*#我的画布{
宽度：1200px；
高度：600px；
}*/
/*键盘*/
变量键={
_按下：{}，
/*左：37，
上升：38，
右：39，
下降：40*/
Q:81，W:87，E:69，R:82，T:84，Y:89，
isDown：功能（键码）{
返回此项。按[keyCode]；
},
onKeydown：函数（事件）{
这是。\ u按[event.keyCode]=true；
},
onKeyup：函数（事件）{
删除此项。\u按[event.keyCode]；
},
getThrottles:function（）{
var resObj={}；
for（此中的var代码。\u按下）{
resObj[String.fromCharCode（代码）]=1；
}
返回resObj；
}
};
/*矢量2*/
函数向量2（x，y，dx，dy）{
这个.x=x？x:0；
这个.y=y？y:0；
this.dx=dx？dx:0；
this.dy=dy？dy:0；
}
/*物理学*/
var物理={
对象：[]，
更新：函数（）{
for（此.objects中的ind）{
var obj=this.objects[ind]；
用于（目标力中的ind2）{
var f=目标力[ind2]；
//速度计算
如果（f.x==obj.x&&f.y==obj.y）{
obj.velocity.dx+=f.dx/obj.mass；
obj.速度.dy+=f.dy/obj.质量；
}
否则{
var len=数学sqrt（（f.x-obj.x）*（f.x-obj.x）+（f.y-obj.y）*（f.y-obj.y））；
var fpar=新向量2（0,0，（对象x-f.x）/len，（对象y-f.y）/len）；
var fper=新向量2（0,0，（对象y-f.y）/len，-（对象x-f.x）/len）；
var factorpar=f.dx*fpar.dx+f.dy*fpar.dy；
var factorper=f.dx*fper.dx+f.dy*fper.dy；
obj.velocity.dx+=f.dx/obj.mass；
obj.速度.dy+=f.dy/obj.质量；
//TODO:这里的半径应该在等式中考虑
obj.avelocity+=系数/obj.imoment；
}
}
obj.forces.length=0；
//旋转和平移
obj.x+=obj.velocity.dx；
obj.y+=obj.velocity.dy；
obj.旋转+=obj.avelocity；
//倾倒
var=0.95；
var adumping=0.95；
var minvel=0.0001；
var minavel=0.0001；
obj.velocity.dx=卸载*obj.velocity.dx；
obj.velocity.dy=卸载*obj.velocity.dy；
obj.avelocity=成人*obj.avelocity；
}
}
};
var myStage；
createjs.DisplayObject.prototype.mass=0.5；
createjs.DisplayObject.prototype.imont=0.1；
createjs.DisplayObject.prototype.forces=[]；
createjs.DisplayObject.prototype.velocity=new Vector2（）；
createjs.DisplayObject.prototype.avelocity=0；
功能引擎（宽度、高度）{
var=这个；
这个。宽度=宽度；
高度=高度；
此参数为0；
this.throttle=功能（值）{
如果（值！==null）
这是一个数值；
那个.flame.graphics.clear（）；
that.flame.graphics.beginll（“#ff0000”）.drawRoundRect(
-那个。宽度*那个。宽度/2，
那个高度+那个边距，
那个，宽度，那个，内部油门，
那个，宽度，那个，内部油门，
即(利润),；
把那辆车还给我；
};
//绘图
this.margin=0.1*this.width；
this.body=new createjs.Shape（）；
this.body.graphics.beginll（#999999“）.drawRect（-this.width/2,0，this.width，this.height）；
this.addChild（this.body）；
this.flame=new createjs.Shape（）；
this.flame.graphics.beginull（“#ff0000”）.drawRoundRect(
-this.width*this.throttle（）/2，
this.height+this.margin，
this.width*this.throttle（），
this.width*this.throttle（），
这是"利润",；
this.addChild（this.flame）；
}
Engine.prototype=new createjs.Container（）；
功能穿梭机（半径）{
var=这个；
this.engineNames=['Q'，'W'，'E'，'R'，'T'，'Y']；
this.engines={}；
this.addEngine=函数（x，y，旋转）{
var tmpEn=新发动机（半径/2，半径/1）；
tmpEn.x=x；
tmpEn.y=y；
tmpEn.rotation=旋转；
那就是addChild（tmpEn）；
that.engines[that.engineNames[Object.keys（that.engines）.length]=tmpEn；
};
此参数为空；
this.shuttleTick=函数（）{
var throttles=that.steering.getThrottles（）；
var engines=那台发动机；
用于（发动机中的var键）
发动机[键]。节气门（0）；
用于（var键2在节流阀中）{
if（发动机[key2]）{
发动机[key2]。油门（油门[key2]）；
var end=engines[key2].localToGlobal（0，-0.1）；
var start=engines[key2].localToGlobal（0,0）；
（新矢量2（start.x，start.y，（end.x-start.x）*节流[key2]，（end.y-start.y）*节流[key2]）；
}
}
};
//绘图
var core=new createjs.Shape（）；
核心。图形。Beginll（#000000”）。绘图圆（0,0，半径）；
这是addChild（core）；
}
Shuttle.prototype=new createjs.Container（）；
var穿梭机；
函数init（）{
//键对象初始化
window.addEventListener（'keyup'，函数（事件）{Key.onKeyup（事件