game/minigame/WebContent/static/js/main.js

document.body.addEventListener('touchmove', bodyScroll, { passive: false });

function bodyScroll(event) {
    event.preventDefault();
}

var canvas = document.getElementById("canvas");
var stage = new createjs.Stage(canvas);

function init() {
    var comp = AdobeAn.getComposition("5529E26743974F469545223C44E61D22");
    var lib = comp.getLibrary();
    var loader = new createjs.LoadQueue(false);
    loader.addEventListener("fileload", function(evt) { handleFileLoad(evt, comp) });
    loader.addEventListener("complete", function(evt) { handleComplete(evt, comp) });
    loader.addEventListener("progress", loadProgressHandler);
    var lib = comp.getLibrary();
    loader.loadManifest(lib.properties.manifest);
    createjs.MotionGuidePlugin.install();
    createjs.Touch.enable(stage);
}

function handleFileLoad(evt, comp) {
    var loadingimages = comp.getImages();
    if (evt && (evt.item.type == "image")) {
        loadingimages[evt.item.id] = evt.result;
    }
}

function loadProgressHandler(event) {
    var num = Math.floor(event.progress * 100);
    $("#loadingTxt").text(num);
    $("#loadingBar").css("width", num + '%');
}

function handleComplete(evt, comp) {
    //This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
    var lib = comp.getLibrary();
    var ss = comp.getSpriteSheet();
    var queue = evt.target;
    var ssMetadata = lib.ssMetadata;
    for (i = 0; i < ssMetadata.length; i++) {
        ss[ssMetadata[i].name] = new createjs.SpriteSheet({ "images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames })
    }
    var exportRoot = new lib.assets();
    $(".loading").fadeOut(function(){
        $(".select-dish-box").find(".animated").removeClass("js-an");
    });


    var dishIndex = 0;
    $(".select-dish-box .item").on("click", function() {
        $(this).addClass("active").siblings().removeClass("active");
        $(".select-dish-box .confirm").show();
    })
    $(".select-dish-box .confirm").on("click", function() {
        if (!$(".select-dish-box .item").hasClass("active")) {
            alert("请选择你要做的菜")
            return false;
        }
        dishIndex = $(".select-dish-box .item.active").index();
        $(".select-dish-box").hide();
        $(".game-box").show();

        // 判断是哪个菜
        if(dishIndex == 0){
            exportRoot.plate.hsr_icon1.alpha = 1;
            exportRoot.plate.hsr_icon2.alpha = 1;
            exportRoot.plate.hsr_icon3.alpha = 1;
            exportRoot.plate.hsr_icon4.alpha = 1;
            cutDishArr = hsr_iconArr;
        }else if(dishIndex == 1){
            exportRoot.plate.qcdf_icon1.alpha = 1;
            exportRoot.plate.qcdf_icon2.alpha = 1;
            exportRoot.plate.qcdf_icon3.alpha = 1;
            exportRoot.plate.qcdf_icon4.alpha = 1;
            exportRoot.plate.qcdf_icon5.alpha = 1;
            cutDishArr = qcdf_iconArr;
        }else if(dishIndex == 2){
            exportRoot.plate.swy_icon1.alpha = 1;
            exportRoot.plate.swy_icon2.alpha = 1;
            cutDishArr = swy_iconArr;
        }else{
            exportRoot.plate.ymc_icon1.alpha = 1;
            exportRoot.plate.ymc_icon2.alpha = 1;
            exportRoot.plate.ymc_icon3.alpha = 1;
            exportRoot.plate.ymc_icon4.alpha = 1;
            cutDishArr = ymc_iconArr;
        }
    })
    $(".replay-btn").on("click",function(){
        location.reload()
    })
    $(".secret-btn").on("click",function(){
        $(".secret-box").fadeIn();
    })
    $(".secret-box").on("click",function(){
        $(".secret-box").fadeOut();
    })


    function ballAnim(dom) {
        var anim = new TimelineMax({ repeat: -1 });
        anim.to(dom, 0.15, { rotation: "-=15", ease: Power0.easeIn })
        .to(dom, 0.3, { rotation: "+=30", ease: Power0.easeIn })
        .to(dom, 0.3, { rotation: "-=30", ease: Power0.easeIn })
        .to(dom, 0.3, { rotation: "+=30", ease: Power0.easeIn })
        .to(dom, 0.15, { rotation: "-=15", ease: Power0.easeIn });
        return anim;
    }

    function materialAnim(dom, x, y, callback) {
        var anim = new TimelineMax({ onComplete: callback });
        anim.to(dom, 0.5, { x: "+=" + x, y: "+=" + y, ease: Power0.easeIn })
        .to(dom, 0.3, { rotation: "-=25", ease: Power0.easeIn })
        .to(dom, 0.3, { rotation: "+=25", ease: Power0.easeIn })
        .to(dom, 0.3, { rotation: "-=25", ease: Power0.easeIn })
        .to(dom, 0.3, { rotation: "+=25", ease: Power0.easeIn });
        return anim;
    }

    function oilAnim(){
        if(dishIndex != 2){
            var dom = exportRoot.pot.oil;
        }else{
            var dom = exportRoot.bowl.oil;
        }
        var anim = new TimelineMax({ delay:0.8});
        anim.to(dom, 0.4, { alpha: 1, ease: Power0.easeIn })
        .to(dom, 1, { scale: 1, ease: Power0.easeIn })
        return anim;
    }
    function bowlAnim(callback) {
        var anim = new TimelineMax({ onComplete: callback, delay: 0.3 });
        anim.to(exportRoot.plate, 0.5, { y: "-=370", ease: Power0.easeIn })
        .to(exportRoot.bowl, 0.5, { alpha: 1, ease: Power0.easeIn });
        return anim;
    }

    function proAnim(callback) {
        var anim = new TimelineMax({ onComplete: callback, delay: 0.5 });
        anim.to(exportRoot.pro.proImg, 0.5, { rotation: "-=25", ease: Power0.easeIn })
        .to(exportRoot.pro.oil_icon1, 0.3, {alpha:1})
        .to(exportRoot.pro.oil_icon2, 0.2, {alpha:1})
        .to(exportRoot.pro.proImg, 1, {})
        .to(exportRoot.pro, 0.3, { alpha: 0, ease: Power0.easeIn })
        .to(exportRoot.pro, 1, {})
        return anim;
    }
    function oilIconAnim() {
        oilAnim();
        var anim = new TimelineMax({ repeat:10,delay:1});
        anim.to(exportRoot.pro.oil_icon2, 0.3, {y:"+=100",alpha:0})
        return anim;
    }

    function btnAnim(dom){
        var anim = new TimelineMax({ repeat:-1 });
        anim.to(dom, 0.3, { scale: "+=0.1", ease: Power0.easeIn })
        .to(dom, 0.3, { scale: "-=0.1", ease: Power0.easeIn })
        return anim;
    }
    function fadeInAnim(dom){
        var anim = new TimelineMax({ });
        anim.to(dom, 0.4, { alpha: 1, ease: Power0.easeIn })
        return anim;
    }

    function materialEnterAnim(dom,delay){
        dom.scale = 0.1;
        delay = delay || 0.1;
        var anim = new TimelineMax({ delay:delay});
        anim.to(dom,1.2, { scale: 1, ease: Elastic.easeOut.config(1, 0.3) })
        return anim;
    }

    var cutDishArr = [];
    // 油麦菜
    var ymc_iconArr = [
        {
            x: exportRoot.plate.x + exportRoot.plate.ymc_icon1.x,
            y: exportRoot.plate.y + exportRoot.plate.ymc_icon1.y,
            width: 266,
            height: 187,
            isClear: false
        },
        {
            x: exportRoot.plate.x + exportRoot.plate.ymc_icon2.x,
            y: exportRoot.plate.y + exportRoot.plate.ymc_icon2.y,
            width: 103,
            height: 118,
            isClear: false
        },
        {
            x: exportRoot.plate.x + exportRoot.plate.ymc_icon3.x,
            y: exportRoot.plate.y + exportRoot.plate.ymc_icon3.y,
            width: 371,
            height: 144,
            isClear: false
        },
        {
            x: exportRoot.plate.x + exportRoot.plate.ymc_icon4.x,
            y: exportRoot.plate.y + exportRoot.plate.ymc_icon4.y,
            width: 86,
            height: 75,
            isClear: false
        }
    ]
    // 三文鱼
    var swy_iconArr = [
        {
            x: exportRoot.plate.x + exportRoot.plate.hsr_icon1.x,
            y: exportRoot.plate.y + exportRoot.plate.hsr_icon1.y,
            width: 262,
            height: 195,
            isClear: false
        }
    ]
    // 红烧肉的位置
    var hsr_iconArr = [{
            x: exportRoot.plate.x + exportRoot.plate.hsr_icon1.x,
            y: exportRoot.plate.y + exportRoot.plate.hsr_icon1.y,
            width: 202,
            height: 129,
            isClear: false
        },
        {
            x: exportRoot.plate.x + exportRoot.plate.hsr_icon2.x,
            y: exportRoot.plate.y + exportRoot.plate.hsr_icon2.y,
            width: 86,
            height: 75,
            isClear: false
        },
        {
            x: exportRoot.plate.x + exportRoot.plate.hsr_icon3.x,
            y: exportRoot.plate.y + exportRoot.plate.hsr_icon3.y,
            width: 371,
            height: 144,
            isClear: false
        },
        {
            x: exportRoot.plate.x + exportRoot.plate.hsr_icon4.x,
            y: exportRoot.plate.y + exportRoot.plate.hsr_icon4.y,
            width: 103,
            height: 118,
            isClear: false
        }
    ];
    // 青菜豆腐的位置
    var qcdf_iconArr = [{
            x: exportRoot.plate.x + exportRoot.plate.qcdf_icon1.x,
            y: exportRoot.plate.y + exportRoot.plate.qcdf_icon1.y,
            width: 169,
            height: 320,
            isClear: false
        },
        {
            x: exportRoot.plate.x + exportRoot.plate.qcdf_icon2.x,
            y: exportRoot.plate.y + exportRoot.plate.qcdf_icon2.y,
            width: 207,
            height: 144,
            isClear: false
        },
        {
            x: exportRoot.plate.x + exportRoot.plate.qcdf_icon3.x,
            y: exportRoot.plate.y + exportRoot.plate.qcdf_icon3.y,
            width: 103,
            height: 118,
            isClear: false
        },
        {
            x: exportRoot.plate.x + exportRoot.plate.qcdf_icon4.x,
            y: exportRoot.plate.y + exportRoot.plate.qcdf_icon4.y,
            width: 371,
            height: 144,
            isClear: false
        },
        {
            x: exportRoot.plate.x + exportRoot.plate.qcdf_icon5.x,
            y: exportRoot.plate.y + exportRoot.plate.qcdf_icon5.y,
            width: 86,
            height: 75,
            isClear: false
        }
    ]


    // 画线
    var lineArr = [];
    var lineTimr = null;
    var lineShape = new createjs.Shape();

    function drawLine() {
        var value = 40;
        lineTimr = setInterval(function() {
            lineShape.graphics.clear();
            lineShape.graphics.setStrokeStyle(8).beginStroke("#787878");
            if (lineArr.length) {
                lineShape.graphics.moveTo(lineArr[0].x, lineArr[0].y);
            }
            for (var i = 0; i < lineArr.length; i++) {
                var x = lineArr[i].x;
                var y = lineArr[i].y;
                lineShape.graphics.lineTo(x, y);
                for (var p = 0; p < cutDishArr.length; p++) {
                    if (x-cutDishArr[p].width/3 > cutDishArr[p].x && x < (cutDishArr[p].x + cutDishArr[p].width)) {
                        if (y-cutDishArr[p].height/3 > cutDishArr[p].y && y < (cutDishArr[p].y + cutDishArr[p].height)) {
                            if (cutDishArr[p].isClear == false) {
                                cutDishArr[p].isClear = true;
                                if(dishIndex == 0){
                                    exportRoot.plate['hsr_icon' + (p + 1)].gotoAndStop(1);
                                }else if(dishIndex == 1){
                                    exportRoot.plate['qcdf_icon' + (p + 1)].gotoAndStop(1);
                                }else if(dishIndex == 2){
                                    exportRoot.plate.swy_icon1.gotoAndStop(1);
                                }else{
                                    exportRoot.plate['ymc_icon' + (p + 1)].gotoAndStop(1);
                                }
                            }
                        }
                    }
                }
            }

            lineArr.splice(0, 1);
        }, 30)
    }
    // 画线事件
    drawLine();
    exportRoot.addEventListener("mousedown", function(event) {
        lineArr = [];
        var obj = {
            x: event.stageX,
            y: event.stageY,
        };
        lineArr.push(obj);
    })
    exportRoot.addEventListener("pressmove", function(event) {
        if (lineArr.length >= 15) {
            lineArr.splice(0, 1);
        }
        var obj = {
            x: event.stageX,
            y: event.stageY,
        };
        lineArr.push(obj);
    })
    exportRoot.addEventListener("pressup", function(event) {
        playbowlAnim();
    })


    var dishMoveIndex = 0;
    // 移动菜品
    function dishMove(dom,x,y) {
        var startX = 0;
        var startY = 0;
        var domFirst = $.extend(true, {}, dom);
        dom.addEventListener("mousedown", function(event) {
            startX = event.stageX;
            startY = event.stageY;
        })
        dom.addEventListener("pressmove", function(event) {
            dom.x -= (startX - event.stageX);
            dom.y -= (startY - event.stageY);
            startX = event.stageX;
            startY = event.stageY;
        })
        dom.addEventListener("pressup", function(event) {
            if (dom.x + exportRoot.plate.x > 80 && dom.y + exportRoot.plate.y > 518) {
                dom.x = 190 - exportRoot.plate.x + x;
                dom.y = 630 - exportRoot.plate.y + y;
                dom.removeAllEventListeners();

                if(dishIndex == 0){
                    ++dishMoveIndex;
                    if (dishMoveIndex >= 4) {
                        exportRoot.btn1.alpha = 1;
                        btnAnim(exportRoot.btn1);
                        isAllInplate();
                    }
                }else if(dishIndex == 1){
                    ++dishMoveIndex;
                    if (dishMoveIndex >= 5) {
                        exportRoot.btn1.alpha = 1;
                        btnAnim(exportRoot.btn1);
                        isAllInplate();
                    }
                }else if(dishIndex == 2){
                    exportRoot.btn1.alpha = 1;
                    btnAnim(exportRoot.btn1);
                    isAllInplate();
                }else{
                    ++dishMoveIndex;
                    if (dishMoveIndex >= 4) {
                        exportRoot.btn1.alpha = 1;
                        btnAnim(exportRoot.btn1);
                        isAllInplate();
                    }
                }

            } else {
                dom.x = domFirst.x;
                dom.y = domFirst.y;
            }
        })
    }



    // 菜全部到盘子里
    function isAllInplate() {
        exportRoot.btn1.addEventListener("mousedown", function() {
            exportRoot.btn1.removeAllEventListeners();
            exportRoot.btn1.alpha = 0;
            exportRoot.pro.alpha = 1;
            if(dishIndex != 2){
                exportRoot.bowl.alpha = 0;
                exportRoot.plate.alpha = 0;
                exportRoot.pot.alpha = 1;
            }else{
                exportRoot.plate.instance.alpha = 0;
                exportRoot.plate.swy_icon2.alpha = 0;
            }

            oilIconAnim();
            proAnim(function() {
                exportRoot.btn2.alpha = 1;
                btnAnim(exportRoot.btn2);
                if(dishIndex == 0){
                    fadeInAnim(exportRoot.pot.hsr);
                }else if(dishIndex == 1){
                    fadeInAnim(exportRoot.pot.qcdf);
                }else if(dishIndex == 3){
                    fadeInAnim(exportRoot.pot.ymc);
                }
            });
        })
        exportRoot.btn2.addEventListener("mousedown", function() {
            exportRoot.btn2.removeAllEventListeners();
            exportRoot.btn2.alpha = 0;
            fadeInAnim(exportRoot.blackboard);
            materialEnterAnim(exportRoot.blackboard.material1,0.2);
            materialEnterAnim(exportRoot.blackboard.material2,0.4);
            materialEnterAnim(exportRoot.blackboard.material3,0.6);
            exportRoot.ball1.alpha = 1;

            ballAnim(exportRoot.ball1);
        })

        exportRoot.blackboard.material1.addEventListener("mousedown", function() {
            exportRoot.blackboard.material1.removeAllEventListeners();
            exportRoot.blackboard.material2.removeAllEventListeners();
            exportRoot.blackboard.material3.removeAllEventListeners();
            $(".poster-mode").addClass("poster-bg3");
            materialAnim(exportRoot.blackboard.material1, 300, 180, function() {
                exportRoot.blackboard.material1.x -=300;
                exportRoot.blackboard.material1.y -=180;
                // $(".shake-mode").show();
                shakeInit();
            });
        })
        exportRoot.blackboard.material2.addEventListener("mousedown", function() {
            exportRoot.blackboard.material1.removeAllEventListeners();
            exportRoot.blackboard.material2.removeAllEventListeners();
            exportRoot.blackboard.material3.removeAllEventListeners();
            $(".poster-mode").addClass("poster-bg2");
            materialAnim(exportRoot.blackboard.material2, 120, 180, function() {
                exportRoot.blackboard.material2.x -=120;
                exportRoot.blackboard.material2.y -=180;
                // $(".shake-mode").show();
                shakeInit();
            });
        })
        exportRoot.blackboard.material3.addEventListener("mousedown", function() {
            exportRoot.blackboard.material1.removeAllEventListeners();
            exportRoot.blackboard.material2.removeAllEventListeners();
            exportRoot.blackboard.material3.removeAllEventListeners();
            $(".poster-mode").addClass("poster-bg1");
            materialAnim(exportRoot.blackboard.material3, -30, 180, function() {
                exportRoot.blackboard.material3.x +=30;
                exportRoot.blackboard.material3.y -=180;
                // $(".shake-mode").show();
                shakeInit();
            });
        })
    }

    // 菜切完盘子上移动
    function playbowlAnim() {
        for (var i = 0; i < cutDishArr.length; i++) {
            if (cutDishArr[i].isClear == false) {
                return false;
            }
        }
        stage.removeChild(lineShape);
        clearInterval(lineTimr);
        exportRoot.removeAllEventListeners();


        bowlAnim(function() {
            if(dishIndex == 0){
                dishMove(exportRoot.plate.hsr_icon1,0,0);
                dishMove(exportRoot.plate.hsr_icon2,0,0);
                dishMove(exportRoot.plate.hsr_icon3,0,0);
                dishMove(exportRoot.plate.hsr_icon4,0,0);
            }else if(dishIndex == 1){
                dishMove(exportRoot.plate.qcdf_icon1,0,-80);
                dishMove(exportRoot.plate.qcdf_icon2,0,0);
                dishMove(exportRoot.plate.qcdf_icon3,0,0);
                dishMove(exportRoot.plate.qcdf_icon4,0,0);
                dishMove(exportRoot.plate.qcdf_icon5,0,0);
            }else if(dishIndex == 2){
                dishMove(exportRoot.plate.swy_icon1,120,100);
            }else{
                dishMove(exportRoot.plate.ymc_icon1,0,0);
                dishMove(exportRoot.plate.ymc_icon2,0,0);
                dishMove(exportRoot.plate.ymc_icon3,0,0);
                dishMove(exportRoot.plate.ymc_icon4,0,0);
            }

        });
    }




    function shakeInit() {
        var shake_cnt = 0;
        $(".shake-mode2").show();
        if (window.DeviceMotionEvent) {
            window.addEventListener('devicemotion', deviceMotionHandler, false);
        } else {
            alert('您的手机不支持摇一摇功能！');
        }

        //获取加速度信息
        //通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率，进行设备是否有进行晃动的判断。
        //而为了防止正常移动的误判，需要给该变化率设置一个合适的临界值。
        var SHAKE_THRESHOLD = 10000; //阈值越大，触发摇晃事件时手机摇晃的程度越剧烈
        var last_update = 0;
        var x, y, z, last_x = 0,
            last_y = 0,
            last_z = 0;

        function deviceMotionHandler(eventData) {
            var acceleration = eventData.accelerationIncludingGravity;
            var curTime = new Date().getTime();
            if ((curTime - last_update) > 10) {
                var diffTime = curTime - last_update;
                last_update = curTime;
                x = acceleration.x;
                y = acceleration.y;
                z = acceleration.z;
                var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
                if (speed > SHAKE_THRESHOLD) {
                    $(".shake-mode").show();
                    $(".shake-mode2").hide();
                    shake_cnt++;
                    if(shake_cnt>2){
                        setTimeout(function(){
                            window.removeEventListener('devicemotion', deviceMotionHandler, false);
                            exportRoot.pot.hsr.play();
                            // exportRoot.btn3.alpha = 1;
                            // btnAnim(exportRoot.btn3);
                            // exportRoot.btn3.addEventListener("mousedown",function(){
                            //     exportRoot.btn3.removeAllEventListeners();
                            //     $(".poster-mode").fadeIn();
                            // })


                            if(dishIndex == 0){
                                exportRoot.pot.hsr.gotoAndStop(1);
                            }else if(dishIndex == 1){
                                exportRoot.pot.qcdf.gotoAndStop(1);
                            }else if(dishIndex == 2){
                                exportRoot.bowl.oil.alpha = 0;
                                exportRoot.plate['swy_icon1'].gotoAndStop(2);
                            }else{
                                exportRoot.pot.ymc.gotoAndStop(1);
                            }
                            $(".shake-mode").fadeOut();
                            exportRoot.btn3.removeAllEventListeners();
                            $(".poster-mode").fadeIn();
                        },3000)

                    }
                    //dosomething
                    $("#fire").addClass("anim-time");
                }else{
                    $("#fire").removeClass("anim-time");
                }
                last_x = x;
                last_y = y;
                last_z = z;
            }
        }

    }






    //Registers the "tick" event listener.
    function fnStartAnimation() {
        stage.addChild(exportRoot, lineShape);
        createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
        createjs.Ticker.addEventListener("tick", stage);
    }
    fnStartAnimation();
    stageBreakHandler();
}



// 自适应
var stageWidth, stageHeight, stageScale;

function stageBreakHandler(event) {
    if (stageWidth != $(".warp").width() || stageHeight != $(".warp").height()) {
        stageWidth = $(".warp").width();
        stageHeight = $(".warp").height();

        stageScale = stageWidth / 640;
        canvas.style.width = 640 * stageScale + 'px';
        canvas.style.height = 1040 * stageScale + 'px';
    }
}