Affenpuzzle/Spiel

Wiki-Quelltext dieser Seite.

== Das Affenpuzzle (Hexenpuzzle) ==
Legen Sie die Karten in einem Feld 3x3 Karten so, dass alle Teile zusammenpassen.

Auf Karten Klicken, um sie zu drehen. Drag und Drop, um sie zu verschieben.  

<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:800px;
  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>

 $('.card').draggable({ containment: "parent", grid: [ 32, 32 ], 
  start: function() { $(this).addClass("dragging");},
  stop: function() { $(this).removeClass("dragging");},
  drag: function(e, ui) {
  }
 });
 $('.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>