先放上html页面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/easeljs.js"></script>
<script src="js/tweenjs.js"></script>
<script src="js/MovieClip.js"></script>
<script src="js/vessel.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="" style="position:absolute;top:0;left:0px;">
<canvas id="gameView" width="850px" height="150px"
style="background-color: #cccccc;position:absolute;z-index:99999;"></canvas>
</div>
<!-- 动画方法 -->
<script src="app.js"></script>
</body>
</html>
然后是create.js代码
//变量,后端传来的值
var bigCardistance = 0; //大车位置
var smallCardistance1 = 0; //小车1位置
var smallCardistance2 = 0; //小车2位置
var smallCardistance3 = 0; //小车3位置
// var smallCardistance4 = 0; //小车4位置
var smallCardistance5 = 0; //活套速度
var lineLength = 0; //矩形的位置
//变量,图片容器
var inBigCarFlag; //大车
var inSmallCar1Flag; //小车1
var inSmallCar2Flag; //小车2
var inSmallCar3Flag; //小车3
// var inSmallCar4Flag; //小车4
var background; //辊道
var jiantouFlag; //箭头1
var jiantouFlag2; //箭头2
var tankuangFlag; //弹框
var texttankuang; //弹框文字
var shape; //矩形遮挡物1
var shape2; //矩形遮挡物2
var shape3; //文字大车位置
var shape4; //文字小车位置1
var shape5; //文字小车位置2
var shape6; //文字小车位置3
// var shape7; //文字小车位置4
var shape8; //文字大车
var shape9; //文字小车1
var shape10; //文字小车2
// var shape11; //文字小车3
var shape12; //文字小车4
// 舞台
var stage;
// 变量
var postions1 = 800; //箭头1位置进行累加更新的
var postions2 = 0; //箭头2位置进行累加更新的
var dandu1 = 0; //箭头2在上一次运行的距离
//定时器调用后端传来的位置
self.setInterval("getPosition()", 1000);
//ajax调用后端
function getPosition() {
$.ajax({
url: 'http://127.0.0.1:8053/outLooper',
type: 'get',
dataType: 'JSON',
processData: false,
data: {},
success: function (data) {
//接收数据,更新全局变量
if (bigCardistance != data.bigCar) {
bigCardistance = data.bigCar;
fChangeData1();
}
if (smallCardistance1 != data.smallCar1) {
smallCardistance1 = data.smallCar1;
fChangeData2();
}
if (smallCardistance2 != data.smallCar2) {
smallCardistance2 = data.smallCar2;
fChangeData3();
}
if (smallCardistance3 != data.smallCar3) {
smallCardistance3 = data.smallCar3;
fChangeData4();
}
smallCardistance5 = data.speed;
fChangeData5();
// smallCardistance4 = data.smallCar4;
if (lineLength != data.lineLength) {
lineLength = data.lineLength;
fChangeData6();
}
//把图片放回最上面
// stage.addChild(background);
stage.addChild(inBigCarFlag);
},
error: function (XMLHttprequest, textStatus, errorThrown) {
alert(textStatus);
}
});
}
//画图片
function drawImg() {
//加载图片
var inBigCar = 'img/大车2.png';
var inSmallCar1 = 'img/小车1.png';
var inSmallCar2 = 'img/小车1.png';
var inSmallCar3 = 'img/小车1.png';
// var inSmallCar4 = 'img/小车1.png';
var roller = 'img/辊道.png';
var jiantou = 'img/箭头.png';
var jiantou2 = 'img/箭头.png';
//放进容器
inBigCarFlag = new createjs.Bitmap(inBigCar);
inSmallCar1Flag = new createjs.Bitmap(inSmallCar1);
inSmallCar2Flag = new createjs.Bitmap(inSmallCar2);
inSmallCar3Flag = new createjs.Bitmap(inSmallCar3);
// inSmallCar4Flag = new createjs.Bitmap(inSmallCar4);
background = new createjs.Bitmap(roller);
jiantouFlag = new createjs.Bitmap(jiantou);
jiantouFlag2 = new createjs.Bitmap(jiantou2);
// 设置位置
inBigCarFlag.x = 0;
inBigCarFlag.y = 50;
inSmallCar1Flag.x = 0;
inSmallCar1Flag.y = 50;
inSmallCar2Flag.x = 0;
inSmallCar2Flag.y = 50;
inSmallCar3Flag.x = 0;
inSmallCar3Flag.y = 50;
// inSmallCar4Flag.x = 0;
// inSmallCar4Flag.y = 50;
background.x = 10;
background.y = 122;
background.scaleX = 0.66;
jiantouFlag.x = 0;
jiantouFlag.y = 23;
jiantouFlag.scaleX = 0.08;
jiantouFlag.scaleY = 0.08;
jiantouFlag2.x = 840;
jiantouFlag2.y = 80;
jiantouFlag2.scaleX = 0.08;
jiantouFlag2.scaleY = 0.08;
//将容器放在舞台上
stage.addChild(inBigCarFlag);
stage.addChild(inSmallCar1Flag);
stage.addChild(inSmallCar2Flag);
stage.addChild(inSmallCar3Flag);
// stage.addChild(inSmallCar4Flag);
stage.addChild(background);
stage.addChild(jiantouFlag);
stage.addChild(jiantouFlag2);
//点击箭头图片时,包个容器
var hitArea = new createjs.Shape();
hitArea.graphics.beginFill("#000").drawRect(0, 0, 3072, 4170);//这里是图片大小
jiantouFlag.hitArea = hitArea;
jiantouFlag.addEventListener('click', jiantouClick);
}
//画矩形框,遮挡物
function drawShape() {
shape = new createjs.Shape();
shape2 = new createjs.Shape();
shape.graphics.beginFill("#cccccc").drawRoundRect(-800, 50, 800, 50, 13);//画一个圆角矩形,x位置;y位置;长度x;高度y;圆角的弧度
shape2.graphics.beginFill("#cccccc").drawRoundRect(-780, 65, 800, 50, 13);//画一个圆角矩形,x位置;y位置;长度x;高度y;圆角的弧度
//然后把这个图形添加到容器中
stage.addChild(shape);
stage.addChild(shape2);
}
// 画文字
function drawText() {
shape3 = new createjs.Text(0, "15px Arial", "#fd0707");
shape4 = new createjs.Text(0, "15px Arial", "#fd0707");
shape5 = new createjs.Text(0, "15px Arial", "#fd0707");
shape6 = new createjs.Text(0, "15px Arial", "#fd0707");
// shape7 = new createjs.Text(0, "15px Arial", "#fd0707");
shape8 = new createjs.Text("1#小车", "13px Arial", "#000000");
shape9 = new createjs.Text("2#小车", "13px Arial", "#000000");
shape10 = new createjs.Text("3#小车", "13px Arial", "#000000");
// shape11 = new createjs.Text("4#小车", "13px Arial", "#000000");
shape12 = new createjs.Text("出口活套", "13px Arial", "#000000");
shape3.x = 0;
shape3.y = 35;
shape4.x = 0;
shape4.y = 35;
shape5.x = 0;
shape5.y = 35;
shape6.x = 0;
shape6.y = 35;
// shape7.x = 0;
// shape7.y = 35;
shape8.x = 0;
shape8.y = 133;
shape9.x = 0;
shape9.y = 133;
shape10.x = 0;
shape10.y = 133;
// shape11.x = 0;
// shape11.y = 133;
shape12.x = 0;
shape12.y = 133;
stage.addChild(shape3);
stage.addChild(shape4);
stage.addChild(shape5);
stage.addChild(shape6);
// stage.addChild(shape7);
stage.addChild(shape8);
stage.addChild(shape9);
stage.addChild(shape10);
// stage.addChild(shape11);
stage.addChild(shape12);
}
//画线
function drawLine() {
//获得舞台
const vessel = new createjs.Shape();
const vessel2 = new createjs.Shape();
const vessel3 = new createjs.Shape();
const vessel4 = new createjs.Shape();
//属性
vessel.graphics.beginStroke("blue");//线的颜色
vessel.graphics.setStrokeStyle(1);//线的粗细
vessel.graphics.moveTo(820, 55);//终点
vessel.graphics.lineTo(40, 55);//起点
vessel2.graphics.beginStroke("blue");//线的颜色
vessel2.graphics.setStrokeStyle(1);//线的粗细
vessel2.graphics.moveTo(820, 74);//终点
vessel2.graphics.lineTo(40, 74);//起点
vessel3.graphics.beginStroke("blue");//线的颜色
vessel3.graphics.setStrokeStyle(1);//线的粗细
vessel3.graphics.moveTo(820, 93);//终点
vessel3.graphics.lineTo(40, 93);//起点
vessel4.graphics.beginStroke("blue");//线的颜色
vessel4.graphics.setStrokeStyle(1);//线的粗细
vessel4.graphics.moveTo(820, 112);//终点
vessel4.graphics.lineTo(40, 112);//起点
//然后把这个图形添加到容器中
stage.addChild(vessel);
stage.addChild(vessel2);
stage.addChild(vessel3);
stage.addChild(vessel4);
}
// 页面加载调用的方法
window.onload = function () {
stage = new createjs.Stage("gameView"); //获取舞台
drawImg(); //画图片
drawLine(); //画线
drawShape(); //画矩形框
drawText(); //画文字
createjs.Ticker.addEventListener("tick", stageBreakHandler);
//Ticker是一个计时类,不过他是每过一帧触发一次的,
createjs.Ticker.setFPS(120);
}
// 舞台刷新方法
function stageBreakHandler() {
stage.update();
}
//箭头的点击事件
function jiantouClick() {
//只能点击一次
if (tankuangFlag == undefined) {
//加载图片
var jiantou = 'img/tankuang.png';
//放到容器内
tankuangFlag = new createjs.Bitmap(jiantou);
//设置初始位置,大小
tankuangFlag.x = postions1;
tankuangFlag.y = 0;
tankuangFlag.scaleX = 0.05;
tankuangFlag.scaleY = 0.03;
//然后把这个图形添加到容器中
stage.addChild(tankuangFlag);
//设置文字内容,大小,颜色
texttankuang = new createjs.Text("我的速度是: " + smallCardistance5, "13px Arial", "#000000");
//设置初始位置
texttankuang.x = postions1 * 1 + 30;
texttankuang.y = 30;
//添加到容器中
stage.addChild(texttankuang);
//2秒中消失
setTimeout(function () {
stage.removeChild(tankuangFlag);
stage.removeChild(texttankuang);
tankuangFlag = undefined;
texttankuang = undefined;
}, 2000);
}
}
function fChangeData1() {
shape3.text = (800 - bigCardistance) / 9 + "m";
createjs.Tween.get(shape3).to({ x: bigCardistance * 1 + 20 }, 1000);
createjs.Tween.get(inBigCarFlag).to({ x: bigCardistance }, 1000);
createjs.Tween.get(shape12).to({ x: bigCardistance * 1 + 13 }, 1000);
}
function fChangeData2() {
shape4.text = (800 - smallCardistance1) / 9 + "m";
createjs.Tween.get(shape4).to({ x: smallCardistance1 * 1 + 5 }, 1000);
createjs.Tween.get(inSmallCar1Flag).to({ x: smallCardistance1 }, 1000);
createjs.Tween.get(shape8).to({ x: smallCardistance1 }, 1000);
}
function fChangeData3() {
shape5.text = (800 - smallCardistance2) / 9 + "m";
createjs.Tween.get(shape5).to({ x: smallCardistance2 * 1 + 5 }, 1000);
createjs.Tween.get(inSmallCar2Flag).to({ x: smallCardistance2 }, 1000);
createjs.Tween.get(shape9).to({ x: smallCardistance2 }, 1000);
}
function fChangeData4() {
shape6.text = (800 - smallCardistance3) / 9 + "m";
createjs.Tween.get(shape6).to({ x: smallCardistance3 * 1 + 5 }, 1000);
createjs.Tween.get(inSmallCar3Flag).to({ x: smallCardistance3 }, 1000);
createjs.Tween.get(shape10).to({ x: smallCardistance3 }, 1000);
}
function fChangeData5() {
//更新箭头1的位置
postions1 = smallCardistance5 * 10 + postions1;
//如果大车位置小于箭头1的位置
if (postions1 > 800) {
//初始化箭头1的位置
postions1 = bigCardistance;
createjs.Tween.removeTweens(jiantouFlag);
createjs.Tween.get(jiantouFlag).to({ x: bigCardistance }, 0);
//如果箭头1被点击
if (tankuangFlag != undefined) {
//更新弹框位置
createjs.Tween.get(tankuangFlag).to({ x: postions1 }, 0);
//更新弹框里面的文字,位置
texttankuang.text = "我的速度是: " + smallCardistance5;
createjs.Tween.get(texttankuang).to({ x: postions1 * 1 + 30 }, 0);
}
} else if (postions1 < bigCardistance) {
//更新箭头1的位置
postions1 = 830;
createjs.Tween.get(jiantouFlag).to({ x: postions1 }, 0);
//如果箭头1被点击
if (tankuangFlag != undefined) {
//更新弹框位置
createjs.Tween.get(tankuangFlag).to({ x: postions1 }, 0);
//更新弹框里面的文字,位置
texttankuang.text = "我的速度是: " + smallCardistance5;
createjs.Tween.get(texttankuang).to({ x: postions1 * 1 + 30 }, 0);
}
} else {
//更新箭头1的位置
createjs.Tween.get(jiantouFlag).to({ x: postions1 }, 1000);
//如果箭头1被点击
if (tankuangFlag != undefined) {
//更新弹框位置
createjs.Tween.get(tankuangFlag).to({ x: postions1 }, 1000);
//更新弹框里面的文字,位置
texttankuang.text = "我的速度是: " + smallCardistance5;
createjs.Tween.get(texttankuang).to({ x: postions1 * 1 + 30 }, 1000);
}
}
//更新箭头2的位置
postions2 = 830 - smallCardistance5 * 10 - (dandu1);
dandu1 = smallCardistance5 * 10 + dandu1;
//如果箭头2的位置小于0
if (bigCardistance > postions2) {
//初始化箭头2的位置
dandu1 = 0;
createjs.Tween.removeTweens(jiantouFlag2);
createjs.Tween.get(jiantouFlag2).to({ x: 830 }, 0);
} else if (postions2 > 800) {
console.log("postions2 " + postions2);
dandu1 = 800 - smallCardistance5 * 10 - bigCardistance;
createjs.Tween.get(jiantouFlag2).to({ x: bigCardistance }, 0);
} else {
//更新箭头2的位置
console.log("postions2 " + postions2);
createjs.Tween.get(jiantouFlag2).to({ x: postions2 }, 1000);
}
}
function fChangeData6() {
//更新矩形位置
createjs.Tween.get(shape).to({ x: lineLength }, 1000);
createjs.Tween.get(shape2).to({ x: lineLength }, 1000);
}