Сделать флип Головоломки с 2 фоновыми изображениями

Я ищу помощь, чтобы сделать флип Головоломки с 2 фоновых изображений.

Что-то похожее на этот пример я нашел на другом посте из этого сообщества:

JSFiddle

но вместо всех всех ?символов я хочу показать другое изображение, и, возможно, рандомизировать некоторые клетки так, чтобы некоторые начинались какfront face (? symbols cells), а другие как задняя сторона (показывая часть фонового изображения).

И если есть способ проверить, что если одно из обоих изображений (спереди или сзади) завершено, покажите его как модальное окно. До сих пор мне удалось перевернуть изображение и показать другой фон. Поэтому мне нужна помощь в создании сеток и ячеек, чтобы я мог перевернуть карты. Вот моя разметка:

HTML:

<!DOCTYPE html>
<html>
<head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="Styles/flipStyle.css" rel="stylesheet" />



<script src="Scripts/jquery-3.1.1.min.js"></script>
<script src="Scripts/underscore.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="Scripts/mainControl.js"></script>

<title>Flipping Ad</title>
</head>
<body>
    <div class="flip-container" id="myContainer">
        <div class="flipper canvas">
            <div class="front" onclick="app.controller.flip()">
                <!-- front content -->
            </div>
            <div class="back" onclick="app.controller.flip()">
                <!-- back content -->
            </div>
        </div>

    </div>


</body>
</html>

стиль CSS:

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000px;
}
    /* flip the pane when hovered */
    .flip-container.hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 300px;
    height: 300px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    background-image:url('../Images/300x300.png');
    background-repeat: no-repeat;
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    background:url('../Images/300x300_2.png');
    background-repeat: no-repeat;
    transform: rotateY(180deg);
}

javaScript (использование подчеркивания):

(function (app){
    'use strict';

    app.controller={};
    _.extend(app.controller,{
        toggle_flip: toggle_flip,
        flip: flip,
    });
function toggle_flip(){

        document.querySelector("#myCard").classList.toggle("flip")
    }
    function voltear(){
        document.querySelector('#myContainer').classList.toggle('hover');
    }
})(window.app = window.app || {});

Все вместе, работает как этот пример, который я нашел, используя переключатель.

рабочий пример

1 ответ

  1. Вам придется предоставить два изображения, поэтому я переместил изображения в качестве data-атрибутов в DOM (вместо CSS ).

    <div class='canvas' data-background="http://placekitten.com/500/300" data-foreground="http://placekitten.com/g/500/300">
    </div>
    

    Вам также нужно изменить сценарий, чтобы не добавлять ?в .backтак что часть становится

    var cell = $("<div class='cell flipped'><div class='back'></div><div class='front'></div></div>")
    

    Затем вам нужно повторить часть, которая добавляет фон и позиционирует его на .frontтакже сделать это для .back.

        cell.find('.back')
            .css('background','url('+foregroundImage+')')
            .css('background-position', -(j * colWidth) + 'px ' + -(i * rowHeight) + 'px');
    

    Чтобы рандомизировать некоторые из ячеек, используйтеMath.random(), чтобы решить, будете ли вы переворачивать каждую ячейку

    if (Math.random() >= 0.5) cell.toggleClass('flipped');
    

    И, наконец, каждый раз, когда вы переворачиваете ячейку, проверьте, является ли количество переворачиваемых элементов 0 (переднее изображение завершено ) или col*row(заднее изображение завершено)

          var flipped = canvas.find('.flipped').length;
          if ((flipped == col*row) || !flipped){
            alert('Full Image');
          }
    

    Часть, которая показывает изображение в модальном я оставляю вам.

    Обновленная демо-версия http://jsfiddle.net/gaby/LdR29/35/