In my latest project, I created a fun game that involves matching different shapes. The goal is to drag the correct figure next to its corresponding shadow figure for a perfect match. Currently, if you partially overlap the square with its shadow, the game still accepts it as a good match.
$(document).ready(function() {
$(".selectable").draggable({
addClasses: false,
snap: true,
stack: ".destination",
scroll: false
});
$(".destination").draggable({
snapMode: "inner"
});
$(".destination").draggable("disable");
$(".destination").droppable({
drop: function(event, ui) {
var selectedShape = ui.draggable.attr("id");
var dropZone = $(this).attr("id");
dropZone = dropZone.replace("inside", "");
if (selectedShape == dropZone) {
$("#" + selectedShape).draggable("disable");
checkShapeStatus();
} else {
alert("Wrong choice!");
}
}
});
});
function checkShapeStatus() {
var counter = 0;
$(".selectable").each(function() {
var $thisId = $(this);
var booleanValue = $thisId.draggable('option', 'disabled');
if (booleanValue) {
counter = counter + 1;
} else {
}
if (counter == 4) {
win.play();
}
})
}#square {
width: 100px;
height: 100px;
background: red;
margin-top: 8%;
z-index: 1;
}
#circle {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
z-index: 2;
}
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid green;
z-index: 3;
}
#pacman {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid yellow;
border-left: 60px solid yellow;
border-bottom: 60px solid yellow;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
z-index: 4;
}
#squareinside {
width: 100px;
height: 100px;
background: gray;
}
#circleinside {
width: 100px;
height: 100px;
background: gray;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
#triangle-upinside {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid gray;
}
#pacmaninside {
width: 0px;
height: 0px;
border-right: 60px solid transparent;
border-top: 60px solid gray;
border-left: 60px solid gray;
border-bottom: 60px solid gray;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}
body {
background-color: bisque;
overflow: hidden;
}
#centerText {
font-family: 'Rock Salt', cursive;
font-size: xx-large;
style="width:100%;
height: 100%;
z-index: 0;
text-align: center;
margin-top: 2%;
}
.grid-1 {
display: grid;
grid-template-columns: 150px 150px 150px 150px;
}
.grid-2 {
display: grid;
grid-template-columns: 150px 150px 150px 150px;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Shape Matching</title>
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet">
<script src="script.js"></script>
</head>
<body>
<div class="grid-1">
<div id="pacmaninside" class="destination"></div>
<div id="triangle-upinside" class="destination"></div>
<div id="circleinside" class="destination"></div>
<div id="squareinside" class="destination"></div>
</div>
<div class="grid-2">
<div id="square" class="selectable"></div>
<div id="circle" class="selectable"></div>
<div id="triangle-up" class="selectable"></div>
<div id="pacman" class="selectable"></div>
</div>
</body>
</html>If you're interested in modifying the code and testing the game yourself, feel free to give it a try!