Php 一副牌的洗牌和展示

Question

我正在尝试为我的客户做一些与此完全相同的事情 -> Tarot Card Readings

用户点击牌组
卡片对齐，允许用户挑选 6 张卡片。
一旦用户选择了 6 张卡片，他就会被引导到一个显示他的卡片的页面。

我的客户有 44 张卡片。除了使用 Php Shuffle ()，我什至不知道如何开始这样的应用程序。我不是在寻找完整的代码，而只是在寻找如何入门的指导。

Answer 1

我认为您想做的是创建两个图像。一张图片是一副牌，另一张图片是一张牌。然后你要做的是为每个图像创建一个过渡。您可以使用 Jquery 完成这一切。 PHP 可能不会有太大帮助，因为 PHP 处理元素操作的能力不如 JavaScript。

Jquery.animate 将拥有您需要的一切。如果你擅长 css，你也可以优化它，因为 css 有它自己的过渡

$('.button').click(function(){
    $('.card').animate({
        left: 200px,
        right: 10px
    })
})

与CSS:

@keyframes card-animate {
    from {left: 20px;}
    to {left: 300px;}
}

/* The element to apply the animation to */
.card {
    width: 100px;
    height: 50px;
    background-image: url('card.jpg');
    animation-name: card-animate;
    animation-duration: 4s;
}

编辑：

您可能必须为每张卡片创建一个 css class，以便它们可以不同地动画。

或者您可以创建一个 Jquery 动画，为它所动画的每个元素添加几个像素（以便用户可以 select 一张卡片。）在这种情况下，您将不得不循环使用 JavaScript（或更可能是 JQuery）通过每个元素来切换动画。然后，您必须在每张卡片上创建一个点击事件，以便用户可以点击该卡片。然后，您必须将点击次数存储在一个全局变量中，以便每个侦听器都可以递增它。我建议将卡的值存储在一个数组中，然后进行测试。我还会像这样将值作为 HTML 属性添加到您的图像中。

<img class="card" title="aSpades" />

var array = [];

$('.card').click(function(){
    if(array.length < 6){
        array.push($(this).attr('title'));
    } else { // if the user has 6 cards navigate to new page
        window.location.href = "http://www.somesite.fqd/path/to/page"
    }
}

然后您可能必须使用 PHP 和隐藏输入将数组传递到带有表单的下一页。这取决于您的设置方式。我个人喜欢使用单页应用程序和 js 路由器，这样我就不必刷新页面，并且每个页面都存储在客户端上，因此无需重新加载。

Php 一副牌的洗牌和展示

Php Deck of cards shuffling and display

javascript

php

shuffle