Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
    <title>電流急急棒</title>
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/EaselJS/0.8.0/easeljs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="800" height="600" style="background-color:#d3d3d3"></canvas>
    <script src="demo.js"></script> 
    <script>
        
    </script>
</body>
</html>
 
/* globals createjs */
// 宣告====================================
// 初始 -------
var cjs = createjs;
var canvas = document.getElementById( "canvas" );
var stage = new createjs.Stage( canvas );
var iWinW = window.innerWidth;
var iWinH = window.innerHeight;
var container;
var shapeCircle;
var ptLeft;
var ptRight;
createjs.Touch.enable(stage);
// target 圓 -------
var iWidthCircle = 20; // 圓半徑
var sColorCircle = "gold";
// Obstruct 障礙物 -------
// Line 線 -------
var sColorLine = "#666";
var iWidthLine = 140; // 線的寬度
var iDotY = iWinW * 0.6; // y軸距離
var iMapLen = 10; // 關卡節點
var iMapH; // 關卡總長
var saveDot = 2; // 緩衝長度
// 動畫 -------
var iSpf = 60; // fps
var iSpeedLine = 7; //移動速度
// ====================================
// 載入畫面 ================
if (iWinW >= 768){
    iWidthCircle = 30;
    iWidthLine = 250;
    iDotY = iWinW * 0.4;
    iSpeedLine = 10;
}
canvas.width = iWinW ;
canvas.height = iWinH - 5;
fnMessage("rule");
// ================
// 初始 - 產生元素 ====================================
function init(){
    // 加入元素 -----------
    var iMap = []; 
    for (var i=0; i<iMapLen; i++){
        iMap.push(fnRandomColor(-1,1));
    }
    fnDrawTarget();
    fnDrawLine();
    container = new createjs.Container();
    container.addChild( oLine, shapeCircle );
    stage.addChild(container);
    fnEventLis();
    // init - 畫圓 ========================
    function fnDrawTarget(){
        shapeCircle = new cjs.Shape();
        shapeCircle.graphics
            .beginFill( sColorCircle )
            .drawCircle( 0, 0, iWidthCircle )
            .endFill();
        stage.enableMouseOver();
        shapeCircle.cursor = "pointer";
        shapeCircle.cache(-iWidthCircle, -iWidthCircle, iWidthCircle*2, iWidthCircle*2);
        shapeCircle.x = iWinW/2;
        shapeCircle.y = iWidthCircle*2 ;
    }
    // init - 畫線 =====================
    function fnDrawLine(){
        oLine = fnCreateLine();
        oLine.x = iWinW/2;
        oLine.y = -iDotY;
        iMapH = oLine.getBounds().height;
        // 產生線 ========================
        function fnCreateLine() {
            var shape = new createjs.Shape();
            // 滑鼠點下
            function LineStart( x , y) {
                lastPt = new createjs.Point(x , y);
                oldMidPt = lastPt.clone();
            }
            // 滑鼠移動
            function LineDot(x, y) {
                // 取得按下時和目前滑鼠座標的一半值。
                x = (iWinW/2) * x;
                var nowMidPt = new createjs.Point(
                    lastPt.x + x >> 1, 
                    lastPt.y + y >> 1
                );  
                // 畫線
                shape.graphics
                    .setStrokeStyle(iWidthLine, 'round', 'round')
                    .beginStroke(sColorLine)        
                    .moveTo( oldMidPt.x, oldMidPt.y )                   
                    .curveTo(lastPt.x, lastPt.y, nowMidPt.x, nowMidPt.y);       
                lastPt.x = x;
                lastPt.y = y;
                oldMidPt.x = nowMidPt.x;
                oldMidPt.y = nowMidPt.y;    
            }
            // 畫起始點 -----------
            LineStart(0, 0);
            LineDot(0, iDotY*saveDot);
            // 畫接下來每一點
            for (var i=saveDot+1, len=iMap.length; i<len; i++){
                y = i * iDotY;
                LineDot(iMap[i], y);
            }
            // cache
            shape.cache(-iWinW/2 , iWidthLine, iWinW, iMap.length*iDotY);
            return shape;
        }
    }
    // init - 監聽 ========================
    function fnEventLis(){
        // 監聽事件 - 滑鼠按下 ------------
        var isMouseDown;
        var handleMouseDown = function ( event ) {
            isMouseDown = true;
            fnMoveCircle();
        };
        // 監聽事件 - 滑鼠移動 ------------
        var handleMouseMove = function ( event ) {
            if ( !isMouseDown ) {
                return;
            }
            // 更新最後一個點的位置
            fnMoveCircle();
        };
        // 監聽事件 - 滑鼠點開 ------------
        var handleMouseUp = function ( event ) {
            isMouseDown = false;
        };
        // 綁定監聽動作
        stage.addEventListener( "stagemousedown", handleMouseDown );
        stage.addEventListener( "stagemousemove", handleMouseMove );
        stage.addEventListener( "stagemouseup", handleMouseUp );
    }
    cjs.Ticker.timingMode = cjs.Ticker.RAF_SYNCHED;
    cjs.Ticker.setFPS( iSpf );
    cjs.Ticker.addEventListener( 'tick', tickHandler );
    
    console.log("start");
}
// 移動動畫 ========================
function fnMoveLine(target){
    target.y -= iSpeedLine;
}
function fnMoveCircle(){
    TweenMax.to( shapeCircle, 0.3, {x:stage.mouseX, y:stage.mouseY, ease:Back.easeOut});
}
// 碰撞檢測 ========================
function fnHit(){
    ptLeft = shapeCircle.localToLocal(-iWidthCircle,-iWidthCircle,oLine);
    ptRight = shapeCircle.localToLocal(iWidthCircle,iWidthCircle,oLine);
    if (oLine.hitTest(ptRight.x, ptRight.y) && oLine.hitTest(ptLeft.x, ptLeft.y)) { 
        oLine.alpha = 1;
    }else{
        fnMessage("fail");
        oLine.alpha = 0.3;
    }
}
// tickHandler ========================
var tickHandler = function () {
    var winScroll = oLine.y - iDotY;
    if ( winScroll > -iMapH + iWinH ){
        fnMoveLine(oLine);
        fnHit();
    }else {
        fnMessage("success");
    }
    stage.update();
};
// 訊息 - 判斷有無過關 ========================
function fnMessage(result){
    switch(result){
        // 規則說明 ------------
        case "rule": 
            swal({
                title: "規則說明",
                text: "按住滑鼠拖曳圓球,讓球維持在軌道內",
                confirmButtonText: "OK 我了解",
                confirmButtonColor: "#666",
                closeOnCancel: false
            },init);
            break;
        // 成功 ------------
        case "success":
            createjs.Ticker.removeEventListener('tick',tickHandler);
            swal({
                title: "過關!!!",
                text: "再玩一次?",
                confirmButtonText: "好主意",
                closeOnCancel: false
            },fnRestart);
            break;
        // 失敗 ------------
        case "fail":
            createjs.Ticker.removeEventListener('tick',tickHandler);
            swal({
                title: "Oops!",
                text: "碰到了,要再試一次嗎?",
                closeOnCancel: false
            },fnRestart);
            break;
    }
    function fnRestart(){
        container.removeAllChildren();
        init();
    }
}
// random範圍整數
function fnRandomColor(min, max) {
    var x = Math.random() * (max - min) + min;
    return x.toFixed(1);
}
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers