Question

我很难弄清楚如何在我的应用中创建拖放功能，接受可拖动的项目并确定它是否是正确的答案，如果它是正确的，它将显示一条说明成功的消息！< / p>

我的应用显示两张图片。两个图像都是比萨饼的一部分，然后它将显示8个可拖动的数字，您必须从中选择它们并将它们拖动到一个可放置的盒子中，该盒子将检查它是否正确。所以我从：

开始

 PizzaImageOne[1]="http://s23.postimg.org/6yojml8vb/Pizza_One.png"
 PizzaImageOne[2]="http://s13.postimg.org/5d8zxnb2b/pizzatwo.png"

这种情况发生了8次，因此数组的每个数字代表它所拥有的切片数量。

然后我致电var whichImage = Math.round(Math.random()*(p-1));。我将一个随机数存储到变量whichImage中，该变量包含披萨切片的数量，因为每个数组编号与披萨切片图像相关，我将用它来生成随机披萨：

document.write('<img src="'+theImages[whichImage]+'">');

我用新数组再次做到这一点

PizzaImageTwo[1]="http://s23.postimg.org/6yojml8vb/Pizza_One.png"
PizzaImageTwo[2]="http://s13.postimg.org/5d8zxnb2b/pizzatwo.png"

同样精确但有新变量，因此随机调用可能与第一个不同

 var whichImage2 = Math.round(Math.random()*(p-1))

然后我

<script>
    $(function() {
        $( "#draggable1" ).draggable();
    });
</script>

我这样做了8次#draggable1，#draggable2，#draggable3，......一直到8。

然后我制作了一个数组并将它们保存到每个数组中，每次8次，每个可拖动函数代表1到8之间的数字，因为我们正在添加像分数一样的披萨饼。

var theimagestwo = new Array();
Draggablenumber[1] = $("#draggable1");
DraggableNumber[2] = $("#draggable2");

我这样做，直到我在每个数组中填充8个可拖动的数字

所以逻辑是MyAnswer = WhichImage + WhichImage2。然后我必须检查DraggableNumber[MyAnswer]是否被删除然后我有正确的答案......

我将如何创建此功能？

Answer 1

这是一种方法，您可以将SVG更改为Canvas并在您的Pizza图像中克隆。

工作示例：https://jsfiddle.net/Twisty/x1uzqsxe/5/

<强> HTML

<div id="NewSlice">
  <p>Take a Slice</p>
  <div class="pieSlice draggable"></div>
</div>
<div id="MakePie">
  <p>
    Make Pie Here
  </p>
  <svg id="EmptyPie">
    <circle r="38" cx="75" cy="75" />
  </svg>
  <p id="Results">Pie is 0 / 8 (0%) Complete.</p>
</div>

<强> CSS

.pieSlice {
  width: 0px;
  height: 0px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 75px solid red;
  border-radius: 50%;
  /*transform:rotate(50deg);*/
}

svg {
  width: 150px;
  height: 150px;
  margin: 10px 37px;
  background: transparent;
  border: 1px solid #000;
  border-radius: 50%;
  position: relative;
  transform: rotate(-90deg);
}

circle {
  fill: white;
  stroke: red;
  stroke-width: 75;
  stroke-dasharray: 0 239;
}

#NewSlice {
  width: 100px;
  margin: 10px;
  padding: 3px;
  border: 1px solid #222;
}

#MakePie {
  width: 225px;
  height: 225px;
  margin: 15px;
  padding: 7px;
  border: 1px solid #222;
  background: white;
}

#NewSlice p,
#MakePie p {
  width: 100%;
  padding: 0;
  margin: 0;
  text-align: center;
}

<强> JQuery的

var myPie = 0;
var pieTotal = 8;
var c = 239; //2*pi*r
var arc = 30; // c / number of slices (8)

$(document).ready(function() {
  $("#NewSlice div.draggable").draggable({
    opacity: 0.7,
    helper: "clone"
  });
  $("#MakePie").droppable({
    hoverClass: "ui-state-hover",
    drop: function(e, i) {
      console.log("Slice dropped on Pie.");
      if (myPie < pieTotal) {
        myPie++;
        $("#Results").html("Pie is " + myPie + " / " + pieTotal + " (" + ((myPie / pieTotal) * 100) + "%) Complete.");
        $("circle").css("stroke-dasharray", (arc * myPie) + " 239");
      }
    }
  });
});

将切片拖到披萨馅饼区域上，使用“描边划线”方法绘制1/8切片。随着更多切片的添加，增加破折号。你可以在Canvas中做同样的事情。将切片克隆到圆圈中。克隆一秒，旋转它等。

拖放数学游戏

1 个答案: