Affenpuzzle/Spiel

Wiki-Quelltext dieser Seite.

<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.card {
  position:absolute;
  width:128px;
  height:128px;
  border:1px solid black;
  background-image:url(https://programmingwiki.de/images/5/50/Admin_Hexenpuzzle.png);
  background-size: 310% 310%;
  box-shadow:2px 2px 8px rgba(0,0,0,0.2);
  flex-shrink:0;
  cursor:pointer;
}
.card0 {
  left:0;
  top:0;
  background-position: 0.5% 1%;
}
.card1 {
  left:128px;
  top:0;
  background-position: 49.5% 1%;
}
.card2 {
  left:256px;
  top:0;
  background-position: 98% 1%;
}

.card3 {
  background-position: 0.5% 49.5%;
  left:0;
  top:128px;
}
.card4 {
  background-position: 49.5% 49.5%;
  left:128px;
  top:128px;
}
.card5 {
  background-position: 98% 49.5%;
  left:256px;
  top:128px;
}

.card6 {
  background-position: 0.5% 98%;
  left:0;
  top:256px;
}
.card7 {
  background-position: 49.5% 98%;
  left:128px;
  top:256px;
}
.card8 {
  background-position: 98% 98%;
  left:256px;
  top:256px;
}
.card.dragging {
  box-shadow:4px 4px 10px rgba(0,0,0,0.5);
}
.card.rotate0 {
}
.card.rotate90 {
  transform:rotate(90deg);
}
.card.rotate180 {
  transform:rotate(180deg);
}
.card.rotate270 {
  transform:rotate(270deg);
}
.containerCards{
  position:relative;
  background:#f3f3f3;
  border:1px solid black;
  width:100%;
  height:500px;
  display:flex;
  flex-wrap:wrap;
}
</style>
<div class="containerCards">
<div class="card card0 rotate0"></div>
<div class="card card1 rotate0"></div>
<div class="card card2 rotate0"></div>
<div class="card card3 rotate0"></div>
<div class="card card4 rotate0"></div>
<div class="card card5 rotate0"></div>
<div class="card card6 rotate0"></div>
<div class="card card7 rotate0"></div>
<div class="card card8 rotate0"></div>
</div>

<script>
 function getAll(t,list){
   var p0 = t.position ? t.position : $(t).position();
   $('.card').each(function(i,e){
     if($(e).not(t))
     if(list.indexOf(e) == -1){
       var p1 = $(e).position();
       if(p1.left == p0.left) {
         if(p1.top == p0.top-128) list.push(e); 
         if(p1.top == p0.top+128) list.push(e); 
       } 
       if(p1.top == p2.top) {
         if(p1.left == p0.left-128) list.push(e); 
         if(p1.left == p0.left+128) list.push(e); 
       } 
       getAll($(e),list);
     }
   });
   return list;
 }
 $('.card').draggable({ containment: "parent", grid: [ 32, 32 ], 
  start: function() { $(this).addClass("dragging");},
  stop: function() { $(this).removeClass("dragging");},
  drag: function(e, ui) {
    getAll(ui,[]).css({'top': ui.helper.css('top'),'left': ui.helper.css('left')});
  }
 });
 $('.card').on('mousedown', function(event) { 
    $('.card').css('z-index','1');
    $( this ).css('z-index','1000');
 });
 $('.card').on('click', function(event) { 
    if($(this).hasClass("dragging")) return;
    if($(this).hasClass("rotate0")) 
      $(this).removeClass("rotate0").addClass("rotate90"); 
    else
    if($(this).hasClass("rotate90")) 
      $(this).removeClass("rotate90").addClass("rotate180"); 
    else
    if($(this).hasClass("rotate180")) 
      $(this).removeClass("rotate180").addClass("rotate270"); 
    else
    if($(this).hasClass("rotate270")) 
      $(this).removeClass("rotate270").addClass("rotate0"); 
 });
</script>
</html>