HTML5 GSAP很有趣的射箭小游戏 - 踏得网

拖拉弓箭并发射，射中靶心会有提示！

svg, game

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3562
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var svg = document.querySelector("svg");
var cursor = svg.createSVGPoint();
var arrows = document.querySelector(".arrows");
var target = {
    x: 902,
    y: 247
};
var line = {
    x1: 875,
    y1: 280,
    x2: 925,
    y2: 220
};
window.addEventListener("mousedown", knock);

function knock(e) {
    TweenMax.to(".arrow-angle use", 0.3, {
        opacity: 1
    });
    window.addEventListener("mousemove", aim);
    window.addEventListener("mouseup", loose);
    aim(e);

TweenMax.to("#arc", 0.3, {
        opacity: 1
    });
}

function loose() {
    window.removeEventListener("mousemove", aim);
    window.removeEventListener("mouseup", loose);

TweenMax.to("#bow", 0.4, {
        scaleX: 1,
        transformOrigin: "right center",
        ease: Elastic.easeOut
    });
    TweenMax.to("#bow polyline", 0.4, {
        attr: {
            points: "88,200 88,250 88,300"
        },
        ease: Elastic.easeOut
    });

var newArrow = document.createElementNS("http://www.w3.org/2000/svg", "use");
    newArrow.setAttributeNS('http://www.w3.org/1999/xlink', 'href', "#arrow");
    arrows.appendChild(newArrow);
    var path = MorphSVGPlugin.pathDataToBezier("#arc");
    TweenMax.to([newArrow], 0.5, {
        force3D: true,
        bezier: {
            type: "cubic",
            values: path,
            autoRotate: ["x", "y", "rotation"]
        },
        onUpdate: hitTest,
        onUpdateParams: ["{self}"],
        ease: Linear.easeNone
    });
    TweenMax.to("#arc", 0.3, {
        opacity: 0
    });
    TweenMax.set(".arrow-angle use", {
        opacity: 0
    });
}

function hitTest(tween) {
    var arrow = tween.target[0];
    var transform = arrow._gsTransform;
    var radians = transform.rotation * Math.PI / 180;
    var x1 = transform.x;
    var y1 = transform.y;
    var x2 = (Math.cos(radians) * 60) + x1;
    var y2 = (Math.sin(radians) * 60) + y1;

var intersection = getIntersection(x1, y1, x2, y2, line.x1, line.y1, line.x2, line.y2);
    if (intersection == "intersect") {
        tween.pause();
        var dx = x - target.x;
        var dy = y - target.y;
        var distance = Math.sqrt((dx * dx) + (dy * dy));
        var selector = ".hit";
        if (distance < 5) {
            selector = ".bullseye"
        }
        TweenMax.killTweensOf(selector);
        TweenMax.killChildTweensOf(selector);
        TweenMax.set(selector, {
            autoAlpha: 1
        });
        TweenMax.staggerFromTo(selector + " path", .5, {
            rotation: -5,
            scale: 0,
            transformOrigin: "center"
        }, {
            scale: 1,
            ease: Back.easeOut
        }, .05);
        TweenMax.staggerTo(selector + " path", .3, {
            delay: 2,
            rotation: 20,
            scale: 0,
            ease: Back.easeIn
        }, .03);
    }

}

var pivot = {
    x: 100,
    y: 250
};
aim({
    clientX: 100,
    clientY: 400
});

TweenMax.set(".arc", {
    opacity: 0
});

function aim(e) {
    var point = getMouseSVG(e);
    point.x = Math.min(point.x, pivot.x - 7);
    point.y = Math.max(point.y, pivot.y + 7);
    var dx = point.x - pivot.x;
    var dy = point.y - pivot.y;
    var angle = Math.atan2(dy, dx);
    var bowAngle = angle - Math.PI;
    var distance = Math.min(Math.sqrt((dx * dx) + (dy * dy)), 50);
    var scale = Math.min(Math.max(distance / 30, 1), 2);
    TweenMax.to("#bow", 0.3, {
        scaleX: scale,
        rotation: bowAngle + "rad",
        transformOrigin: "right center"
    });
    var arrowX = Math.min(pivot.x - ((1 / scale) * distance), 88);
    TweenMax.to(".arrow-angle", 0.3, {
        rotation: bowAngle + "rad",
        svgOrigin: "100 250"
    });
    TweenMax.to(".arrow-angle use", 0.3, {
        x: -distance
    });
    TweenMax.to("#bow polyline", 0.3, {
        attr: {
            points: "88,200 " + Math.min(pivot.x - ((1 / scale) * distance), 88) + ",250 88,300"
        }
    });

var radius = distance * 9;
    var offset = {
        x: (Math.cos(bowAngle) * radius),
        y: (Math.sin(bowAngle) * radius)
    };
    var arcWidth = offset.x * 3;

TweenMax.to("#arc", 0.3, {
        attr: {
            opacity: 1.4 - (arcWidth / 800),
            d: "M100,250c" + offset.x + "," + offset.y + "," + (arcWidth - offset.x) + "," + (offset.y + 50) + "," + arcWidth + ",50"
        }
    });

}

function getMouseSVG(e) {
    cursor.x = e.clientX;
    cursor.y = e.clientY;
    return cursor.matrixTransform(svg.getScreenCTM().inverse());
}

function getIntersection(x1, y1, x2, y2, x3, y3, x4, y4) {
    var a1, a2, b1, b2, c1, c2;
    var r1, r2, r3, r4;
    var denom, offset, num;
    a1 = y2 - y1;
    b1 = x1 - x2;
    c1 = (x2 * y1) - (x1 * y2);
    r3 = ((a1 * x3) + (b1 * y3) + c1);
    r4 = ((a1 * x4) + (b1 * y4) + c1);
    if ((r3 != 0) && (r4 != 0) && sameSign(r3, r4)) {
        return "dont intersect";
    }
    a2 = y4 - y3;
    b2 = x3 - x4;
    c2 = (x4 * y3) - (x3 * y4);
    r1 = (a2 * x1) + (b2 * y1) + c2;
    r2 = (a2 * x2) + (b2 * y2) + c2;
    if ((r1 != 0) && (r2 != 0) && (sameSign(r1, r2))) {
        return "dont intersect";
    }
    denom = (a1 * b2) - (a2 * b1);
    if (denom == 0) {
        return "collinear";
    }
    if (denom < 0) {
        offset = -denom / 2;
    } else {
        offset = denom / 2;
    }
    num = (b1 * c2) - (b2 * c1);
    if (num < 0) {
        x = (num - offset) / denom;
    } else {
        x = (num + offset) / denom;
    }
    num = (a2 * c1) - (a1 * c2);
    if (num < 0) {
        y = (num - offset) / denom;
    } else {
        y = (num + offset) / denom;
    }
    return "intersect";
}

function sameSign(a, b) {
    return (a * b) >= 0;
}

编译

CSS

HTML

<svg id="game" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 1000 400" overflow="visible">

<path id="arc" fill="none" stroke="url(#ArcGradient)" stroke-width="4" d="M100,250c250-400,550-400,800,0" opacity="0" pointer-events="none" />
    <defs>
        <g id="arrow">
            <line x2="60" fill="none" stroke="#888" stroke-width="2" />
            <polygon fill="#888" points="64 0 58 2 56 0 58 -2" />
            <polygon fill="#88ce02" points="2 -3 -4 -3 -1 0 -4 3 2 3 5 0" />
        </g>
    </defs>
    <g id="target">
        <path fill="#FFF" d="M924.2,274.2c-21.5,21.5-45.9,19.9-52,3.2c-4.4-12.1,2.4-29.2,14.2-41c11.8-11.8,29-18.6,41-14.2 C944.1,228.3,945.7,252.8,924.2,274.2z" />
        <path fill="#F4531C" d="M915.8,265.8c-14.1,14.1-30.8,14.6-36,4.1c-4.1-8.3,0.5-21.3,9.7-30.5s22.2-13.8,30.5-9.7 C930.4,235,929.9,251.7,915.8,265.8z" />
        <path fill="#FFF" d="M908.9,258.9c-8,8-17.9,9.2-21.6,3.5c-3.2-4.9-0.5-13.4,5.6-19.5c6.1-6.1,14.6-8.8,19.5-5.6 C918.1,241,916.9,250.9,908.9,258.9z" />
        <path fill="#F4531C" d="M903.2,253.2c-2.9,2.9-6.7,3.6-8.3,1.7c-1.5-1.8-0.6-5.4,2-8c2.6-2.6,6.2-3.6,8-2 C906.8,246.5,906.1,250.2,903.2,253.2z" />
    </g>
    <g id="bow" fill="none" stroke-linecap="round" vector-effect="non-scaling-stroke" pointer-events="none">
        <polyline fill="none" stroke="#ddd" stroke-linecap="round" points="88,200 88,250 88,300" />
        <path fill="none" stroke="#88ce02" stroke-width="3" stroke-linecap="round" d="M88,300 c0-10.1,12-25.1,12-50s-12-39.9-12-50" />
    </g>
    <g class="arrow-angle">
        <use x="100" y="250" xlink:href="#arrow" />
    </g>
    <linearGradient id="ArcGradient">
        <stop offset="0" stop-color="#fff" stop-opacity=".2" />
        <stop offset="80%" stop-color="#fff" stop-opacity="0" />
    </linearGradient>
    <clipPath id="mask">
        <polygon opacity=".5" points="0,0 1500,0 1500,200 970,290 950,240 925,220 875,280 890,295 920,310 0,350" pointer-events="none" />
    </clipPath>
    <g class="arrows" clip-path="url(#mask)" pointer-events="none">
    </g>
    <g class="bullseye" fill="#F4531C" opacity="0">
        <path d="M322,159l15-21l-27-13l-32,13l15,71l41-14l7-32L322,159z M292,142h20l3,8l-16,8 L292,142z M321,182l-18,9l-4-18l23-2V182z" />
        <path d="M340 131L359 125 362 169 381 167 386 123 405 129 392 183 351 186z" />
        <path d="M413 119L402 188 450 196 454 175 422 175 438 120z" />
        <path d="M432 167L454 169 466 154 451 151 478 115 453 113z" />
        <path d="M524 109L492 112 466 148 487 155 491 172 464 167 463 184 502 191 513 143 487 141 496 125 517 126z" />
        <path d="M537 114L512 189 558 199 566 174 533 175 539 162 553 164 558 150 543 145 547 134 566 148 575 124z" />
        <path d="M577 118L587 158 570 198 587 204 626 118 606 118 598 141 590 112z" />
        <path d="M635 122L599 198 643 207 649 188 624 188 630 170 639 178 645 162 637 158 649 143 662 151 670 134z" />
        <path d="M649,220l4-21l28,4l-6,25L649,220z M681,191l40-79l-35-8L659,184L681,191z" />
    </g>
    <g class="hit" fill="#ffcc00" opacity="0">
        <path d="M383 114L385 195 407 191 406 160 422 155 418 191 436 189 444 112 423 119 422 141 407 146 400 113" />
        <path d="M449 185L453 113 477 112 464 186" />
        <path d="M486 113L484 130 506 130 481 188 506 187 520 131 540 135 545 119" />
        <path d="M526,195l5-20l22,5l-9,16L526,195z M558,164l32-44l-35-9l-19,51L558,164z" />
    </g>
</svg>

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script><script src='/uploads/150501/MorphSVGPlugin.min.js'></script>