文章/答案/技术大牛

发布

js翻牌游戏

基础概念：翻牌游戏通常指的是一种记忆匹配游戏，玩家需要翻开卡片来找到匹配的对子。在JavaScript中实现翻牌游戏，通常涉及到DOM操作、事件处理以及一些基本的算法逻辑。

优势：

提高记忆力：游戏本身有助于锻炼玩家的记忆力。
互动性强：玩家可以直接在浏览器中与游戏互动。
易于实现：使用JavaScript和HTML/CSS可以快速搭建一个翻牌游戏。

类型：

经典翻牌游戏：玩家需要找到所有匹配的卡片对。
限时翻牌游戏：在限定时间内完成匹配任务。
多人在线翻牌游戏：支持多人同时在线对战。

应用场景：

教育领域：用于儿童记忆力训练。
娱乐休闲：作为网页上的小游戏供人们放松娱乐。
社交活动：在线聚会时的互动小游戏。

常见问题及解决方法：

问题1：卡片翻转动画不流畅。

原因：可能是由于DOM操作过于频繁或JavaScript执行效率不高。
解决方法：使用CSS3动画代替JavaScript动画，减少DOM操作次数，优化代码逻辑。

问题2：游戏结束后无法正确重置。

原因：重置逻辑可能存在错误，或者没有正确清除之前的状态。
解决方法：编写清晰的重置函数，确保每次重置都能完全清除之前的游戏状态，并重新初始化游戏。

问题3：匹配逻辑出错，导致无法正确判断卡片是否匹配。

原因：可能是由于匹配算法设计不当或者存在逻辑漏洞。
解决方法：仔细检查匹配算法，确保每次翻牌都能正确判断两张卡片是否匹配，并及时更新游戏状态。

示例代码：以下是一个简单的翻牌游戏实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻牌游戏</title>
    <style>
        .card {
            width: 100px;
            height: 100px;
            background-color: #ccc;
            margin: 10px;
            display: inline-block;
            cursor: pointer;
            position: relative;
        }
        .card.flipped {
            background-color: #fff;
        }
        .card img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 0.5s;
        }
        .card.flipped img {
            opacity: 1;
        }
    </style>
</head>
<body>
<div id="game-board">
    <!-- 卡片将通过JavaScript动态生成 -->
</div>
<script>
    const cards = [
        { id: 1, src: 'image1.jpg' },
        { id: 2, src: 'image2.jpg' },
        // ... 其他卡片
    ];
    const gameBoard = document.getElementById('game-board');
    let flippedCards = [];

    function createCard(card) {
        const div = document.createElement('div');
        div.className = 'card';
        div.addEventListener('click', () => flipCard(div));
        const img = document.createElement('img');
        img.src = card.src;
        div.appendChild(img);
        return div;
    }

    function flipCard(cardElement) {
        if (cardElement.classList.contains('flipped') || flippedCards.length >= 2) return;
        cardElement.classList.add('flipped');
        flippedCards.push(cardElement);
        if (flippedCards.length === 2) checkForMatch();
    }

    function checkForMatch() {
        const [firstCard, secondCard] = flippedCards;
        if (firstCard.querySelector('img').src === secondCard.querySelector('img').src) {
            // 匹配成功
            flippedCards = [];
        } else {
            // 匹配失败，稍后翻回
            setTimeout(() => {
                firstCard.classList.remove('flipped');
                secondCard.classList.remove('flipped');
                flippedCards = [];
            }, 1000);
        }
    }

    // 初始化游戏板
    cards.forEach(card => gameBoard.appendChild(createCard(card)));
</script>
</body>
</html>

这个示例代码展示了一个简单的翻牌游戏实现，包括卡片的生成、翻转逻辑以及匹配检查。你可以根据自己的需求进一步扩展和优化这个游戏。

页面内容是否对你有帮助？

有帮助

没帮助

翻牌游戏

reactjs

最初，所有卡片都是正面朝下的。每当单击一张卡片时，它就会翻过来朝上，而任何以前朝上的卡片都会翻过来朝下。例如，在单击Cards组件上的第二个单元格后，将呈现为：我无法使它工作，请帮帮我 const [cardFlipped, setCardFlipped] = React.useState(false); const handleClick = () =&

浏览 1提问于2021-11-21得票数 0

2回答

尝试创建一个纸牌游戏，用户访问页面并单击显示国王或王后的每张卡片。如果第二张卡片与第一张卡片不匹配，当用户点击第三张卡片时，游戏应该重置。“卡片”以div开头，背景图像是卡片的背面。-- #container --> <script src="http://code.jquery.com/jquery-latest.min.js"></script><script src="javascript/script

浏览 0提问于2015-01-15得票数 0

1回答

在配对游戏中翻牌

java、android

我正在创建一个匹配的配对游戏，所以当两张牌匹配时，我会创建两个整数变量，并分别添加卡片1和卡片2到一个变量。他们会被检查，看他们是否匹配，如果他们这样做，他们会熬夜，如果没有，他们会翻过来。

浏览 2提问于2016-01-11得票数 2

回答已采纳

4回答

在纸牌游戏中翻牌

iphone、cocos2d-iphone、uiviewanimation、playing-cards

我开发了一个游戏，当用户触摸一张卡片时，它会慢慢翻转，数字会显示出来。为此，我可以使用什么cocos2d应用程序接口？或者，我应该创建具有指示翻转的帧的动画吗？

浏览 0提问于2011-09-06得票数 0

回答已采纳

2回答

如何在纸牌游戏中翻牌？

vb.net

我已经创建了一个纸牌游戏，其中2 x 12个不同的图像将加载到24个图片框中的vb形式。我的意图是让用户一次翻两张牌，试图找到要匹配的对。每次加载游戏时，都会有不同的图片，它们会出现在不同的位置。到目前为止，我已经成功地在游戏中加载了卡片背面的图像，但我无法翻转它们来查看我的图像是否已成功加载。我还不关心洗牌，我只是想看看图像是否已经加载，并能够有两张卡在同一时间翻转。

浏览 0提问于2017-01-11得票数 0

1回答

如何在IE 10中进行3D转换？

html、css、internet-explorer、3d、internet-explorer-10

它们是非常简单的动画，就像翻牌一样。据我所知，这首先不需要require 3D。有没有人知道这是否或如何实现？

浏览 0提问于2013-11-22得票数 2

1回答

我的JS没有操作HTML元素

javascript、html、dom

到目前为止，我的JS还没有更改任何元素。如果有人能看一下并给我一些建议，我将不胜感激。

浏览 23提问于2019-01-17得票数 0

2回答

libgdx y轴旋转(卡片翻转)

android、libgdx

我是一个全新的libgdx用户，我希望用它来写一个简单的纸牌游戏。我是不是一定要在游戏的这一部分使用3D库？这似乎有点过头了。或者，是否可以在libgdx游戏中组合android SDK动画代码的某些部分？

浏览 2提问于2014-11-19得票数 0

3回答

高级CSS动画库？

css、css-transitions

我环顾四周，但找不到任何好的资源来做更高层次的动画(如翻牌，立方体等)。比如？：CSS :：jQuery:JS。我知道，但我正在寻找有更多的功能和动画内置的东西。

浏览 1提问于2013-03-25得票数 1

回答已采纳

1回答

回收者视图项目翻转

android、kotlin、android-recyclerview

实际上，我正在使用回收器视图，并在行中添加布局，我在卡片视图上使用翻转动画(当单击它时)。问题是，当我在回收器中添加多个项目时，翻转动画仅适用于第一个项目。我用toast来确定点击函数是否能与其他项目一起工作，结果证明它能工作，但翻转动画不能与任何其他items.Can一起工作，这里有人能帮我吗这是我的代码 override fun onCardClick(item: PacketModel, position: Int) { frontCard.came

浏览 34提问于2020-04-04得票数 0

回答已采纳

1回答

Mips -打印游戏的棋盘

assembly、mips

大家好，我有一个mips作业，它应该是一个翻牌游戏，所以我应该打印一个4x13的棋盘* * * * * * * * * * * * *

浏览 2提问于2011-04-23得票数 0

2回答

当程序知道所有的牌时，如何计算扑克牌的百分比？

java、algorithm

如果仍然有混淆:如果有3个玩家，他们的手是播放器2: 2d 3c我想知道每个玩家提前赢得翻牌前、转弯前和河前感谢的百分比。

浏览 32提问于2020-02-17得票数 0

2回答

扑克大堂建筑

wpf、silverlight、wcf、architecture、poker

我对同行架构师的一个问题是，游戏大厅应该如何刷新？扑克游戏大厅不断更新统计数据，如玩家数量，每小时出手数和翻牌百分比。由于在任何给定时间都可能有数百个正在进行的游戏，因此我不确定每5秒返回一次整个游戏列表(轮询)是否为最佳。我在考虑使用增量查询，因为许多游戏不会有状态更新(例如:桌面上没有玩家)。当然，游戏大厅客户端将负责协调新数据，但我认为这可以帮助减轻游戏服务器的一些负担。有什么想法吗？

浏览 0提问于2012-01-11得票数 4

回答已采纳

1回答

未捕获的方向:无法读取未定义的属性“TypeError”

javascript、jquery、html、css

我正在创建记忆游戏。我想翻转卡片(Div)，让它更逼真。对于翻转，我使用插件。问题是翻牌不起作用。read property 'direction' of undefined VM24:1m.extend.each jquery.min.js:2$.fn.flip VM24:1m.event.dispatch jquery.min.

浏览 0提问于2014-06-23得票数 0

2回答

Javascript style.background在IE中不起作用

javascript、html、css、internet-explorer

我正在用Javascript做一个游戏，这需要用户翻牌。我在使用style.background属性时遇到问题。它在Chrome中运行良好，但在IE中不能正常工作。

浏览 0提问于2015-03-22得票数 1

1回答

如果将两张牌进行比较，并且图像具有相同的值，则它们会从在线记忆游戏的屏幕上消失

javascript

我在和js做魔法术。单击52张扑克牌图像中的两张牌，如果图像具有相同的值，这两张牌将从屏幕上消失。如果不是，卡片将返回到原始状态。我想进行此处理。即使我翻牌，我也不能比较这两张牌。

浏览 30提问于2021-07-07得票数 0

回答已采纳

1回答

翻牌游戏JavaScript上的隐藏风格可见性

javascript、html、css

我在html, css, and js中有一个card flipping game，我的最后一步是在用户猜对牌对后隐藏我的牌。目前，在匹配卡片之后，用户仍然能够看到它们。在研究了w3schools之后，我发现了一个名为hidden的样式，但我想在我的js中实现它。我在这方面有困难，任何帮助都将不胜感激。下面是代码片段。 script.type = "text/javascript"; script.src

浏览 0提问于2018-11-12得票数 0

2回答

如何在web上制作翻转表单(如翻牌效果)的技术

javascript、jquery、asp.net、css、ajax

如何制作这样的翻牌效果。注册完成后，它将翻转到另一边，具有翻转过渡效果。

浏览 11提问于2012-05-15得票数 4

回答已采纳

1回答

水平翻转卡片(保持高度为100%)

jquery、jquery-animate

在查看源代码时，我认为他们先做一个animate {width:0%}，然后再做一个animate {width:100%}，这是在翻牌，但我的动画看起来与他们的不同：$(document).on.animate({width:'0%'})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js

浏览 9提问于2018-08-30得票数 1

回答已采纳

2回答