Hexaflip.js 立方体拼图

Source: http://aitorporro.com/ http://oxism.com/hexaflip/

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

$(window).load(function() {
    //Enable mobile support
    var supportTouch = $.support.touch,
        scrollEvent = "touchmove scroll",
        touchStartEvent = supportTouch ? "touchstart" : "mousedown",
        touchStopEvent = supportTouch ? "touchend" : "mouseup",
        touchMoveEvent = supportTouch ? "touchmove" : "mousemove";

//Initialitzate the puzzle
    setTimeout(function() {
        randomizer();
    }, 1000);

//Initialitzate the puzzle
    var settings = {
            size: 200,
            margin: 0,
            perspective: 450
        },
        hexaFlip = [];

//Generate the 9 cubes.
    for (var i = 1; i < 10; ++i) {
        hexaFlip[i] = new HexaFlip('#hexaflip-container-' + i + '', {
            set1: [{
                value: 'red',
                style: {
                    backgroundColor: '#C41E3A',
                }
            }, {
                value: 'green',
                style: {
                    backgroundColor: '#009E60',
                }
            }, {
                value: 'blue',
                style: {
                    backgroundColor: '#0051BA',
                }
            }, {
                value: 'orange',
                style: {
                    backgroundColor: '#FF5800',
                }
            }, {
                value: 'yellow',
                style: {
                    backgroundColor: '#FFD500',
                }
            }, ]
        }, settings)
    }

//Re-initalize the puzzle when it's done
    $('#play').bind('click', function() {
        $('#popup').transit({
            opacity: 0,
            delay: 100
        }, function() {
            $(this).hide();
            randomizer();
        });
    });

//Randomize the number of flips when initialize the puzzle
    var randomizer = function() {
        for (var j = 1; j < 10; j++) {
            var random = Math.floor(Math.random() * 6) + 2;
            for (var i = 1; i < random; i++) {
                hexaFlip[j].flip();
            }
        }
    };

//When transition ends, check if the cube is completed.
    $('.hexaflip-cube').bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(event) {
        var passcode = [];
        for (var i = 0; i < 9; ++i) {
            passcode[i] = String(hexaFlip[i + 1].getValue());
            if (passcode.length === 9) {
                var r = passcode.allValuesSame();
                if (r === true) {
                    $('.popup').show().transit({
                        opacity: 1
                    });
                    $('#popup .image-wrapper').addClass('animate');
                    setTimeout(function() {
                        $('#popup .copy-wrapper').addClass('animate');
                    }, 600);
                }
            }
        }
    });

//Function to compare if all the vallues are the same.
    Array.prototype.allValuesSame = function() {
        for (var i = 1; i < this.length; i++) {
            if (this[i] !== this[0])
                return false;
        }
        return true;
    }

});

编译

CSS

/************
* Imports 
*************/
/************
* Variables 
*************/
/* Colors */
/************
* Styles
*************/

@import url(http://fonts.googleapis.com/css?family=Roboto:400,700,300);
* {
    box-sizing: border-box;
}
body {
    background-image: url(http://lastpotion.github.io/images/dash@2X.png);
    font-smoothing: antialiased;
    font-family: Roboto, sans-serif;
}
.container {
    margin-top: 5%;
}
.container a {
    color: #d72b37;
}
.container span {
    color: #8a8a8a;
    font-weight: 300;
}
.container p {
    margin-top: 20px;
    font-weight: 400;
    font-size: 16px;
    /************
* Hexaflip
*************/
}
.shapeContainer {
    width: 600px;
    height: 600px;
    display: block;
    margin: 3% auto;
    z-index: 50;
}
.shapeContainer > div {
    display: inline-block;
    float: left;
    position: relative;
    z-index: 0;
}
.hexaflip-cube {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab;
    display: inline-block;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.hexaflip-cube:active {
    cursor: move;
    cursor: -webkit-grabbing;
    cursor: grabbing;
}
.hexaflip-cube .hexaflip-side {
    text-indent: -9999px;
    width: 100%;
    overflow: hidden;
    height: 100%;
    position: absolute;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-size: cover;
    text-align: center;
    background-color: #333;
    box-shadow: 0px 0px 1px #fff;
}
.hexaflip-cube div {
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.hexaflip-cube div .no-tween {
    -webkit-transition-duration: 0s;
    transition-duration: 0s;
}
.hexaflip-cube .hexaflip-side-left,
.hexaflip-side-right {
    background-color: #1e2026 !important;
}
.hexaflip-timepicker .hexaflip-cube:last-child .hexaflip-side:nth-child(odd) {
    background-color: #1e2026;
    /************
* Popup
*************/
}
.popup {
    background-color: rgba(0, 0, 0, 0.4);
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0;
    overflow: hidden;
    z-index: 8000;
}
.popup .popup-inner {
    max-width: 600px;
    min-height: 200px;
    display: block;
    margin: 3% auto;
    z-index: 50;
    height: auto;
    width: 75%;
    position: absolute;
    top: 45%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -45%, 0);
    transform: translate3d(-50%, -45%, 0);
    background: #fff;
}
.popup .popup-inner h2 {
    font-size: 40px;
}
.popup .popup-inner button {
    font-weight: 700;
    margin: 20px auto;
}

HTML

<header class='container text-center'>
    <h1>Tiny cubic puzzle</h1>
</header>

<div class="shapeContainer">
    <div id="hexaflip-container-1"></div>
    <div id="hexaflip-container-2"></div>
    <div id="hexaflip-container-3"></div>
    <div id="hexaflip-container-4"></div>
    <div id="hexaflip-container-5"></div>
    <div id="hexaflip-container-6"></div>
    <div id="hexaflip-container-7"></div>
    <div id="hexaflip-container-8"></div>
    <div id="hexaflip-container-9"></div>
</div>

<div id="popup" class="popup">
    <div class="container popup-inner text-center">
        <h2>Well done!</h2>
        <p>Thanks for playing :)</p>
        <button id='play' class='btn btn-primary'>
            Play again
        </button>
    </div>
</div>

Source: http://aitorporro.com/ http://oxism.com/hexaflip/

编辑器支持Emmet

快捷键

Source: http://aitorporro.com/ http://oxism.com/hexaflip/

webgl three.js实现孟杰海绵（menger sponge）立方体光线追踪（raymarching）

Mapbox.js + Leaflet.label.js 地图及标签覆盖层

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：