jquery小游戏免费代码

欧易交易所欧易app 欧易下载搜狗输入法搜狗输入法 quickq下载 quickq官网

在寻找有趣又简单的小游戏来打发时间吗？我要和大家分享一些免费的jQuery小游戏代码，这些代码可以让你轻松地在自己的网站上添加一些互动元素，无论是个人博客还是企业网站，都能让访客的体验更加丰富，jQuery是一种快速、小巧且功能丰富的JavaScript库，它让HTML文档遍历和操作、事件处理、动画和Ajax变得简单。

弹球游戏

让我们从经典的弹球游戏开始，这个游戏的代码简洁，易于理解，非常适合初学者，玩家需要控制一个挡板，来反弹一个不断下落的球，目的是避免球触地。

$(document).ready(function() {
  var ball = $('<div/>').addClass('ball').appendTo('body');
  var paddle = $('<div/>').addClass('paddle').appendTo('body');
  var score = 0;
  var scoreDisplay = $('<div/>').addClass('score').text(score).appendTo('body');
  function moveBall() {
    ball.animate({top: ball.position().top + 10}, 100, moveBall);
  }
  function resetBall() {
    ball.css({top: 0, left: Math.random() * ($(window).width() - 40)});
    score = 0;
    scoreDisplay.text(score);
  }
  $(document).keydown(function(e) {
    switch (e.which) {
      case 37: // left arrow
        paddle.animate({left: paddle.position().left - 10}, 100);
        break;
      case 39: // right arrow
        paddle.animate({left: paddle.position().left + 10}, 100);
        break;
    }
  });
  $(document).keyup(function(e) {
    switch (e.which) {
      case 37:
      case 39:
        paddle.stop();
        break;
    }
  });
  $(document).mousemove(function(e) {
    paddle.css({left: e.pageX - 40 / 2});
  });
  setInterval(function() {
    var ballTop = ball.position().top;
    var paddleTop = paddle.position().top + 20;
    var paddleLeft = paddle.position().left + 40 / 2;
    if (ballTop > paddleTop - 20 && ballTop < paddleTop + 20 && ball.position().left > paddleLeft - 20 && ball.position().left < paddleLeft + 20) {
      ball.css('top', paddleTop - 20);
      score++;
      scoreDisplay.text(score);
    }
    if (ballTop > $(window).height()) {
      resetBall();
    }
  }, 10);
  resetBall();
  moveBall();
});

记忆翻牌游戏

接下来是一个记忆翻牌游戏，这个游戏可以锻炼玩家的记忆力，玩家需要记住每张牌的位置，然后翻出相同的牌对。

$(document).ready(function() {
  var cards = [];
  var matched = [];
  for (var i = 0; i < 8; i++) {
    cards.push('card' + i);
    cards.push('card' + i);
  }
  cards.sort(function() { return 0.5 - Math.random(); });
  function createBoard() {
    for (var i = 0; i < cards.length; i++) {
      var card = $('<div/>').addClass('card').text(cards[i]).attr('id', 'card' + i).click(cardClicked).appendTo('#board');
    }
  }
  function cardClicked() {
    if ($(this).hasClass('flipped') || matched.length === 8) {
      return;
    }
    $(this).addClass('flipped');
    matched.push($(this).text());
    if (matched.length === 2) {
      checkMatch();
    }
  }
  function checkMatch() {
    if (matched[0] === matched[1]) {
      $('#card' + cards.indexOf(matched[0])).addClass('matched');
      $('#card' + cards.indexOf(matched[1])).addClass('matched');
    } else {
      setTimeout(unmatch, 500);
    }
    matched = [];
  }
  function unmatch() {
    $('#card' + cards.indexOf(matched[0])).removeClass('flipped');
    $('#card' + cards.indexOf(matched[1])).removeClass('flipped');
  }
  createBoard();
});

简易打地鼠游戏

是一个简易的打地鼠游戏，玩家需要在地鼠出现时迅速点击，看谁能获得最高分。

$(document).ready(function() {
  var moles = [];
  for (var i = 0; i < 5; i++) {
    moles.push($('<div/>').addClass('mole').appendTo('#gameBoard'));
  }
  function game() {
    var rand = Math.floor(Math.random() * moles.length);
    moles[rand].css({top: Math.random() * 200});
    moles[rand].animate({top: 250}, 1000, function() {
      $(this).css({top: Math.random() * 200});
    });
  }
  $('#gameBoard').on('click', '.mole', function() {
    $(this).addClass('hit');
    setTimeout(function() {
      $(this).removeClass('hit');
    }, 100);
  });
  setInterval(game, 2000);
});

这些小游戏都是用jQuery编写的，它们不仅能够为你的网站增添乐趣，还能提高用户的参与度和互动性，你可以根据自己的需要进行修改和扩展，创造出更多有趣的游戏，希望这些代码能激发你的创意，让你的网站变得更加生动有趣！