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

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

原创最新推荐文章于 2023-05-14 00:09:55 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

jquery 专栏收录该内容

24 篇文章

订阅专栏

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

$(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);
}
});