Question

我正在制作一款移动应用，其中一部分可以投掷骰子。我正在使用Ionic作为移动框架，并使用角度和jquery来制作骰子。问题是当我滚动多个骰子时，这些骰子可以出现在同一个位置，因此基本上相互重叠。我尝试使用jquery offset（）和position（），然后说骰子的左值永远不会相同，这样骰子总会出现在另一个＆＃39;列中。但不知何故，这并没有奏效，因为它在滚动前记录了位置，而不是在滚动之后。

这是我的代码：

dice.html

<ion-view view-title="dice" id="dice">
    <ion-nav-bar class="bar-stable">
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-content id="dice" scroll="true">

             <button class="btn orange" id="addDie1" type="button"><span>Add second die</span></button>
             <button class="btn red" id="addDie2" type="button"><span>Add third die</span></button>    
        <section id="roll-wrap">
<div id="die" style="transform: rotateX(0deg) rotateY(0deg);">
    <div class="sf f1">1</div>
    <div class="sf f2">2</div>
    <div class="sf f3">3</div>
    <div class="sf f4">4</div>
    <div class="sf f5">5</div>
    <div class="sf f6">6</div>
</div>
<div id="die2" style="transform: rotateX(0deg) rotateY(90deg);">
    <div class="sf f1">1</div>
    <div class="sf f2">2</div>
    <div class="sf f3">3</div>
    <div class="sf f4">4</div>
    <div class="sf f5">5</div>
    <div class="sf f6">6</div>
</div>
<div id="die3" style="transform: rotateX(0deg) rotateY(180deg);">
    <div class="sf f1">1</div>
    <div class="sf f2">2</div>
    <div class="sf f3">3</div>
    <div class="sf f4">4</div>
    <div class="sf f5">5</div>
    <div class="sf f6">6</div>
</div>
</section>
<button class="btn orange" id="play" type="button"><span>Roll it</span></button>
    </ion-content>
</ion-view>

controllers.js

.controller('DiceCtrl', function($scope) {

     (function($, self){
      if(!$ || !self) {
      return;
      }
      for(var i=0; i<self.properties.length; i++) {
      var property = self.properties[i],
      camelCased = StyleFix.camelCase(property),
      PrefixCamelCased = self.prefixProperty(property, true);
      $.cssProps[camelCased] = PrefixCamelCased;
      }
      })(window.jQuery, window.PrefixFree);

    //Actual code for Play Action , still buggy for 2 dice stacking on top of eachother
    $(function(){

    $("#addDie1").click(function(e){
      e.preventDefault();
      $("#die2").css("display","block");
    });
    $("#addDie2").click(function(e){
      e.preventDefault();
      $("#die3").css("display","block");
    });
    $()
    var x=[0,90,180,270];
    $("#play").click(function(e){
       var position = $(".sf").offset();
      var position2 = $("#die2 .sf").offset();
      var position3 = $("#die3 .sf").offset();
      console.log(position);
      console.log(position2);
      console.log(position3);
      e.preventDefault();
      do {
        var rand1=Math.floor(Math.random()*4);
        var rand2=Math.floor(Math.random()*4);
        var rand3=Math.floor(Math.random()*4);
        var rand4=Math.floor(Math.random()*4);
        var rand5=Math.floor(Math.random()*4);
        var rand6=Math.floor(Math.random()*4);
      } while((x[rand1] == x[rand3] && x[rand2] == x[rand4]) || (x[rand1] == x[rand5] && x[rand2] == x[rand6]) || (x[rand3] == x[rand5] && x[rand4] == x[rand6]))

        console.log(x[rand1] + "\n" + x[rand2] + "\n" + x[rand3] + "\n" + x[rand4] + "\n" + x[rand5] + "\n" + x[rand6] + "\n")
        $("#die").css("transform","rotateX("+x[rand1]+"deg) rotateY("+x[rand2]+"deg)");
        $("#die2").css("transform","rotateX("+x[rand3]+"deg) rotateY("+x[rand4]+"deg)"); 
        $("#die3").css("transform","rotateX("+x[rand5]+"deg) rotateY("+x[rand6]+"deg)");    


      });
    });
})

的style.css

#dice {
    background: url("../img/dice_bg.jpg") no-repeat;  
    background-position: center; 
    background-size: cover;
}
#roll-wrap {
perspective: 800;
perspective-origin: 50% 200px;
}
#addDie1, #addDie2{
width: 50%;
}
#addDie2 {
    float:right;
}
#play {
    width: 50%;
    margin-left: 25%;
    margin-top: 10px;
}
.btn {
  position: relative;
  display: inline-block;
  margin: 0px auto;
  padding: 0;
  overflow: hidden;
  border-width: 0;
  outline: none;
  background-color: #2ecc71;
  color: #ecf0f1; 
  transition: background-color .3s;
}
.btn > * {
  position: relative;
}

.btn span {
  display: block;
  padding: 12px 24px;
}

.btn.orange {
  background-color: #e67e22;
}

.btn.orange:hover, .btn.orange:focus {
  background-color: #d35400;
}

.btn.red {
  background-color: #e74c3c;
}

.btn.red:hover, .btn.red:focus {
  background-color: #c0392b;
}

#die {
  position: relative;
  margin: 40px auto 0;
  height: 400px;
  width: 90%;
  transition: transform 1.5s linear;
  transform-style: preserve-3d;
}
#die2 {
  position: relative;
  margin: -400px auto 0;
  height: 400px;
  width: 90%;
  transition: transform 1.5s linear;
  transform-style: preserve-3d;

}
#die3 {
  position: relative;
  margin: -400px auto 0;
  height: 400px;
  width: 90%;
  transition: transform 1.5s linear;
  transform-style: preserve-3d;

}
.sf {
  position: absolute;
  height: 62px;
  width: 62px;
  padding: 20px;
  background-color:white;;
  font-size: 30px;
  color: black;;
  border: 1px solid white;
  border-radius: 3px;
  text-align: center;

}
/* TranslateZ = hoever elk vlak vaneen moet staan. rotateX waar het moet staan */
#die .f1, #die2 .f1, #die3 .f1  {
  transform: rotateX(90deg) translateZ(30px);
}
#die .f2, #die2 .f2, #die3 .f2  {
  transform: translateZ(30px);
}
#die .f3, #die2 .f3, #die3 .f1 {
  transform: rotateY(90deg) translateZ(30px);
}
#die .f4, #die2 .f4, #die3 .f4 {
  transform: rotateY(180deg) translateZ(30px);
}
#die .f5, #die2 .f5, #die3 .f5 {
  transform: rotateY(-90deg) translateZ(30px);
}
#die .f6, #die2 .f6, #die3 .f6 {
  transform: rotateX(-90deg) rotate(180deg) translateZ(30px);
}

抛掷时如何使骰子不重叠？

0 个答案: