记录立邦商城母亲节浇花js效果

最新推荐文章于 2023-05-14 00:09:55 发布

一天一天积累

最新推荐文章于 2023-05-14 00:09:55 发布

阅读量1.1k

点赞数

分类专栏： jquery 文章标签： js

本文链接：https://blog.youkuaiyun.com/u012011360/article/details/46331627

版权

jquery 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一个交互式浇花游戏，玩家通过点击按钮开始游戏，使用水壶倒水来浇灌虚拟花朵。游戏设有奖励机制，包括激活水壶倒水状态、触发花开效果以及提供优惠券奖励。同时，展示了如何通过JavaScript实现游戏的互动性和奖励逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(document).ready(function(){
window.active = false;
$(".mothersday_button").click(function(){//开始浇花
active = true;
$(".mothersday_button").hide();
$(".mothersday_flower").removeClass("cursor_change").addClass("cursor"); //水壶初始状态
return false;
});

$(".mothersday_flower").mousedown(function(){ //水壶倒水状态
if( !active ) return;
$(this).removeClass("cursor").addClass("cursor_change");
});

$(".mothersday_flower").mouseup(function(){//水壶回到初始状态
if( !active ) return;
setTimeout(function(){
$(".mothersday_flower").removeClass("cursor_change").addClass("cursor");
}, 100);
var test = setTimeout(function(){
showtime(); //4秒后，花开
},1500);
});

$(".get_coupon img").click(function(){ //弹框
$(".get_coupon").remove();
});;

window.showtime = function(){
$(".success").fadeIn();
setTimeout(function(){
$(".success").remove();
}, 800);
$(".mothersday_flower").unbind("mousedown").unbind("mouseup");
$(".mothersday_flower").removeClass("cursor").removeClass("cursor_change");
$(".mothersday_flower").css('background','url(./images/index/kv/mothersday_flower_change.png)');
setTimeout(function(){
$(".get_coupon").fadeIn();
}, 1500);
}
});