使用HTML5创建的2016圣诞节交互式拖拉猜字谜游戏

Christmas Drag & Drop Puzzle，把圣诞节的各个符号拖放到正确的位置，拼写出Merry Christmas祝福语。

html5, xmas, game

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// Define drop zones
    var dropZone = {
        count: 0,
        init: function() {
            this.cacheDOM();
            this.bindEvents();
        },
        cacheDOM: function() {
            this.puzzleBoard = document.getElementById("puzzleboard");
            this.plopAudio = document.getElementById("plop-sound");
        },
        bindEvents: function() {
            this.puzzleBoard.addEventListener("dragover", this.dragItem);
            this.puzzleBoard.addEventListener("drop", this.dropItem);
        },
        dragItem: function(e) {
            e.preventDefault();
            e.dataTransfer.dropEffect = "move";
        },
        dropItem: function(e) {
            e.preventDefault();
            var pieceData = e.dataTransfer.getData("image/png");
            // Only drop if the cell matches the pieces
            if (pieceData === e.target.getAttribute("data-cell")) {
                e.target.appendChild(document.getElementById(pieceData));
                dropZone.plopAudio.play();
                dropZone.count++;
            }
            // Once all the pieces are placed, call completedPuzzle.init() to play music and animation
            if (dropZone.count === 14) {
                completedPuzzle.init();
                btnShuffle.btn.style.display = "none";
                btnReset.btn.style.display = "block";
            }
        }
    };

draggables.init();
    dropZone.init();
    btnShuffle.init();
    btnReset.init();
    shuffler.init();
};

编译

CSS

* {
    box-sizing: border-box;
}
html,
body {
    background-color: #4e7ca0;
    height: 100%;
    margin: 0;
    padding: 0;
}
.puzzle-container {
    height: 100%;
}
.puzzleboard {
    background-color: #4e7ca0;
    min-height: 65%;
    margin: 0 auto;
    position: relative;
    width: 100%;
}
.row {
    height: 50%;
    position: relative;
    width: 100%;
}
/* Puzzleboard drop zone shapes */

.row > img {
    display: block;
    height: auto;
    width: 100%;
}
.row:last-of-type {
    padding-top: 1%;
}
.row div {
    display: inline-block;
    height: 100%;
    position: absolute;
    top: 0;
    width: 14%;
    z-index: 100;
}
.row:first-of-type div img {
    margin-top: 14.8%;
}
.row:last-of-type div img {
    margin-top: 7.8%;
}
.row div img {
    width: 100%;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}
/* Merry */
/* M */

.row:first-of-type div:first-of-type {
    margin-left: 15.8%;
}
/* E */

.row:first-of-type div:nth-child(3) {
    margin-left: 27.6%;
}
/* R */

.row:first-of-type div:nth-child(4) {
    margin-left: 39.7%;
}
/* R */

.row:first-of-type div:nth-child(5) {
    margin-left: 53.9%;
}
/* Y */

.row:first-of-type div:nth-child(6) {
    margin-left: 66.77%;
}
/* Christmas */
/* C */

.row:last-of-type div:first-of-type {
    margin-left: -.28%;
}
/* H */

.row:last-of-type div:nth-child(3) {
    margin-left: 10%;
}
/* R */

.row:last-of-type div:nth-child(4) {
    margin-left: 21%;
}
/* I */

.row:last-of-type div:nth-child(5) {
    margin-left: 30%;
}
/* S */

.row:last-of-type div:nth-child(6) {
    margin-left: 39.5%;
}
/* T */

.row:last-of-type div:nth-child(7) {
    margin-left: 49.7%;
}
/* M */

.row:last-of-type div:nth-child(8) {
    margin-left: 62.5%;
}
/* A */

.row:last-of-type div:nth-child(9) {
    margin-left: 73.8%;
}
/* S */

.row:last-of-type div:nth-child(10) {
    margin-left: 83.9%;
}
.tray {
    background-color: #86ac70;
    border: 1em solid #699965;
    bottom: 0;
    height: 35%;
    padding: 8em;
    position: relative;
    width: 100%;
}
/* Individual puzzle pieces with drop shadow and hover effect*/

.tray > img {
    position: absolute;
    transition: all .5s;
    width: 14%;
    -webkit-filter: drop-shadow(.1em .1em 0 #4a4848);
    filter: drop-shadow(.1em .1em 0 #4a4848);
}
.tray > img:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-filter: drop-shadow(0 0 .6em #faffa6);
    filter: drop-shadow(0 0 .6em #faffa6);
}
button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    height: 3.5em;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: -3em;
    transition: transform .3s;
    width: 7em;
    z-index: 100;
}
button:focus {
    outline: none;
}
button:active {
    -webkit-transform: scale(.9);
    transform: scale(.9);
}
button img {
    width: 5em;
}
button:nth-child(2) {
    display: none;
}
.xmas {
    -webkit-animation-delay: 0s, 11s;
    -webkit-animation-duration: 3s, 1s;
    -webkit-animation-iteration-count: 3, 1;
    -webkit-animation-name: spin, jingle;
    animation-delay: 0s, 11s;
    animation-duration: 3s, 1s;
    animation-iteration-count: 3, 1;
    animation-name: spin, jingle;
}
img[data-twirl] {
    -webkit-animation-delay: 0s, 11s;
    -webkit-animation-duration: .7s, 1s;
    -webkit-animation-iteration-count: 1, 1;
    -webkit-animation-name: twirl, jingle;
    animation-delay: 0s, 11s;
    animation-duration: .7s, 1s;
    animation-iteration-count: 1, 1;
    animation-name: twirl, jingle;
}
@-webkit-keyframes spin {
    0% {
        transform: rotate3d(1, 2, 1, 0deg);
    }
    100% {
        transform: rotate3d(1, 2, 1, 360deg);
    }
}
@keyframes spin {
    0% {
        transform: rotate3d(1, 2, 1, 0deg);
    }
    100% {
        transform: rotate3d(1, 2, 1, 360deg);
    }
}
@-webkit-keyframes twirl {
    0% {
        transform: rotate3d(0, 1, 0, 0deg);
    }
    100% {
        transform: rotate3d(0, 1, 0, 360deg);
    }
}
@keyframes twirl {
    0% {
        transform: rotate3d(0, 1, 0, 0deg);
    }
    100% {
        transform: rotate3d(0, 1, 0, 360deg);
    }
}
@-webkit-keyframes jingle {
    0% {
        transform: rotateZ(0);
    }
    25% {
        transform: rotateZ(-10deg);
    }
    50% {
        transform: rotateZ(10deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}
@keyframes jingle {
    0% {
        transform: rotateZ(0);
    }
    25% {
        transform: rotateZ(-10deg);
    }
    50% {
        transform: rotateZ(10deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}
@media (min-width: 2000px) {
    button {
        top: -4em;
        width: 9em;
    }
    button img {
        width: 7.5em;
    }
}
@media (max-width: 1024px) {
    button {
        height: 3em;
        top: -2em;
        width: 5em;
    }
    button:active {
        -webkit-transform: scale(.9);
        transform: scale(.9);
    }
    button img {
        width: 3.5em;
    }
}
@media (max-width: 768px) {
    .puzzleboard,
    .tray {
        height: 50vh;
        width: 768px;
    }
}

HTML

<div class="tray" id="tray">
        <button type="button" id="shuffle-btn"><img src="https://cloud.githubusercontent.com/assets/12915446/21251400/447ab2fe-c302-11e6-9015-8bb30145d1ca.png" alt="shuffle button">
        </button>
        <button type="button" id="reset-btn"><img src="https://cloud.githubusercontent.com/assets/12915446/21251401/447f14fc-c302-11e6-918b-9600d6a95195.png" alt="reset button">
        </button>
        <img id="p1" src="https://cloud.githubusercontent.com/assets/12915446/21251380/4424e658-c302-11e6-8958-b5d090ec9260.png" alt="puzzle piece">
        <img id="p2" src="https://cloud.githubusercontent.com/assets/12915446/21251373/440c3676-c302-11e6-9ae0-533b8a58cbe8.png" alt="puzzle piece">
        <img id="p3" src="https://cloud.githubusercontent.com/assets/12915446/21251382/4439e0e4-c302-11e6-9286-04af8204377c.png" alt="puzzle piece">
        <img id="p4" src="https://cloud.githubusercontent.com/assets/12915446/21251384/443c480c-c302-11e6-8307-ae3697863fb4.png" alt="puzzle piece">
        <img id="p5" src="https://cloud.githubusercontent.com/assets/12915446/21251395/4467d54e-c302-11e6-916b-2c14e5fbb8ee.png" alt="puzzle piece">
        <img id="p6" src="https://cloud.githubusercontent.com/assets/12915446/21251374/440cdcc0-c302-11e6-8072-40852e1fe9c8.png" alt="puzzle piece">
        <img id="p7" src="https://cloud.githubusercontent.com/assets/12915446/21251379/4424cd3a-c302-11e6-95d9-1c37114df53b.png" alt="puzzle piece">
        <img id="p8" src="https://cloud.githubusercontent.com/assets/12915446/21251387/444bc570-c302-11e6-9ffe-a8e27d5636f1.png" alt="puzzle piece">
        <img id="p9" src="https://cloud.githubusercontent.com/assets/12915446/21251376/44223296-c302-11e6-9c80-c2af0158f78d.png" alt="puzzle piece">
        <img id="p10" src="https://cloud.githubusercontent.com/assets/12915446/21251389/44529daa-c302-11e6-9d1c-f6072122bb9d.png" alt="puzzle piece">
        <img id="p11" src="https://cloud.githubusercontent.com/assets/12915446/21251393/4463a960-c302-11e6-8b40-a84e22c78758.png" alt="puzzle piece">
        <img id="p12" src="https://cloud.githubusercontent.com/assets/12915446/21251385/443c1274-c302-11e6-8244-88310e46ae29.png" alt="puzzle piece">
        <img id="p13" src="https://cloud.githubusercontent.com/assets/12915446/21251369/4409bb08-c302-11e6-97cf-80a701a8e852.png" alt="puzzle piece">
        <img id="p14" src="https://cloud.githubusercontent.com/assets/12915446/21251390/445760ba-c302-11e6-983c-102dbb34188f.png" alt="puzzle piece">
    </div>
</div>

<div>
    
    <audio id="plop-sound" src="https://azureowl.github.io/christmaspuzzle/sounds/Plop.mp3" preload="auto">
        Your browser does not support the <code>audio</code> element.
    </audio>
    
    <audio id="bell-sound" src="https://azureowl.github.io/christmaspuzzle/sounds/Small-bell-ringing.wav" preload="auto">
        Your browser does not support the <code>audio</code> element.
    </audio>
    
    <audio id="song-sound" src="https://azureowl.github.io/christmaspuzzle/sounds/We-wish-you-a-merry-christmas-bells.mp3" preload="auto">
        Your browser does not support the <code>audio</code> element.
    </audio>
</div>

Christmas Drag & Drop Puzzle，把圣诞节的各个符号拖放到正确的位置，拼写出Merry Christmas祝福语。

html5, xmas, game

编辑器支持Emmet

快捷键

Christmas Drag & Drop Puzzle，把圣诞节的各个符号拖放到正确的位置，拼写出Merry Christmas祝福语。

html5, xmas, game

使用HTML5构建的iPhone 7 Plus交互式3D原型

使用HTML5和ES6（JS）实现的在线数独游戏生成器和解答

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：