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

效果如图所示：
使用css+JQuery制作开心农场小游戏模拟画面-LMLPHP
代码如下所示：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery.js"></script>
    <style type="text/css">
        #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;
        }
    </style>
</head>
<body>
<div id="bg"></div>
<span id="seed"></span>
<span id="grow"></span>
<span id="bloom"></span>
<span id="fruit"></span>
<span id="harvest"></span>
<div id="reaps"></div>
<span id="num"></span>
<script type="text/javascript">
    $(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
                $("<img src='img/seed.png' />").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");
        });

    });

</script>
</body>
</html>
燕慧

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