淘先锋技术网

首页 1 2 3 4 5 6 7

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,我们可以以更简洁、易读的方式编写游戏代码,提高开发效率。