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>