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>
.cards {
  display:flex;
  flex-wrap:wrap;
}
.card {
  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;
}
.card0 {
  background-position: 0.5% 1%;
}
.card1 {
  background-position: 49.5% 1%;
}
.card2 {
  background-position: 98% 1%;
}

.card3 {
  background-position: 0.5% 49.5%;
}
.card4 {
  background-position: 49.5% 49.5%;
}
.card5 {
  background-position: 98% 49.5%;
}

.card6 {
  background-position: 0.5% 98%;
}
.card7 {
  background-position: 49.5% 98%;
}
.card8 {
  background-position: 98% 98%;
}


.card.dragging {
  box-shadow:4px 4px 10px rgba(0,0,0,0.5);
}
</style>
<div class="cards">
<div class="card card0"></div>
<div class="card card1"></div>
<div class="card card2"></div>

<div class="card card3"></div>
<div class="card card4"></div>
<div class="card card5"></div>

<div class="card card6"></div>
<div class="card card7"></div>
<div class="card card8"></div>
</div>
<script>

</script>
</html>