当前位置：首页 > jquery

jquery小游戏

2026-03-16 19:02:47jquery

jQuery 小游戏开发指南

jQuery 是一个快速、简洁的 JavaScript 库，非常适合用来开发简单的网页小游戏。以下是几个常见的 jQuery 小游戏示例和开发方法。

猜数字游戏

创建一个简单的猜数字游戏，玩家需要猜测一个随机生成的数字。

$(document).ready(function() {
    var randomNumber = Math.floor(Math.random() * 100) + 1;
    var attempts = 0;

    $('#guessButton').click(function() {
        var userGuess = parseInt($('#guessInput').val());
        attempts++;

        if (userGuess === randomNumber) {
            $('#result').text('恭喜你猜对了！用了 ' + attempts + ' 次尝试。');
        } else if (userGuess < randomNumber) {
            $('#result').text('太小了，再试一次！');
        } else {
            $('#result').text('太大了，再试一次！');
        }
    });
});

记忆卡片游戏

实现一个简单的记忆配对游戏，玩家需要找到所有匹配的卡片对。

$(document).ready(function() {
    var cards = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D'];
    cards.sort(() => 0.5 - Math.random());
    var flippedCards = [];
    var matches = 0;

    $('.card').each(function(index) {
        $(this).data('value', cards[index]);
        $(this).click(function() {
            if ($(this).hasClass('flipped') || flippedCards.length >= 2) return;

            $(this).addClass('flipped').text($(this).data('value'));
            flippedCards.push($(this));

            if (flippedCards.length === 2) {
                if (flippedCards[0].data('value') === flippedCards[1].data('value')) {
                    matches++;
                    flippedCards = [];
                    if (matches === cards.length / 2) {
                        alert('恭喜你赢了！');
                    }
                } else {
                    setTimeout(function() {
                        flippedCards.forEach(card => {
                            card.removeClass('flipped').text('');
                        });
                        flippedCards = [];
                    }, 1000);
                }
            }
        });
    });
});

贪吃蛇游戏

使用 jQuery 创建一个简单的贪吃蛇游戏。

jquery小游戏

$(document).ready(function() {
    var snake = [{x: 10, y: 10}];
    var food = {x: 5, y: 5};
    var direction = 'right';
    var gameLoop;

    function draw() {
        $('#gameBoard').empty();
        snake.forEach(segment => {
            $('<div>').css({
                left: segment.x * 20,
                top: segment.y * 20
            }).addClass('snake').appendTo('#gameBoard');
        });
        $('<div>').css({
            left: food.x * 20,
            top: food.y * 20
        }).addClass('food').appendTo('#gameBoard');
    }

    function move() {
        var head = {x: snake[0].x, y: snake[0].y};

        switch(direction) {
            case 'up': head.y--; break;
            case 'down': head.y++; break;
            case 'left': head.x--; break;
            case 'right': head.x++; break;
        }

        snake.unshift(head);
        if (head.x === food.x && head.y === food.y) {
            food = {
                x: Math.floor(Math.random() * 20),
                y: Math.floor(Math.random() * 20)
            };
        } else {
            snake.pop();
        }
    }

    $(document).keydown(function(e) {
        switch(e.which) {
            case 37: if (direction !== 'right') direction = 'left'; break;
            case 38: if (direction !== 'down') direction = 'up'; break;
            case 39: if (direction !== 'left') direction = 'right'; break;
            case 40: if (direction !== 'up') direction = 'down'; break;
        }
    });

    gameLoop = setInterval(function() {
        move();
        draw();
    }, 200);
});