我继承了一个季节性来临日历(http://i-uat.myfamilyclub.co.uk/adventcalendar/)。
我遇到的问题是这些项目无法点击/无法启动。我已经发现这是JS，但我找不到错误。我错过了什么？
JavaScript:
var colors;
var mainSpriteImage;
var elementsSpritesheet;
var elementFrames;
var revealSpritesheet;
var tempPresent;
var filenames;
var mainSpritesReady = false;
var revealSpriteReady = false;
var numbers = new Array();
var circles = new Array();
var popupElement = document.getElementById("popupHolder");
var popupBack = document.getElementById("popupBackground");
var popupText = document.getElementById("popupText");
var popup = new Popup();
//launch the app
function go() {
createjs.CSSPlugin.install(createjs.Tween);
createjs.CSSPlugin.cssSuffixMap = {top: "%", opacity: ""};
setup();
loadAssets();
}
function setup() {
colors = getColors();
}
function loadAssets() {
var img = document.createElement("img");
img.onload = mainSpritesLoaded;
img.src = "assets/myFamilyClubSprites.png";
var reveal = document.createElement("img");
reveal.onload = revealSpriteLoaded;
reveal.src = "assets/circle_reveal_transparent_2013.png";
}
function assetsLoaded() {
if (mainSpritesReady && revealSpriteReady) {
createGraphics();
}
}
function mainSpritesLoaded(event) {
mainSpriteImage = event.target;
elementFrames = createFrames();
createMainSpritesheet(mainSpriteImage);
mainSpritesReady = true;
assetsLoaded();
}
function revealSpriteLoaded(event) {
createRevealAnimation(event.target);
revealSpriteReady = true;
assetsLoaded();
}
function createGraphics() {
var titleCanvas = document.getElementById("titleCanvas");
var titleAnim = new TitleAnim(titleCanvas);
if (!mobile) {
titleAnim.animateIn();
}
var holder = document.getElementById("linksHolder");
var circleSize = 107;
for (var i = 0; i < 24; i++) {
var circle = new Circle(colors[i], circleSize, i + 1, filenames[i], prizeImages[i], links[i]);
var tempCanvas = holder.appendChild(circle.getCanvas());
tempCanvas.id = "c" + i;
tempCanvas.className = "circleCanvas";
circle.animateIn(i * 10 + 600);
circles.push(circle);
}
var starCanvas = document.getElementById("starLink");
var star = new Star(starCanvas, mainSpriteImage, elementFrames[10], elementFrames[11]);
if (!mobile) {
star.animateIn(1000);
}
}
function createRevealAnimation(image) {
var data = {
images: [image],
frames: {width: 120, height: 120, count: 16, regX: 60, regY: 60},
animations: { open: [0, 15] }
}
revealSpritesheet = new createjs.SpriteSheet(data);
}
function disableCircles() {
for (var i = 0; i < circles.length; i++) {
circles[i].removeMouseListeners();
}
}
function enableCircles() {
for (var i = 0; i < circles.length; i++) {
circles[i].addMouseListeners();
}
}
//title anim
function TitleAnim(targetCanvas) {
var canvas = targetCanvas;
var stage;
var bmpMyFamilyClub = new createjs.Bitmap(mainSpriteImage);
var bmpAdventCalendar = new createjs.Bitmap(mainSpriteImage);
var bmpText = new createjs.Bitmap(mainSpriteImage);
var targetY1 = 23;
var targetY2 = 60;
var targetY3 = 160;
function init() {
bmpMyFamilyClub.sourceRect = elementFrames[12];
bmpMyFamilyClub.regX = Math.floor(elementFrames[12].width * .5);
bmpAdventCalendar.sourceRect = elementFrames[13];
bmpAdventCalendar.regX = Math.floor(elementFrames[13].width * .5);
bmpText.sourceRect = elementFrames[14];
bmpText.regX = Math.floor(elementFrames[14].width * .5);
canvas.width = bmpText.sourceRect.width;
canvas.height = 200;
canvas.width = 650;
var centerX = Math.floor(canvas.width * .5);
stage = new createjs.Stage(canvas);
bmpMyFamilyClub.x = centerX;
bmpMyFamilyClub.y = targetY1;
bmpAdventCalendar.x = centerX;
bmpAdventCalendar.y = targetY2;
bmpText.x = centerX;
bmpText.y = targetY3;
bmpAdventCalendar.alpha = 1;
if (!mobile) {
bmpAdventCalendar.y = -100;
bmpMyFamilyClub.visible = 0;
bmpText.alpha = 0;
}
stage.addChild(bmpMyFamilyClub);
stage.addChild(bmpAdventCalendar);
stage.addChild(bmpText);
stage.update();
}
function tick() {
stage.update();
}
init();
this.animateIn = function () {
/* createjs.Ticker.addListener(tick);
circle.scaleX=circle.scaleY=0;
createjs.Ticker.setFPS(60);
createjs.Tween.get(circle).wait(delay).to({alpha:1,scaleX:1, scaleY:1},200,createjs.Ease.backOut);
createjs.Tween.get(container).wait(delay+40).to({alpha:1,scaleX:1, scaleY:1},600,createjs.Ease.backOut).call(this.animInComplete,null,this);
*/
createjs.Ticker.addListener(tick);
createjs.Ticker.setFPS(60);
createjs.Tween.get(bmpAdventCalendar).wait(100).to({alpha: 1, y: targetY2}, 300, createjs.Ease.backOut).call(this.animComplete, null, this);
createjs.Tween.get(bmpMyFamilyClub).wait(300).call(this.test, null, this);
createjs.Tween.get(bmpText).wait(400).to({alpha: 1}, 1000);
}
this.test = function () {
bmpMyFamilyClub.visible = true;
createjs.Tween.get(bmpMyFamilyClub).wait(0).to({alpha: 1, y: targetY1}, 400, createjs.Ease.cubicOut);
}
this.animComplete = function () {
}
}
//Circle Object
function Circle(color, size, number, prizeThumb, prizeImageLink, outLink) {
var canvas;
var stage;
var circle;
var container = new createjs.Container();
var revealAnim;
var cf;
var backBmp;
var border;
var active = false;
var enabled = true;
function init() {
canvas = document.createElement("canvas");
canvas.width = canvas.height = size * 1.1;
stage = new createjs.Stage(canvas);
stage.enableMouseOver(50);
circle = new createjs.Shape();
circle.graphics.beginFill(color);
circle.graphics.drawCircle(0, 0, Math.floor(size * .5));
circle.x = circle.y = Math.floor(canvas.width * .5);
border = new createjs.Shape();
border.graphics.setStrokeStyle(2);
border.graphics.beginStroke("#bcecfd");
border.graphics.drawCircle(0, 0, Math.floor(size * .5));
border.x = border.y = Math.floor(canvas.width * .5);
if (!mobile) {
revealAnim = new createjs.BitmapAnimation(revealSpritesheet);
revealAnim.gotoAndStop("open");
revealAnim.x = revealAnim.y = circle.x;
revealAnim.rotation = Math.random() * 360;
cf = new createjs.ColorFilter(0, 0, 0, 1, hexToR(color), hexToG(color), hexToB(color), 0);
revealAnim.filters = [cf];
revealAnim.cache(-60, -60, 120, 120);
revealAnim.updateCache();
}
if (prizeThumb != null && prizeThumb != "") {
backBmp = new createjs.Bitmap(prizeThumb);
backBmp.image.onload = onBackgroundLoaded;
backBmp.regX = backBmp.regY = 53;
backBmp.x = backBmp.y = circle.x;
if (prizeImageLink == null) {
backBmp.alpha = .4;
}
active = true;
}
stage.addChild(circle);
var randNum = Math.floor(Math.random() * 10);
if (randNum > 9)randNum = 9;
container = numbers[number];
container.x = Math.floor(circle.x);
container.y = Math.floor(circle.y);
if (!mobile) {
circle.scaleX = circle.scaleY = 0;
container.scaleX = container.scaleY = 0;
container.alpha = 0;
if (active) {
circle.onMouseOver = handleMouseEvents;
circle.onMouseOut = handleMouseEvents;
}
}
stage.addChild(container);
stage.update();
if (active) {
circle.onClick = onCircleClick;
}
}
function onBackgroundLoaded() {
stage.update();
}
function handleMouseEvents(event) {
if (!enabled) return;
switch (event.type) {
case "onMouseOver":
document.body.style.cursor = 'pointer';
circle.alpha = .8;
break;
case "onMouseOut":
document.body.style.cursor = 'default';
circle.alpha = 1;
break;
}
stage.update();
}
function onCircleClick() {
if (backBmp == undefined) return;
backBmp.mask = circle;
stage.addChild(backBmp);
stage.addChild(border);
stage.removeChild(circle);
stage.removeChild(number);
if (mobile) {
stage.update();
if (prizeImageLink != null) {
popup.open(prizeImageLink, outLink);
}
} else {
stage.addChild(revealAnim);
createjs.Ticker.addListener(revealTickHandler);
createjs.Ticker.setFPS(50);
revealAnim.gotoAndPlay("open");
revealAnim.onAnimationEnd = onRevealEnd;
}
if (prizeImageLink != null) {
backBmp.onMouseOver = handleMouseEvents;
backBmp.onMouseOut = handleMouseEvents;
backBmp.onClick = onPrizeThumbClick;
}
}
function onPrizeThumbClick() {
if (prizeImageLink == null)return;
popup.open(prizeImageLink, outLink);
}
function onRevealEnd() {
revealAnim.stop();
revealAnim.visible = false;
createjs.Ticker.removeListener(revealTickHandler);
if (prizeImageLink == null)return;
popup.open(prizeImageLink, outLink);
}
function tick() {
stage.update();
}
function revealTickHandler() {
revealAnim.updateCache();
stage.update();
}
init();
this.getCanvas = function () {
// var
return canvas;
}
this.animateIn = function (delay) {
if (mobile) {
if (active && prizeImageLink == null) {
onCircleClick();
}
return;
}
createjs.Ticker.addListener(tick);
circle.scaleX = circle.scaleY = 0;
createjs.Ticker.setFPS(60);
createjs.Tween.get(circle).wait(delay).to({alpha: 1, scaleX: 1, scaleY: 1}, 200, createjs.Ease.backOut);
createjs.Tween.get(container).wait(delay + 40).to({alpha: 1, scaleX: 1, scaleY: 1}, 600, createjs.Ease.backOut).call(this.animInComplete, null, this);
}
this.animInComplete = function () {
createjs.Ticker.removeListener(tick);
if (prizeImageLink == null) {
onCircleClick();
}
}
this.removeMouseListeners = function () {
enabled = false;
document.body.style.cursor = 'default';
}
this.addMouseListeners = function () {
enabled = true;
}
}
function Star(canvas, image, starRect, textRect) {
var canvas = canvas;
var stage;
var starBmp;
var textBmp;
function init() {
starBmp = new createjs.Bitmap(image);
starBmp.sourceRect = starRect;
starBmp.regX = Math.floor(starRect.width * .5);
starBmp.regY = Math.floor(starRect.height * .5);
textBmp = new createjs.Bitmap(image);
textBmp.sourceRect = textRect;
textBmp.regX = Math.floor(textRect.width * .5 + 3);
textBmp.regY = Math.floor(textRect.height * .5);
canvas.width = starBmp.sourceRect.width;
canvas.height = starBmp.sourceRect.height;
textBmp.x = starBmp.x = Math.floor(starRect.width * .5);
textBmp.y = starBmp.y = Math.floor(starRect.height * .5);
stage = new createjs.Stage(canvas);
stage.addChild(starBmp);
stage.addChild(textBmp);
if (!mobile) {
starBmp.scaleX = starBmp.scaleY = 0;
textBmp.scaleX = textBmp.scaleY = 0;
stage.enableMouseOver(50);
}
stage.update();
}
function handleMouseEvents(event) {
switch (event.type) {
case "onMouseOver":
createjs.Ticker.addListener(tick);
document.body.style.cursor = 'pointer';
starBmp.scaleX = starBmp.scaleY = 1;
createjs.Tween.removeTweens(starBmp);
createjs.Tween.get(starBmp).to({alpha: 1, scaleX: 1.05, scaleY: 1.05}, 10, createjs.Ease.quartOut).call(hoverAnimComplete, null, this);
break;
case "onMouseOut":
createjs.Ticker.addListener(tick);
document.body.style.cursor = 'default';
createjs.Tween.removeTweens(starBmp);
createjs.Tween.get(starBmp).to({alpha: 1, scaleX: 1, scaleY: 1}, 30, createjs.Ease.quartOut).call(hoverAnimComplete, null, this);
break;
case "onClick":
window.location.href = prizeLink;
break;
}
stage.update();
}
function hoverAnimComplete() {
createjs.Ticker.removeListener(tick);
}
function tick() {
stage.update();
}
init();
this.animateIn = function (delay) {
createjs.Ticker.addListener(tick);
createjs.Tween.get(starBmp).wait(delay).to({alpha: 1, scaleX: .95, scaleY: .95}, 200, createjs.Ease.backOut);
createjs.Tween.get(textBmp).wait(delay + 50).to({alpha: 1, scaleX: 1, scaleY: 1}, 250, createjs.Ease.backOut).call(this.animInComplete, null, this);
}
this.animInComplete = function () {
stage.onMouseOver = handleMouseEvents;
stage.onMouseOut = handleMouseEvents;
stage.onClick = handleMouseEvents;
createjs.Ticker.removeListener(tick);
}
}
function Popup() {
var stage;
var canvas;
var bitmap;
var mask;
var border;
var link;
var holder;
var background;
var btn;
var textBackground = new createjs.Shape();
var description;
function init() {
holder = document.getElementById("popupHolder");
canvas = document.getElementById("popup");
canvas.width = 640;
canvas.height = 460;
stage = new createjs.Stage(canvas);
stage.enableMouseOver(50);
bitmap = new createjs.Bitmap();
mask = new createjs.Shape();
border = new createjs.Shape();
bitmap.mask = mask;
background = document.getElementById("popupBackground");
btn = new createjs.Bitmap("images/prizeR.png");
btn.regX = 150;
bitmap.onClick = openLink;
bitmap.onMouseOver = handleMouseEvents;
bitmap.onMouseOut = handleMouseEvents;
btn.onClick = openLink;
btn.onMouseOver = handleMouseEvents;
btn.onMouseOut = handleMouseEvents;
stage.addChild(bitmap);
stage.addChild(border);
stage.addChild(btn);
}
function handleMouseEvents(event) {
switch (event.type) {
case "onMouseOver":
document.body.style.cursor = 'pointer';
break;
case "onMouseOut":
document.body.style.cursor = 'default';
break;
}
}
function close(event) {
enableCircles();
createjs.Tween.get(popupElement).to({top: -90}, 350, createjs.Ease.backIn);
createjs.Tween.get(background).to({opacity: 0}, 500, createjs.Ease.cubicInOut).call(onCloseComplete, null, this);
}
function onCloseComplete() {
holder.onclick = null;
holder.style.visibility = "hidden";
}
function openLink() {
window.location.href = link;
}
function imageLoaded(event) {
holder.onclick = close;
bitmap.image = event.target;
canvas.width = bitmap.image.width + 10;
canvas.height = bitmap.image.height + 60;
border.graphics.clear();
border.graphics.beginStroke("#bcecfd");
border.graphics.setStrokeStyle(2);
border.graphics.drawRoundRect(0, 0, bitmap.image.width, bitmap.image.height, 10);
mask.graphics.clear();
mask.graphics.beginFill("#ffffff");
mask.graphics.drawRoundRect(0, 0, bitmap.image.width, bitmap.image.height, 10);
btn.x = Math.floor(canvas.width * .5);
bitmap.x = border.x = mask.x = 5;
bitmap.y = border.y = mask.y = 50;
popupText.innerHTML = prizeDescription;
popupText.style.fontSize = "32px";
popupText.style.width = bitmap.image.width + "px";
var textPos = bitmap.image.height + bitmap.y - popupText.clientHeight
popupText.style.top = textPos + "px";
textBackground.graphics.clear();
textBackground.graphics.beginFill("#bcecfd");
textBackground.alpha = .8;
textBackground.graphics.drawRect(0, 0, bitmap.image.width, popupText.clientHeight);
textBackground.x = bitmap.x;
textBackground.y = bitmap.image.height + bitmap.y - popupText.clientHeight;
textBackground.mask = mask;
stage.addChild(textBackground);
stage.update();
canvas.style.top = "-20%";
if (mobile) {
popupElement.style.position = "absolute";
var scale = 880 / canvas.width;
var cHeight = scale * canvas.height;
canvas.style.width = 800 + "px";
canvas.style.height = cHeight + "px";
canvas.style.marginTop = "120px";
canvas.style.marginLeft = -400 + "px";
popupText.style.marginLeft = (-400) + "px";
popupText.style.fontSize = (Math.floor(32 * scale)) + "px";
popupText.style.width = (800 - (20 * scale)) + "px";
popupText.style.paddingLeft = popupText.style.paddingRight = (10 * scale) + "px";
popupText.style.marginTop = "120px";
popupText.style.top = ((bitmap.image.height + bitmap.y) * scale - popupText.clientHeight) + "px";
createjs.Tween.get(popupElement).to({top: 0}, 300, createjs.Ease.backOut);//.call(hoverAnimComplete, null, this);
} else {
var pos = -Math.floor(canvas.width * .5);
canvas.style.marginLeft = pos + "px";
popupText.marginTop = "0px";
popupText.style.marginLeft = (pos + 5) + "px";
createjs.Tween.get(popupElement).to({top: 10}, 300, createjs.Ease.backOut);//.call(hoverAnimComplete, null, this);
}
}
init();
this.open = function (imageUrl, buttonLink) {
var img = document.createElement("img");
img.onload = imageLoaded;
img.src = imageUrl;
link = buttonLink;
disableCircles();
holder.style.visibility = "visible";
background.style.opacity = 0;
createjs.Tween.get(background).to({opacity: 1}, 1000, createjs.Ease.cubicOut);
}
}
function getColors() {
var array = new Array();
array[0] = "#ffffff";
array[1] = "#ffffff";
array[2] = "#ffffff";
array[3] = "#ffffff";
array[4] = "#ffffff";
array[5] = "#ffffff";
array[6] = "#ffffff";
array[7] = "#ffffff";
array[8] = "#ffffff";
array[9] = "#ffffff";
array[10] = "#ffffff";
array[11] = "#ffffff";
array[12] = "#ffffff";
array[13] = "#ffffff";
array[14] = "#ffffff";
array[15] = "#ffffff";
array[16] = "#ffffff";
array[17] = "#ffffff";
array[18] = "#ffffff";
array[19] = "#ffffff";
array[20] = "#ffffff";
array[21] = "#ffffff";
array[22] = "#ffffff";
array[23] = "#ffffff";
return array;
}
//function getColors() {
// var array = new Array();
// array[0] = "#00bbff";
// array[1] = "#fd6ec1";
// array[2] = "#6fb431";
// array[3] = "#6d5bbd";
// array[4] = "#e3cbfd";
// array[5] = "#fd6ec1";
// array[6] = "#6fb431";
// array[7] = "#fb3d2d";
// array[8] = "#aece1d";
// array[9] = "#ffb500";
// array[10] = "#aece1d";
// array[11] = "#00bbff";
// array[12] = "#ffc4c1";
// array[13] = "#fd6ec1";
// array[14] = "#ff8a00";
// array[15] = "#e3cbfd";
// array[16] = "#ff8a00";
// array[17] = "#6d5bbd";
// array[18] = "#00bbff";
// array[19] = "#ffb500";
// array[20] = "#fd6ec1";
// array[21] = "#6d5bbd";
// array[22] = "#fb3d2d";
// array[23] = "#00bbff";
//
// return array;
//}
function createMainSpritesheet(image) {
var yVal = -Math.floor(elementFrames[0].height * .5) + 1;
var numberOffset = 3;
for (var i = 0; i < 10; i++) {
var bitmap = new createjs.Bitmap(image);
bitmap.sourceRect = elementFrames[i];
bitmap.x = -Math.floor(elementFrames[i].width * .5);
bitmap.y = yVal;
switch (i) {
case 1:
bitmap.x += -2;
break;
case 2:
bitmap.x += -1;
break;
case 3:
bitmap.x += 1;
break;
case 4:
bitmap.x += -2;
break;
case 5:
bitmap.x += 1;
break;
case 6:
bitmap.x += 1;
break
case 7:
case 8:
case 9:
bitmap.x += 1;
bitmap.y += 1;
break;
}
var container = new createjs.Container();
container.addChild(bitmap);
numbers[i] = container;
}
for (i = 10; i < 29; i++) {
var index = Math.floor(i / 10);
var b1 = numbers[index].getChildAt(0).clone();
b1.sourceRect = numbers[index].getChildAt(0).sourceRect;
b1.x = -b1.sourceRect.width - numberOffset;
index = i % 10;
var b2 = numbers[index].getChildAt(0).clone();
b2.sourceRect = numbers[index].getChildAt(0).sourceRect;
b2.x = numberOffset;
b2.y = yVal;
var container = new createjs.Container();
container.addChild(b1);
container.addChild(b2);
numbers[i] = container;
switch (i) {
case 10:
b1.x -= 3;
b2.x -= 3;
b2.y += 1;
break;
case 11:
b1.x -= 1;
b2.x -= 1;
break;
case 12:
b1.x -= 3;
b2.x -= 3;
break;
case 13:
b1.x -= 3;
b2.x -= 3;
b2.y += 1;
break;
case 14:
b1.x -= 2;
b2.x -= 4;
b2.y += 1;
break;
case 15:
b1.x -= 3;
b2.x -= 3;
b2.y += 1;
break;
case 16:
b1.x -= 3;
b2.x -= 3;
b2.y += 1;
break;
case 17:
case 18:
b1.x -= 3;
b2.x -= 3;
break;
case 19:
b1.x -= 3;
b2.x -= 3;
b2.y += 1;
break;
case 20:
b1.x += 1;
b2.x += 0;
b2.y += 1;
break;
case 21:
b1.x += 3;
b2.x += 3;
break;
case 22:
b1.x += 1;
b2.x += 1;
break;
case 23:
b1.x += 1;
b2.x += 1;
b2.y += 1;
break;
case 24:
b1.x += 1;
b2.x += 0;
b2.y += 1;
break;
}
}
tempPresent = new createjs.Bitmap(image);
tempPresent.sourceRect = elementFrames[15];
tempPresent.regX = tempPresent.regY = 55;
}
function createFrames() {
var array = new Array();
//numbers
array[0] = new createjs.Rectangle(226, 0, 28, 46);
array[1] = new createjs.Rectangle(1, 0, 19, 46);
array[2] = new createjs.Rectangle(19, 0, 25, 46);
array[3] = new createjs.Rectangle(45, 0, 26, 46);
array[4] = new createjs.Rectangle(70, 0, 26, 46);
array[5] = new createjs.Rectangle(98, 0, 25, 46);
array[6] = new createjs.Rectangle(124, 0, 25, 46);
array[7] = new createjs.Rectangle(149, 0, 26, 46);
array[8] = new createjs.Rectangle(175, 0, 23, 46);
array[9] = new createjs.Rectangle(199, 0, 26, 46);
//star
array[10] = new createjs.Rectangle(262, 8, 137, 137);
//click to enter16,92,69,44
array[11] = new createjs.Rectangle(16, 92, 69, 44);
//my family club8,52,192,33
array[12] = new createjs.Rectangle(8, 52, 192, 33);
//advent calendar2,138,397,94
array[13] = new createjs.Rectangle(2, 138, 397, 94);
//text0,239,459,65
array[14] = new createjs.Rectangle(0, 239, 459, 65);
//present
array[15] = new createjs.Rectangle(405, 0, 110, 110);
return array;
}
function hexToR(h) {
return parseInt((cutHex(h)).substring(0, 2), 16)
}
function hexToG(h) {
return parseInt((cutHex(h)).substring(2, 4), 16)
}
function hexToB(h) {
return parseInt((cutHex(h)).substring(4, 6), 16)
}
function cutHex(h) {
return (h.charAt(0) == "#") ? h.substring(1, 7) : h
}
回答了我自己的问题。流浪汉。。。！
这就是当你看代码太久时会发生的事情！