插棒小游戏

2015/02/13 35105
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>插棒小游戏</title>

    <link href="index.css" rel="stylesheet" />
</head>
<body>
<input type="date" />
<main data-count="4">
    <ul id="circle">
        <li data-idx="1"></li>
        <li style="transform: rotate(90deg)" data-idx="2"></li>
        <li style="transform: rotate(180deg)" data-idx="3"></li>
        <li style="transform: rotate(270deg)" data-idx="4"></li>
    </ul>
    <ul id="pad">
        <li data-idx="5" style="z-index: 5"></li>
    </ul>
</main>
<script>
    "use strict";

    function getRotateRadians(elem) {
        var tr = getComputedStyle(elem).transform;
        var values = tr.split('(')[1],
                values = values.split(')')[0],
                values = values.split(',');

        var a = Number(values[0]); // 0.866025
        var b = Number(values[1]); // 0.5
        var c = Number(values[2]); // -0.5
        var d = Number(values[3]); // 0.866025

        var radians = Math.atan2(b, a);
        if (radians < 0) {
            radians += 2 * Math.PI;
        }

        return radians;
    }

    window.addEventListener("load", function() {
        var main = document.getElementsByTagName("main")[0];
        var pad = document.getElementById("pad");
        var circle = document.getElementById("circle");

        window.addEventListener("click", function() {
            var li = pad.children[0];
            li.addEventListener("transitionend", function() {
                pad.removeChild(this);
                circle.appendChild(this);
                this.classList.remove("moving");

                li.style.transform = "rotate(" + (Math.PI - getRotateRadians(circle)) + "rad)";

                var newLi = document.createElement("li");
                newLi.dataset.idx = newLi.style.zIndex = circle.children.length + 1
                main.dataset.count = circle.children.length;
                pad.appendChild(newLi);
            });
            li.classList.add("moving");
        });
    });
</script>
</body>
</html>
代码片段
