createjs 学习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>created.js</title>
</head>
<body>
<div style="background-color:rgba(238, 144, 123, 1.00); width:1280px; height:720px">
<canvas id="canvas" width="1280" height="720"></canvas>
</div>
</body>
</html>
<!--
作者：offline
时间：2020-11-23
描述：引入相关的js文件
-->
<script src="js/easeljs.min.js"></script>
<script src="js/tweenjs.min.js" charset="utf-8"></script>
<script>
var canvas = document.getElementById('canvas');
var stage = new createjs.Stage('canvas');
var container = new createjs.Container(); //绘制外部容器
// 记录答案
var answer = '1';
// 选择答案
var chooseAnswer = '';
//提交button
var subutton = 0;
stage.addChild(container);
// 解除对鼠标的限制
stage.enableMouseOver();
//加载图片
var image = new Image();
image.src = "img/cover.png";
image.onload = handlerImageLoad;
function handlerImageLoad(event) {
createjs.Ticker.removeAllEventListeners();
var bitmap = new createjs.Bitmap(event.target);
container.addChild(bitmap);
var titltBottom = new createjs.Container();
var txt = new createjs.Text();
txt.x = 640; //改变txt X的坐标（在canvas中距离 左侧 的坐标）
txt.y = 680; //改变txt Y的坐标（在canvas中距离 顶部 的坐标）
txt.text = "点击开始"; //改变txt的文本内容
txt.textAlign = "center"; //水平居中
txt.textBaseline = "middle"; //垂直居中
txt.font = '30px Times';
txt.color = 'white'
titltBottom.addChild(txt);
titltBottom.cursor = 'pointer'
titltBottom.addEventListener("click", handleClick);
function handleClick(event) {
this.jumpBg();
}
container.addChild(titltBottom); //完成之后需要添加到stage中才能正常显示
stage.update();
}
function jumpBg() {
alert("跳转背景图");
container.removeAllChildren();
var image = new Image();
image.src = "img/bg.png";
image.onload = handlerBgImageLoad;
}
function handlerBgImageLoad(event) {
var bitmap = new createjs.Bitmap(event.target);
container.addChild(bitmap);
//问题
var bitmapQ = new createjs.Bitmap("img/question.png");
bitmapQ.x = 500;
//左侧小鸡
var bitmapC = new createjs.Bitmap("img/chicken.png");
bitmapC.y = 200;
// 鸡蛋
var bitmapEO = new createjs.Bitmap("img/egg.png");
bitmapEO.x = 700;
bitmapEO.y = 500;
var bitmapET = new createjs.Bitmap("img/egg.png");
bitmapET.x = 800;
bitmapET.y = 500;
var bitmapETH = new createjs.Bitmap("img/egg.png");
bitmapETH.x = 900;
bitmapETH.y = 500;
var bitmapEF = new createjs.Bitmap("img/egg.png");
bitmapEF.x = 1000;
bitmapEF.y = 500;
//鸡蛋增加点击方法
bitmapEO.cursor = 'pointer'
bitmapEO.addEventListener("click", handleChooseEggClick);
bitmapET.cursor = 'pointer'
bitmapET.addEventListener("click", handleChooseEggClick);
bitmapETH.cursor = 'pointer'
bitmapETH.addEventListener("click", handleChooseEggClick);
bitmapEF.cursor = 'pointer'
bitmapEF.addEventListener("click", handleChooseEggClick);
//前面草背景
var bitmapBG = new createjs.Bitmap("img/beforeGrass.png");
bitmapBG.y = 550;
bitmapBG.x = 600;
//后面草背景
var bitmapAG = new createjs.Bitmap("img/AfterGrass.png");
bitmapAG.y = 520;
bitmapAG.x = 650;
//增加动画效果
createjs.Ticker.addEventListener("tick", tickC);
createjs.Ticker.addEventListener("tick", ticQ);
createjs.Ticker.setFPS(24);
createjs.Tween.get(bitmapQ).wait(200);
createjs.Tween.get(bitmapC).wait(200);
// 增加提问
container.addChild(bitmapQ);
// 小鸡
container.addChild(bitmapC);
//后草
container.addChild(bitmapAG);
container.addChild(bitmapEO);
container.addChild(bitmapET);
container.addChild(bitmapETH);
container.addChild(bitmapEF);
//前草
container.addChild(bitmapBG);
function tickC(e) {
bitmapQ.y++;
if(bitmapQ.y <= 20) {
stage.update();
}
}
function ticQ(e) {
bitmapC.x++;
if(bitmapC.x <= 20) {
stage.update();
}
}
stage.update();
}
function handleChooseEggClick(event) {
createjs.Ticker.removeAllEventListeners();
container.children[1].y = 20
container.children[2].x = 20
console.log(container.children)
for(var i = 4; i < 8; i++) {
if(container.children[i].image == event.target.image) {
container.removeChildAt(i);
var chooseEgg = new createjs.Bitmap("img/chooseEgg.png");
if(i == 4) {
chooseEgg.x = 680;
chooseEgg.y = 450;
chooseAnswer = '1'
} else if(i == 5) {
chooseEgg.x = 780;
chooseEgg.y = 450;
chooseAnswer = '2'
} else if(i == 6) {
chooseEgg.x = 880;
chooseEgg.y = 450;
chooseAnswer = '3'
} else {
chooseEgg.x = 980;
chooseEgg.y = 450;
chooseAnswer = '4'
}
container.addChildAt(chooseEgg, i)
createjs.Ticker.addEventListener("tick", tick)
function tick() {
stage.update();
}
} else {
container.removeChildAt(i);
var egg = new createjs.Bitmap("img/egg.png");
if(i == 4) {
egg.x = 700;
egg.y = 500;
} else if(i == 5) {
egg.x = 800;
egg.y = 500;
} else if(i == 6) {
egg.x = 900;
egg.y = 500;
} else {
egg.x = 1000;
egg.y = 500;
}
egg.cursor = 'pointer'
egg.addEventListener("click", handleChooseEggClick);
container.addChildAt(egg, i)
createjs.Ticker.addEventListener("tick", tick)
function tick() {
stage.update();
}
}
}
if(container.children.length < 10) {
var subutton = new createjs.Bitmap("img/submit.png");
subutton.cursor = 'pointer';
subutton.x = 1120;
subutton.y = 640;
subutton.addEventListener("click", handleSumbitClick);
container.addChild(subutton)
}
}
function handleSumbitClick() {
if(answer == chooseAnswer) {
alert("跳转成功")
container.removeAllChildren();
var image = new Image();
image.src = "img/right.png";
image.onload = handleJumpResult;
} else {
alert("跳转失败")
container.removeAllChildren();
var image = new Image();
image.src = "img/wrong.png";
image.onload = handleJumpResult;
}
}
function handleJumpResult(event) {
var bitmap = new createjs.Bitmap(event.target);
container.addChild(bitmap);
container.cursor = 'pointer';
container.addEventListener("click", handleReturnClick);
}
function handleReturnClick() {
location.reload()
}
</script>
