艺术家拼图益智游戏

从下面（或右边）的方框中拖动方块到空白的画框中，拼成画作。支持移动触摸。

game, puzzle

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var correctCards = 0;

$(init);
$(rand);

$("#btn_reset").click(function() {
    $(init);
    $(rand);
});

//Anchor target
$('.menu li a').click(function() {
    //$(".menu li a").removeClass("active",200); // удаляем дополнительный класс с карточки
    //$(this).addClass("active",200); // добавляем дополнительный класс к нажатому элементу
    $('html, body').animate({
        scrollTop: $($(this).attr('href')).offset().top
    }, 500);
    return false;
});

$(window).scroll(function() {
    if ($(this).scrollTop() > 300) {
        $('.nav').fadeIn();
    } else {
        $('.nav').fadeOut();
    }
});

$('.nav a').click(function() {
    $("html, body").animate({
        scrollTop: 0
    }, 500);
    return false;
});

//Randomize our pieces
function rand() {
    var h = $(window).height();
    var w = $(window).width();
    $('.ui-draggable').each(function() {
        var originalOffset = $(this).position(),
            $this = $(this),
            tLeft = Math.floor(Math.random() * 400),
            tTop = Math.floor(Math.random() * 400);
        $(this).css({
            "left": tLeft,
            "top": tTop
        });
    });
}

function init() {

// Hide the success message
    $('.success_message').hide();
    $('.success_message').css({
        opacity: 0
    });
    // $('.success_message p').html( '<p>Malevich likes this</p>' + 'You make The Black Square in ' + $('.counter p').html() + ' moves' );

// Reset the game
    correctCards = 0;
    $('#malevich_pieces_area, #malevich_art, #warhol_pieces_area, #warhol_art').html('');
    $('.counter p').html('0');

// Create the pile of shuffled cards
    var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    //numbers.sort( function() { return Math.random() - .5 } );

for (var i = 0; i < 9; i++) {
        $('<div>' + '</div>').data('number', numbers[i]).attr('id', 'malevich_card' + numbers[i]).appendTo('#malevich_pieces_area').draggable({
            containment: 'body',
            stack: '#malevich_pieces_area div',
            snap: '.ui-droppable',
            //snapMode: 'inner',
            cursor: 'move',
            //revert: true

});
    }

// Create the card slots
    var words = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
    for (var i = 1; i <= 9; i++) {
        $('<div>' + '</div>').data('number', i).appendTo('#malevich_art').droppable({
            accept: '#malevich_pieces_area div',
            hoverClass: 'piece_hovered',
            drop: handleCardDrop,
            out: outside
        });

}

function outside(event, ui) {
    $(ui.draggable).removeClass('wrong');
}

function handleCardDrop(event, ui) {
    var slotNumber = $(this).data('number');
    var cardNumber = ui.draggable.data('number');

// function PlusOne() {
    //        $('.counter p').html(function(i, val) {
    //        return val * 1 + 1
    //   });
    //  }

// If the card was dropped to the correct slot,
    // change the card colour, position it directly
    // on top of the slot, and prevent it being dragged
    // again

if (slotNumber == cardNumber) {
        ui.draggable.addClass('correct');
        ui.draggable.draggable('disable');
        ui.draggable.removeClass('wrong');
        $(this).droppable('disable');
        ui.draggable.appendTo($(this));
        ui.draggable.css("z-index", 1);
        ui.draggable.position({
            of: $(this),
            my: 'left top',
            at: 'left top'
        });
        ui.draggable.draggable('option', 'revert', false);
        correctCards++;
    } else {
        ui.draggable.addClass('wrong');
        ui.draggable.position({
            of: $(this),
            my: 'left top',
            at: 'left top'
        });
        ui.draggable.closest($('.section')).find('.counter p').html(function(i, val) {
            return val * 1 + 1
        });
    }

// If all the cards have been placed correctly then display a message
    // and reset the cards for another go

if (correctCards == 9) {
        $('.success_message').show();
        $('.success_message').animate({
            opacity: 1
        });
        $('.success_message p').html('<p>Malevich likes this</p>' + 'You make The Black Square in ' + $('.counter p').html() + ' moves');
        $('.social-likes').socialLikes({
            title: 'I make The Black Square in ' + ui.draggable.closest($('.section')).find('.counter p').html() + ' moves',
        });
    }

}

编译

CSS

::selection {
  background: white;
}

html {
  font-size: 16px;
}

body {
  background: #d4d4d4;
}

hr {
  padding: 2em;
  border: none;
  border-top: 1px dashed #a1a1a1;
}

h1 {
  font-size: 3em;
  color: black;
  font-family: 'Inconsolata', Arial;
  font-weight: 700;
}
h1 a {
  text-decoration: none;
  color: black;
}

header {
  z-index: 100;
}

a {
  color: #3756f4;
  transition: all 0.2s;
}
a:hover {
  color: #ea3b3b;
}

.active {
  background: tomato;
  color: white;
}
.active:hover {
  color: white;
}

.wrap {
  position: relative;
  margin: 2% 4%;
  min-width: 700px;
}

.nav {
  z-index: 100;
  right: 10%;
  bottom: 200px;
  position: fixed;
  display: none;
}
.nav a {
  fill: #3756f4;
  position: absolute;
  display: block;
  width: 50px;
}
.nav a:hover {
  fill: #ea3b3b;
}

.menu {
  list-style: none;
  padding: 0;
}
.menu li {
  margin-right: 2em;
  margin-bottom: 1em;
  display: inline-block;
  font-size: 1.4em;
  font-family: 'Inconsolata', Arial;
  font-weight: 700;
}

.section {
  display: block;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  text-align: center;
}

#section_area_malevich, #section_area_warhol {
  display: flex;
  box-sizing: inherit;
  max-width: 1600px;
  width: 100%;
  flex-wrap: wrap;
}

.work_area {
  margin-bottom: 50px;
  min-width: 500px;
  height: 500px;
  display: inline-block;
  position: relative;
  border: 1px dashed #a1a1a1;
}
.work_area p {
  content: "drag and drop pieces into artist frame";
  font-size: 1em;
  color: rgba(0, 0, 0, 0.8);
  font-family: 'Inconsolata', Arial;
  font-weight: 300;
  line-height: 6em;
}

#malevich_frame {
  margin: 0 50px 150px 0;
  display: inline-block;
  position: relative;
  width: 500px;
  height: 500px;
  background: white;
  border: 4px solid;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}
#malevich_frame::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.2);
}
#malevich_art {
  margin: 55px;
  width: 390px;
  height: 390px;
  background: #e8e8e8;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
#malevich_pieces_area {
  width: 100%;
}

.caption {
  background: #916332;
  float: left;
  display: inline-block;
  padding: 1em;
  margin-top: 2em;
  width: 200px;
  text-align: left;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
}
.caption a {
  font-family: 'Inconsolata', Arial;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
  width: 100%;
  height: 100%;
  display: block;
}
.caption a span {
  color: rgba(255, 255, 255, 0.4);
}
.caption:hover {
  background: #583c1e;
}

.ui-draggable {
  position: absolute !important;
  z-index: 1;
  width: 130px;
  height: 130px;
  color: white;
  border: 1px solid #3756f4;
  box-sizing: border-box;
  background: black;
  transition: box-shadow 0.5s, border 0.1s;
}
.ui-draggable.ui-draggable-dragging {
  border: 1px solid tomato;
  box-shadow: 0 10px 60px rgba(0, 0, 0, 0.3);
}

#malevich_card1 {
  background: url(http://dariographics.com/puzzle/img/malevich.png) no-repeat 0px 0px;
}

#malevich_card2 {
  background: url(http://dariographics.com/puzzle/img/malevich.png) no-repeat -130px 0px;
}

#malevich_card3 {
  background: url(http://dariographics.com/puzzle/img/malevich.png) no-repeat -260px 0px;
}

#malevich_card4 {
  background: url(http://dariographics.com/puzzle/img/malevich.png) no-repeat 0px -130px;
}

#malevich_card5 {
  background: url(http://dariographics.com/puzzle/img/malevich.png) no-repeat -130px -130px;
}

#malevich_card6 {
  background: url(http://dariographics.com/puzzle/img/malevich.png) no-repeat -260px -130px;
}

#malevich_card7 {
  background: url(http://dariographics.com/puzzle/img/malevich.png) no-repeat 0px -260px;
}

#malevich_card8 {
  background: url(http://dariographics.com/puzzle/img/malevich.png) no-repeat -130px -260px;
}

#malevich_card9 {
  background: url(http://dariographics.com/puzzle/img/malevich.png) no-repeat -260px -260px;
}

.ui-droppable {
  float: left;
  z-index: 0;
  width: 130px;
  height: 130px;
  color: white;
  border: 1px dashed white;
  box-sizing: border-box;
}

.piece_hovered {
  background: rgba(0, 0, 0, 0.2);
}

.correct {
  border: none;
}

.wrong {
  border: 4px solid tomato;
}

.counter {
  margin-top: 5em;
}
.counter span {
  font-weight: 700;
  font-size: 1.4em;
  font-family: 'Inconsolata', Arial;
}
.counter p {
  color: #888888 !important;
  line-height: 0em !important;
  font-size: 4em !important;
}

.success_message {
  z-index: 200;
  width: 100%;
  height: 100%;
  background: rgba(41, 53, 114, 0.95);
  top: 0;
  position: fixed;
  display: none;
}
.success_block {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#btn_reset {
  margin-top: 40px;
  display: block;
  padding: 1em;
  background: white;
  border: none;
}

.count_result {
  color: white;
  font-weight: 400;
  font-size: 1.4em;
  font-family: 'Inconsolata', Arial;
}

HTML

<div class="success_message">
    <div class="success_block">
        <div class="count_result">
            <p>Malevich likes this</p>

</div>

<div class="wrap">
    <div class="nav">
        <a href="#">
            <svg class="arrow" x="0px" y="0px" viewBox="0 0 38 87.1">
                <polygon points="38,19 19,0 0,19 2.1,21.1 17.5,5.7 17.5,87.1 20.5,87.1 20.5,5.7 35.9,21.1 " />
            </svg>
        </a>
    </div>
    <header>
        <h1><a href="https://dariographics.com/pic/" target="_blank">Artist puzzle</a></h1>

</header>
    <div class="selections">
        <div class="section" id="malevich">
            <div id="section_area_malevich">
                <div id="malevich_frame">
                    <div id="malevich_art">
                        <div class="ui-droppable"></div>
                        <div class="ui-droppable"></div>
                        <div class="ui-droppable"></div>
                        <div class="ui-droppable"></div>
                        <div class="ui-droppable"></div>
                        <div class="ui-droppable"></div>
                        <div class="ui-droppable"></div>
                        <div class="ui-droppable"></div>
                        <div class="ui-droppable"></div>
                    </div>
                    <div class="caption">
                        <a href="https://en.wikipedia.org/wiki/Black_Square_(painting)" target="_blank">Malevich</br>The Black Square</br><span>1915</span></a>
                    </div>

</div>
                <div class="work_area">
                    <p>drag and drop pieces into artist frame</p>
                    <div class="counter"><span>Wrong moves</span>
                        <p>0</p>
                    </div>
                    <div id="malevich_pieces_area">
                        <div id="malevich_card1" class="ui-draggable"></div>
                        <div id="malevich_card2" class="ui-draggable"></div>
                        <div id="malevich_card3" class="ui-draggable"></div>
                        <div id="malevich_card4" class="ui-draggable"></div>
                        <div id="malevich_card5" class="ui-draggable"></div>
                        <div id="malevich_card6" class="ui-draggable"></div>
                        <div id="malevich_card7" class="ui-draggable"></div>
                        <div id="malevich_card8" class="ui-draggable"></div>
                        <div id="malevich_card9" class="ui-draggable"></div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
    </div>
</div>

从下面（或右边）的方框中拖动方块到空白的画框中，拼成画作。支持移动触摸。

game, puzzle

编辑器支持Emmet

快捷键

从下面（或右边）的方框中拖动方块到空白的画框中，拼成画作。支持移动触摸。

game, puzzle

HTML5经典的图形旋转拼接益智小游戏

animate-css-grid构建的拼图小游戏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：