jquery制作html小游戏,使用css+JQuery制作开心农场小游戏模拟画面

效果如图所示：

代码如下所示：

#bg {

width: 500px;

height: 280px;

background-image: url(img/plowland.jpg);

background-repeat: no-repeat;

position: absolute;

}

img {

position: absolute;

width: 56px;

height: 56px;

}

#seed {

width: 56px;

height: 56px;

background-image: url(img/btn_seed.png);

top: 226px;

left: 30px;

position: absolute;

cursor: hand;

}

#grow {

width: 56px;

height: 56px;

background-image: url(img/btn_grow.png);

top: 226px;

left: 110px;

position: absolute;

cursor: hand;

}

#bloom {

width: 56px;

height: 56px;

background-image: url(img/btn_bloom.png);

top: 226px;

left: 190px;

position: absolute;

cursor: hand;

}

#fruit {

width: 56px;

height: 56px;

background-image: url(img/btn_fruit.png);

top: 226px;

left: 270px;

position: absolute;

cursor: hand;

}

#harvest {

width: 56px;

height: 56px;

background-image: url(img/btn_harvest.png);

top: 226px;

left: 350px;

position: absolute;

cursor: hand;

}

.border {

border: 2px solid red;

border-radius: 50px;

}

#reaps{

width: auto;

height: auto;

margin-top: 300px;

position: absolute;

}

#num{

margin-top: 310px;

margin-left: 65px;

position: absolute;

font-size: 30px;

}

$(function(){

//给播种设置点击事件

$("#seed").on("click",function(){

$("#grow").removeClass("border");//移除生长的class的值

$("#bloom").removeClass("border");//移除开花的class的值

$("#fruit").removeClass("border");//移除结果的class的值

$("#harvest").removeClass("border");//移除收获的class的值

$(this).addClass("border");//给播种设置选中样式

//给id为bg的div设置点击事件

$("#bg").on("click", function(e) {

//给图片设置一个class，值为img1

$("").addClass("img1").prependTo("#bg").css("top", e.pageY - 30).css("left", e.pageX - 34);

});

$(this).off("click");//移除播种的点击事件(因为已经有了种子，所以可以不再点击播种就能种了)

});

//给id为seed的span标签设置点击事件

$("#grow").on("click", function() {

$("#seed").removeClass("border");;//移除播种的class的值

$("#bloom").removeClass("border");;//移除开花的class的值

$("#fruit").removeClass("border");;//移除结果的class的值

$("#harvest").removeClass("border");;//移除收获的class的值

$(this).addClass("border");//给生长设置选中样式

//判断如果class值为img1的图片的src路径为img/seed.png，则把src路径改变为img/grow.png，否则让它先播种

if($(".img1").attr("src") == "img/seed.png") {

$(".img1").attr("src", "img/grow.png");

} else {

alert("请先播种！");

}

});

$("#bloom").on("click", function() {

$("#seed").removeClass("border");

$("#grow").removeClass("border");

$("#fruit").removeClass("border");

$("#harvest").removeClass("border");

$(this).addClass("border");

if($(".img1").attr("src") == "img/grow.png") {

$(".img1").attr("src", "img/bloom.png");

} else {

alert("请先生长！");

}

});

$("#fruit").on("click", function() {

$("#seed").removeClass("border");

$("#grow").removeClass("border");

$("#bloom").removeClass("border");

$("#harvest").removeClass("border");

$(this).addClass("border");

if($(".img1").attr("src") == "img/bloom.png") {

$(".img1").attr("src", "img/fruit.png");

} else {

alert("请先开花！");

}

});

$("#harvest").on("click", function() {

$("#seed").removeClass("border");

$("#grow").removeClass("border");

$("#bloom").removeClass("border");

$("#fruit").removeClass("border");

$(this).addClass("border");

//如果class值为img1的图片的src路径为img/fruit.png，则把该图片放到id为reaps的div中，

//然后删除之前的class值，在重新添加一个class值，并设置css样式中的top和left设置为0px

if($(".img1").attr("src") == "img/fruit.png") {

$(".img1").attr("src","img/fruit.png").prependTo("#reaps").removeClass("img1").addClass("reap").css("top",0).css("left",0);

//获取class值为reap的图片的个数，并把个数放到id为num的span标签中

var length = $(".reap").length;

$("#num").text("×" +length);

} else {

alert("作物还没成熟！");

}

$("#harvest").removeClass("border");

});

});