一个基于html5+jquery实现的连连看小游戏

warning: 这篇文章距离上次修改已过205天,其中的内容可能已经有所变动。

以下是一个简化版的连连看小游戏实现,仅包含核心功能:




<!DOCTYPE html>
<html>
<head>
    <title>连连看游戏</title>
    <style>
        .card {
            width: 80px;
            height: 120px;
            float: left;
            margin: 10px;
            cursor: pointer;
            position: relative;
            background-size: cover;
        }
        .card.matched {
            opacity: 0.5;
        }
    </style>
</head>
<body>
 
<div id="game-board">
    <!-- 卡片动态生成 -->
</div>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    var cards = ["1.jpg", "2.jpg", "3.jpg", ...]; // 所有卡片图片列表
    var currentCard = null;
    var matchedCards = [];
 
    function shuffle(array) {
        var currentIndex = array.length, temporaryValue, randomIndex;
        while (0 !== currentIndex) {
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;
            temporaryValue = array[currentIndex];
            array[currentIndex] = array[randomIndex];
            array[randomIndex] = temporaryValue;
        }
        return array;
    }
 
    function createCardsHTML() {
        var html = '';
        cards = shuffle(cards); // 洗牌
        cards.forEach(function(card) {
            html += '<div class="card" style="background-image: url(' + card + ');"></div>';
        });
        $('#game-board').html(html);
    }
 
    function resetGame() {
        matchedCards = [];
        currentCard = null;
        $('.card').removeClass('matched');
    }
 
    createCardsHTML(); // 创建卡片HTML
 
    $('.card').click(function() {
        var $this = $(this);
        if ($this.hasClass('matched')) return; // 已匹配的卡片不再响应点击
 
        if (currentCard && $this[0] !== currentCard[0]) {
            var card1 = currentCard.attr('style').match(/url<span class="katex">\((.*)\)</span>/)[1];
            var card2 = $this.attr('style').match(/url<span class="katex">\((.*)\)</span>/)[1];
            if (card1 === card2) { // 匹配卡片逻辑
                currentCard.addClass('matched');
                $this.addClass('matched');
                matchedCards.push(currentCard);
                matchedCards.push($this);
                if (matchedCards.length === cards.length / 2) {
                    alert('恭喜你,游戏胜利!');
                    resetGame();
                }
            } else {
                // 不匹配时的处理逻辑(例如:卡片翻转回原样)
                setTimeout(function() {
         
最后修改于:2024年08月07日 10:30

评论已关闭

推荐阅读

DDPG 模型解析,附Pytorch完整代码
2024年11月24日
DQN 模型解析,附Pytorch完整代码
2024年11月24日
AIGC实战——Transformer模型
2024年12月01日
Socket TCP 和 UDP 编程基础(Python)
2024年11月30日
python , tcp , udp
如何使用 ChatGPT 进行学术润色?你需要这些指令
2024年12月01日
AI
最新 Python 调用 OpenAi 详细教程实现问答、图像合成、图像理解、语音合成、语音识别(详细教程)
2024年11月24日
ChatGPT 和 DALL·E 2 配合生成故事绘本
2024年12月01日
omegaconf,一个超强的 Python 库!
2024年11月24日
【视觉AIGC识别】误差特征、人脸伪造检测、其他类型假图检测
2024年12月01日
[超级详细]如何在深度学习训练模型过程中使用 GPU 加速
2024年11月29日
Python 物理引擎pymunk最完整教程
2024年11月27日
MediaPipe 人体姿态与手指关键点检测教程
2024年11月27日
深入了解 Taipy:Python 打造 Web 应用的全面教程
2024年11月26日
基于Transformer的时间序列预测模型
2024年11月25日
Python在金融大数据分析中的AI应用(股价分析、量化交易)实战
2024年11月25日
AIGC Gradio系列学习教程之Components
2024年12月01日
Python3 `asyncio` — 异步 I/O,事件循环和并发工具
2024年11月30日
llama-factory SFT系列教程:大模型在自定义数据集 LoRA 训练与部署
2024年12月01日
Python 多线程和多进程用法
2024年11月24日
Python socket详解,全网最全教程
2024年11月27日