使用HTML5，CSS3和Jquery的老虎机效果

这一切始于我最初想制作老虎机视频游戏时，还有其他一些想法可以尝试。 这是一个代码和信息集合，可用于创建各种老虎机效果。 通常，这种想法是使用HTML5，CSS3和/或JQuery提供不同的效果来产生旋转的车轮和其他一些效果。

在尝试使动画正确显示时，经常会出现问题。 这并不总是像任何人最初想的那样简单。 特别是对于使用这些工具的初学者而言。 直到最近我才开始使用HTML5，CSS3和JQuery。 希望这将减少其他人的搜索时间。

带有老虎机效果的横幅

我做了一个横幅，我需要一种很好的方法在其上制作动画老虎机效果。 带有2D动画，这很简单。 尝试通过3D转换进行操作可能是一场灾难。 再说一次，在使用WebKit的某些浏览器中，我会遇到兼容性问题。 要修复它，我必须使用JQuery和JQ Transform库，这是我开始的代码：

<div class="select-a-game ">
    <ul class="select-a-game-name text-center">
      <li class="sagn-dark-blue">S</li>
      <li class="sagn-dark-grey">E</li>
      <li class="sagn-orange">L</li>
      <li class="sagn-red">E</li>
      <li class="sagn-grey">C</li>
      <li class="sagn-dark-blue">T</li>
      <li class="sagn-black">A</li>
      <li class="sagn-dark-grey">G</li>
      <li class="sagn-dark-blue">A</li>
      <li class="sagn-grey">M</li>
      <li class="sagn-red">E</li>
    </ul>
  </div>

最终涉及到在我的<li>元素中使用了overflow：hidden样式。 然后，我必须将每个字母包装在<div>中。 最后，我必须为<div>的top属性的内部设置动画，使其垂直移动。 当该top属性达到某个数字时，我必须将其位置重置为负数。 文本必须已经通过<li>的底部。 一旦将位置设置为负数，它将排在最前面，因此我编写了以下代码，而不是所有代码：

$('li').click(function(event){
$( event.target ).css({ perspective: 200, rotateY: 240 });
}); 

JS函数是这一切的重要部分。 这只是我能想到的最简单的实现。 当然，这只是任何人根据需要进行修改的示例。 该函数在单击时被调用，因此它不会立即起飞。 选择场地老虎机样式

我制作了一个应用程序，当用户单击按钮时，该应用程序将从集合中随机选择一个场所。 我希望随机选择看起来像老虎机游戏。 为此，我决定尝试将CS​​S3和JQuery用于动画。 最初，我使用–webkit-keyframes并更改背景位置。 不幸的是，动画效果不是很好。

这是我开始的一些代码：

@-webkit-keyframes spin{ 
  0% { 
        background-position: 0, 0 0;
        -webkit-transform: rotateX(0deg);
     }
  100% {
        background-position: 0, 0 -640px;
        -webkit-transform: rotateX(360deg);
     }
}
.rotating{
    -webkit-animation: spin .5s infinite linear;
    -webkit-transition: background-position .7s;
} 

我用另一种策略继续了它，但是使用WebKit时，它却是很冗长的代码。 其他策略也没有取得如此好的效果。 最终，我选择了CSS 3D。 CSS 3D和一些三角函数还不错。 我需要一个“较小”比例的旋转木马以垂直站立并沿其Y轴旋转。

查看老虎机游戏，例如X-Tra Bonus Reels，跳蚤市场和Sunny。 我可以看到它们具有3D外观。 它们没有像其他许多老虎机视频游戏一样平坦的外观。 不，我认为这不是3D外观“超炫”，但肯定存在，而且还不错。

您可以使用卷轴模板的示例：

我想要的那些轮子上有一个“较小”比例的轮播外观。 但是在这种情况下，我只需要一个轮子。

通过下面的示例代码（下面的基本设置代码），我可以进行多种更改。 包括面板的数量，其大小，以及使转盘垂直或水平站立。 这是九个面板轮。 每个面板之间的间距为20px。 宽度设置为210px。

<section class="container">
  <div id="carousel">
    <figure>1</figure>
    <figure>2</figure>
    <figure>3</figure>
    <figure>4</figure>
    <figure>5</figure>
    <figure>6</figure>
    <figure>7</figure>
    <figure>8</figure>
    <figure>9</figure>
  </div>
</section> 
.container {
  width: 210px;
  height: 140px;
  position: relative;
  perspective: 1000px;
} 
#carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
} 
#carousel figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 186px;
  height: 116px;
  left: 10px;
  top: 10px;
  border: 2px solid black;
}
//To rotate them, each panel is rotated in 40 degree increments (360 / 9). 
#carousel figure:nth-child(1) { transform: rotateY(   0deg ); }
#carousel figure:nth-child(2) { transform: rotateY(  40deg ); }
#carousel figure:nth-child(3) { transform: rotateY(  80deg ); }
#carousel figure:nth-child(4) { transform: rotateY( 120deg ); }
#carousel figure:nth-child(5) { transform: rotateY( 160deg ); }
#carousel figure:nth-child(6) { transform: rotateY( 200deg ); }
#carousel figure:nth-child(7) { transform: rotateY( 240deg ); }
#carousel figure:nth-child(8) { transform: rotateY( 280deg ); }
#carousel figure:nth-child(9) { transform: rotateY( 320deg ); } 
#carousel figure:nth-child(1) { transform: rotateY(   0deg ) translateZ( 288px ); }
#carousel figure:nth-child(2) { transform: rotateY(  40deg ) translateZ( 288px ); }
#carousel figure:nth-child(3) { transform: rotateY(  80deg ) translateZ( 288px ); }
#carousel figure:nth-child(4) { transform: rotateY( 120deg ) translateZ( 288px ); }
#carousel figure:nth-child(5) { transform: rotateY( 160deg ) translateZ( 288px ); }
#carousel figure:nth-child(6) { transform: rotateY( 200deg ) translateZ( 288px ); }
#carousel figure:nth-child(7) { transform: rotateY( 240deg ) translateZ( 288px ); }
#carousel figure:nth-child(8) { transform: rotateY( 280deg ) translateZ( 288px ); }
#carousel figure:nth-child(9) { transform: rotateY( 320deg ) translateZ( 288px ); } 

如果要更改宽度或包括多少面板，可以使用//此JS方程。

var tz = Math.round( ( panelSize / 2 ) / Math.tan( Math.PI / numberOfPanels ) ); 
// to get to a specific panel
transform: translateZ( -288px ) rotateY( -160deg );  

总而言之，可以通过动态脚本来处理重复性的事情。 我可以使用绘画和动画，所以我只需要将它们设置为像老虎机一样旋转即可。 使用向下弹跳效果

当我查看各种老虎机视频游戏时，在旋转快结束时，面包卷会出现一些弹跳。 在《五次玩》中可以看到一个很好的例子。 它恰好在每个卷中显示最终结果之前发生。 当我将其与真实老虎机进行比较时，我注意到真实机器中经常发生相同的反弹。

在制作老虎机游戏时，我从以下代码开始：

$('#test').css( "margin-top", 7400px );
$('#test').animate(
    {"margin-top": "0px"},
    {'duration' : 3000, 'easing' : $.bez([0,0,0.9,1.1])}
); 

不幸的是，结果是不可接受的。 我想要的是在尽可能接近真实老虎机的情况下实现一个不错且平滑的小弹跳。 当我发现动画问题仅限于一个bezier函数和结束关键帧时，出现了动画问题。 下一个想法是尝试多个关键帧。 我很快发现JQuery的animate（）函数不支持多个关键帧。 我必须使用CSS来解决该问题。

为了使这个“短n甜”，我省略了前缀。 这是我使用的代码：

@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  } 
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  } 
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  } 
  75% {
    transform: translate3d(0, -10px, 0);
  } 
  90% {
    transform: translate3d(0, 5px, 0);
  } 
  to {
    transform: none;
  }
}  

上面的基本代码可以根据需要进行修改。 通过使用立方火盆，它提供了一个良好的开端。 当然，其中包括多个关键帧。 这节省了我大量时间来尝试研究各种库。 画线

当我看到各种各样的老虎机视频游戏，例如《五次玩》，《奔跑的烧瓶》和《 X-Tra奖励卷轴》时，任何胜利都会通过线显示。 有很多老虎机视频游戏可以做到这一点。 不仅有一条预先绘制的“胜利”线始终在中心。 在这些游戏中，根据需要在所有地方都显示线条。 在检查了各种内容之后，我决定我的主要也是最好的选择是在HTML5中使用<canvas>。 这将创建一个即时绘图表面。

有趣的是默认情况下它是透明的，我可以根据需要为老虎机视频游戏画线。 如果需要，我可以删除边框或将其他内容用作边框（装饰）。 只需执行以下代码即可在HTML5中制作画布：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>   

我可以在任何给定时间使用多个画布。 我只需要记住要为每个画布指定ID以及width和height属性。 从那里，我只需要画线就可以了。 这是一条从200 x 100框的左上角到右下角的非常基本的对角线：

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();  

对于刚开始使用这些工具的人来说，这可以节省很多时间。 对于我来说，在进行上述操作时，我已经修改并重试了这里的所有内容。 我毫不怀疑，这里的效果足够有效。

或者至少，它们可以作为一个好的开始。 问题仍然存在，因为还有其他各种因素可以弥补。 好消息是，我知道这段代码可以帮助创建这些效果。

另外，由于从Stackoverflow等受欢迎的网站上收集了信息，我做了所有列出的项目，并实现了这些。 这个资源是在我的参与下开发的，在那里我实现了所有技能。

From: https://bytes.com/topic/html-css/insights/967154-slot-machine-effects-using-html5-css3-jquery