I made a game where you have to drag the right figures to each other. But it won't work for touchscreen (it only has to work for touchscreen). Can someone help me? I would appreciate if you write the code i need since i am a beginner at coding and i dind'd manage to let it work with articles.
$(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();
}
//Als je een fout maakt
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 {
}
//Als je alles goed hebt
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;
margin-top: 8%;
z-index:2;
}
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid green;
margin-top: 8%;
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;
margin-top: 8%;
z-index:4;
}
#squareinside {
width: 100px;
height: 100px;
background: gray;
margin-top: 8%;
}
#circleinside {
width: 100px;
height: 100px;
background: gray;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin-top: 8%;
}
#triangle-upinside {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid gray;
margin-top: 8%;
}
#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;
margin-top: 8%;
}
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: 200px 200px 200px 200px;
margin-left: 30%;
margin-top: 50px;
}
.grid-2 {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
margin-left: 30%;
margin-top: 50px;
}<!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 id="centerText" style="width:100%; height:100%; z-index:0;" align="center">
Match the Shapes!
</div>
<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>
<audio id="win" src="media/win.mp3"></audio>
</body>
</html>So i want to make this game work for a touchscreen device.
