Php牌组洗牌和显示[关闭]答案

【问题标题】：Php Deck of cards shuffling and display [closed]Php牌组洗牌和显示[关闭]
【发布时间】：2016-12-23 18:12:30
【问题描述】：

我正在尝试为我的客户做类似的事情 -> Tarot Card Readings

用户点击卡片组
卡片对齐允许用户选择 6 张卡片。
一旦用户选择了 6 张卡片，他就会被定向到显示其卡片的页面。

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

【问题讨论】：

您的问题需要更加具体。你有什么问题？你知道 HTML/CSS 吗？ JavaScript？您正在使用什么（如果有）JavaScript 框架？也许您需要将其作为几个不同的问题提出。

【解决方案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 类，以便它们可以以不同的方式制作动画。

或者您可以创建一个 Jquery 动画，为每个元素添加几个像素（以便用户可以选择一张卡片。）在这种情况下，您必须使用 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 路由器，这样我就不必刷新页面，并且每个页面都存储在客户端上，因此不必重新加载。

【讨论】：