jQuery 是一种 JavaScript 库,可以简化代码,提高开发效率。它有很多实用的函数和方法,可以帮助我们快速完成一些常见的操作,如 DOM 操作、事件处理、动画效果等。在本文中,我们将介绍一个使用 jQuery 编写的小游戏代码。
$(document).ready(function() { // 定义参数 var score = 0; var timeLeft = 30; var interval; // 定义点击事件 $(".mole").click(function() { score++; $("#score").text(score); }); // 定义计时器函数 function countdown() { timeLeft--; $("#time").text(timeLeft); if (timeLeft == 0) { clearInterval(interval); alert("Game Over! Your score is " + score); } } // 开始游戏 $("#start").click(function() { score = 0; timeLeft = 30; $("#score").text(score); $("#time").text(timeLeft); $(".mole").removeClass("active"); interval = setInterval(function() { var randomIndex = Math.floor(Math.random() * $(".mole").length); $(".mole").eq(randomIndex).addClass("active"); setTimeout(function() { $(".mole").eq(randomIndex).removeClass("active"); }, 1000); }, 1500); setTimeout(function() { clearInterval(interval); alert("Time's up! Your score is " + score); }, timeLeft * 1000); }); });
上面的代码实现了一个“打地鼠”小游戏。游戏的规则很简单,游戏开始后,地鼠会随机从洞里钻出来,玩家需要尽快点击它们,每打中一个地鼠就会得到一分,时间到后会弹出提示框显示得分。
在代码中,我们使用了 jQuery 的 selector、event、attribute 和 class 相关函数。其中,$(document).ready()
表示文档加载完成后执行,$(".mole")
表示选取所有类名为“mole”的元素,.click()
表示绑定点击事件,.addClass()
和.removeClass()
表示添加和移除 class。
通过使用 jQuery,我们可以以更简洁、易读的方式编写游戏代码,提高开发效率。