THUTHACH/WebChallenge/WebChallenge/wwwroot/games/G11/js/CHelp.js

function CHelp(){
    
    var _oParent = this;
    
    var _oBg;
    var _oGroup1;
    
    var _oButPlay;
    
    var _oCursorMovingContainer;
    var _oTargetContainer;

    var _oMsgTextOutline;
    var _oMsgText;
    var _oMsgTextReleaseOutline;
    var _oMsgTextRelease;
    
    this._init = function(){
        _oBg = createBitmap(s_oSpriteLibrary.getSprite('bg_menu'));
        s_oStage.addChild(_oBg);
        
        var oShape = new createjs.Shape();
        oShape.graphics.beginFill("#000000").drawRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
        oShape.alpha = 0.7;
        s_oStage.addChild(oShape);
        
        _oGroup1 = new createjs.Container();
        _oGroup1.y = CANVAS_WIDTH;
        _oGroup1.alpha = 0;
        
        _oBg = createBitmap(s_oSpriteLibrary.getSprite('msg_box'));
        _oGroup1.addChild(_oBg);
                
        _oMsgTextOutline = new createjs.Text(""," 25px "+FONT, "#000");
        _oMsgTextOutline.x = CANVAS_WIDTH/2+2;
        _oMsgTextOutline.y = (CANVAS_HEIGHT/2)-113;
        _oMsgTextOutline.textAlign = "center";
        _oMsgTextOutline.textBaseline = "alphabetic";
        _oMsgTextOutline.lineWidth = 400;     
        _oGroup1.addChild(_oMsgTextOutline);
                
        _oMsgText = new createjs.Text(""," 25px "+FONT, "#ffc949");
        _oMsgText.x = CANVAS_WIDTH/2;
        _oMsgText.y = (CANVAS_HEIGHT/2)-115;
        _oMsgText.textAlign = "center";
        _oMsgText.textBaseline = "alphabetic";
        _oMsgText.lineWidth = 400;     
        _oGroup1.addChild(_oMsgText);
                
        _oMsgTextReleaseOutline = new createjs.Text(""," 25px "+FONT, "#000");
        _oMsgTextReleaseOutline.x = CANVAS_WIDTH/2+2;
        _oMsgTextReleaseOutline.y = (CANVAS_HEIGHT/2)+52;
        _oMsgTextReleaseOutline.textAlign = "center";
        _oMsgTextReleaseOutline.textBaseline = "alphabetic";
        _oMsgTextReleaseOutline.lineWidth = 400;     
        _oGroup1.addChild(_oMsgTextReleaseOutline);
                
        _oMsgTextRelease = new createjs.Text(""," 25px "+FONT, "#ffc949");
        _oMsgTextRelease.x = CANVAS_WIDTH/2;
        _oMsgTextRelease.y = (CANVAS_HEIGHT/2)+50;
        _oMsgTextRelease.textAlign = "center";
        _oMsgTextRelease.textBaseline = "alphabetic";
        _oMsgTextRelease.lineWidth = 400;     
        _oGroup1.addChild(_oMsgTextRelease);
        
        _oCursorMovingContainer = new createjs.Container();
        _oCursorMovingContainer.x = 150;
        _oCursorMovingContainer.y = 440;
        _oGroup1.addChild(_oCursorMovingContainer);
        
        var oPlayer = createBitmap(s_oSpriteLibrary.getSprite('player'));
        _oCursorMovingContainer.addChild(oPlayer);
        
        var oCursor = createBitmap(s_oSpriteLibrary.getSprite('cursor_help'));
        oCursor.x = 8;
        oCursor.y = 20;
        _oCursorMovingContainer.addChild(oCursor);
        
        _oTargetContainer = new createjs.Container();
        _oTargetContainer.x = 250;
        _oTargetContainer.y = 600;
        _oGroup1.addChild(_oTargetContainer);
        
        var oTargetSprite = createBitmap(s_oSpriteLibrary.getSprite('target'));
        oTargetSprite.scaleX = oTargetSprite.scaleY = 0.6;
        _oTargetContainer.addChild(oTargetSprite); //Draws on canvas
        
        var oGoalTextStroke = new createjs.Text("12/30"," 25px "+FONT, "#000");
        oGoalTextStroke.x = 35+2;
        oGoalTextStroke.y = 25;
        oGoalTextStroke.textAlign = "left";
        oGoalTextStroke.textBaseline = "alphabetic";
        oGoalTextStroke.lineWidth = 650;
        _oTargetContainer.addChild(oGoalTextStroke); //Draws on canvas
        
        var oGoalText = new createjs.Text("12/30"," 25px "+FONT, "#ffc949");
        oGoalText.x = 35;
        oGoalText.y = 23;
        oGoalText.textAlign = "left";
        oGoalText.textBaseline = "alphabetic";
        oGoalText.lineWidth = 650;
        _oTargetContainer.addChild(oGoalText); //Draws on canvas
        
        s_oStage.addChild(_oGroup1);
        
        _oButPlay = createBitmap(s_oSpriteLibrary.getSprite('but_next'));
        _oButPlay.x = CANVAS_WIDTH/2-45;
        _oButPlay.y = CANVAS_HEIGHT/2+190;
        _oButPlay.cursor = "pointer";
        _oGroup1.addChild(_oButPlay);
        
        this.show();
        this.startCursorAnimationRight();
    };
        
    this._initListener = function(){
        _oButPlay.addEventListener("click",this._onExit);
    };
        
    this.show = function(){
        _oMsgTextOutline.text = TEXT_HELP_PANEL_MOVE;
        _oMsgText.text = TEXT_HELP_PANEL_MOVE;
        _oMsgTextReleaseOutline.text = TEXT_HELP_PANEL_RELEASE;
        _oMsgTextRelease.text = TEXT_HELP_PANEL_RELEASE;
        
        createjs.Tween.get(_oGroup1).to({alpha:1 }, 500).call(function() {_oParent._initListener();});
        createjs.Tween.get(_oGroup1).to({y: 0 }, 500, createjs.Ease.quadOut).call(function() {});
    };
    
    this.startCursorAnimationRight = function(){
        createjs.Tween.get(_oCursorMovingContainer).to({ x: 450 }, 2000).call(function() {_oParent.startCursorAnimationLeft();});
    };
    
    this.startCursorAnimationLeft = function(){
        createjs.Tween.get(_oCursorMovingContainer).to({ x: 150 }, 2000).call(function() {_oParent.startCursorAnimationRight();});
    };
    
    this._onExit = function(){
        _oParent.unload();
        s_oMain.gotoGame(0);
    };
    
    this.unload = function(){
        createjs.Tween.removeAllTweens();
        s_oStage.removeAllChildren();
        
    };
    
    this._init();
    
    return this;
}