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();


    $(".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;
        }
        $(".select-dish-box").hide();
        $(".game-box").show();
    })


    function ballAnim(dom) {
        var anim = new TimelineMax({ repeat: -1 });
        anim.to(dom, 0.15, { rotation: "-=15", ease: Power0.easeIn });
        anim.to(dom, 0.3, { rotation: "+=30", ease: Power0.easeIn });
        anim.to(dom, 0.3, { rotation: "-=30", ease: Power0.easeIn });
        anim.to(dom, 0.3, { rotation: "+=30", ease: Power0.easeIn });
        anim.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 })
        anim.to(dom, 0.3, { rotation: "-=25", ease: Power0.easeIn });
        anim.to(dom, 0.3, { rotation: "+=25", ease: Power0.easeIn });
        anim.to(dom, 0.3, { rotation: "-=25", ease: Power0.easeIn });
        anim.to(dom, 0.3, { rotation: "+=25", ease: Power0.easeIn });
        return anim;
    }

    function bowlAnim(callback) {
        var anim = new TimelineMax({ onComplete: callback, delay: 1 });
        anim.to(exportRoot.plate, 0.5, { y: "-=370", ease: Power0.easeIn })
        anim.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, 0.6, { rotation: "-=25", ease: Power0.easeIn })
        anim.to(exportRoot.pro, 1, {})
        anim.to(exportRoot.pro, 0.3, { alpha: 0, ease: Power0.easeIn })
        anim.to(exportRoot.pro, 1, {})
        return anim;
    }

    function btnAnim(dom){
        var anim = new TimelineMax({ repeat:-1 });
        anim.to(dom, 0.3, { scale: "+=0.1", ease: Power0.easeIn })
        anim.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;
    }


    // 红烧肉的位置
    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 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 < hsr_iconArr.length; p++) {
                    if (x-hsr_iconArr[p].width/3 > hsr_iconArr[p].x && x < (hsr_iconArr[p].x + hsr_iconArr[p].width)) {
                        if (y-hsr_iconArr[p].height/3 > hsr_iconArr[p].y && y < (hsr_iconArr[p].y + hsr_iconArr[p].height)) {
                            if (hsr_iconArr[p].isClear == false) {
                                exportRoot.plate['hsr_icon' + (p + 1)].gotoAndStop(1);
                                hsr_iconArr[p].isClear = true;
                                playbowlAnim();
                            }
                        }
                    }
                }
            }

            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) {

    })

    // 移动菜品
    function dishMove(dom) {
        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;
                dom.y = 630 - exportRoot.plate.y;
                dom.removeAllEventListeners();
                if (exportRoot.plate.hsr_icon1.y == exportRoot.plate.hsr_icon2.y && exportRoot.plate.hsr_icon1.y == exportRoot.plate.hsr_icon3.y && exportRoot.plate.hsr_icon1.y == exportRoot.plate.hsr_icon4.y) {
                    exportRoot.btn1.alpha = 1;
                    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.plate.alpha = 0;
            exportRoot.bowl.alpha = 0;
            exportRoot.pot.alpha = 1;
            exportRoot.pro.alpha = 1;
            proAnim(function() {
                exportRoot.pot.hsr.stop();
                fadeInAnim(exportRoot.pot.hsr);
                exportRoot.btn2.alpha = 1;
                btnAnim(exportRoot.btn2);
            });
        })
        exportRoot.btn2.addEventListener("mousedown", function() {
            exportRoot.btn2.removeAllEventListeners();
            exportRoot.btn2.alpha = 0;
            fadeInAnim(exportRoot.blackboard);
            exportRoot.ball1.alpha = 1;

            ballAnim(exportRoot.ball1);
        })

        exportRoot.blackboard.material1.addEventListener("mousedown", function() {
            exportRoot.blackboard.material1.removeAllEventListeners();
            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.material2.removeAllEventListeners();
            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.material3.removeAllEventListeners();
            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 < hsr_iconArr.length; i++) {
            if (hsr_iconArr[i].isClear == false) {
                return false;
            }
        }
        stage.removeChild(lineShape);
        clearInterval(lineTimr);
        exportRoot.removeAllEventListeners();


        bowlAnim(function() {
            dishMove(exportRoot.plate.hsr_icon1);
            dishMove(exportRoot.plate.hsr_icon2);
            dishMove(exportRoot.plate.hsr_icon3);
            dishMove(exportRoot.plate.hsr_icon4);
        });
    }




    function shakeInit() {
        if (window.DeviceMotionEvent) {
            window.addEventListener('devicemotion', deviceMotionHandler, false);
        } else {
            alert('您的手机不支持摇一摇功能！');
        }

        setTimeout(function(){
            window.removeEventListener('devicemotion', deviceMotionHandler, false);
            $(".shake-mode").hide();
            exportRoot.pot.hsr.play();
            exportRoot.btn3.alpha = 1;
        },3000)
        //获取加速度信息
        //通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率，进行设备是否有进行晃动的判断。
        //而为了防止正常移动的误判，需要给该变化率设置一个合适的临界值。
        var SHAKE_THRESHOLD = 8000; //阈值越大，触发摇晃事件时手机摇晃的程度越剧烈
        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) {
                    //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';
    }
}