JQuery实战

最新推荐文章于 2021-10-12 11:19:56 发布

不知疲倦的专业码农

最新推荐文章于 2021-10-12 11:19:56 发布

阅读量131

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_44200101/article/details/117380609

版权

打僵尸游戏

1.生成僵尸

1.首先要先将僵尸生成在页面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>僵尸大战</title>
    <style type="text/css">
        body{
            background-image: url("../zombimgs/ZoomBackground.jpg");/*设置背景图*/
        }
        img{
            position: absolute;/*修改绝对定位 因为要控制僵尸在页面任意位置显示*/
            width: 60px;
            height: 60px;
        }
    </style>
</head>
<body>
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script>
    //获取窗口的宽高
    var w = $(window).width();
    var h = $(window).height();
    // alert("窗口的高为"+w+"宽为"+h);

    //把宽高设置到背景图上
    $("body").css("background-size",w+"px "+h+"px");

    //窗口尺寸改变事件
    onresize = function () {
        //获取窗口的宽高
        var w = $(window).width();
        var h = $(window).height();
        //把宽高设置到背景图片上
        $("body").css("background-size",w+"px "+h+"px");
    }
    //定时器
    setInterval(function () {
        //创建图片
        var img = $("<img src='../zombimgs/ZoomBackground.jpg'>");
        var left = w;
        var top = parseInt(Math.random()*(h-60));
        img.css({"left":left+"px","top":top+"px"});
        $("body").append(img);
    },100);
</script>
</body>
</html>

2.僵尸移动

//设置僵尸移动
    //10毫秒动一次 一次动4像素
    var t = 10;
    var p = 4;
    var timove = setInterval(function () {
        //遍历所有img
        $("img").each(function () {
            //每个img元素都从当前位置向左移动4像素
            var oldleft = parseInt($(this).css("left"));//
            //将left属性设置为当前left属性值-4
            $(this).css("left",(oldleft-p)+"px");
        })
    })

3.使用鼠标打僵尸

//给img对象添加鼠标移入事件a
        img.mouseover(function () {
            //删除当前img元素
            img.remove();
            sCount++;//消灭个数+1
            $("#s_h3").text("成功数量:"+sCount);
        })；

4.全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>僵尸大战</title>
    <style type="text/css">
        body{
            background-image: url("../zombimgs/ZoomBackground.jpg");/*设置背景图*/
            /*overflow: hidden ,将body范围之外出现的内容直接隐藏，不出现滚动条*/
            overflow: hidden;
        }
        img{
            position: absolute;/*修改绝对定位 因为要控制僵尸在页面任意位置显示*/
            width: 60px;
            height: 60px;
        }
        #s_h3{
            float: left;
            color: blue;
            background-color: rgba(255,255,255,0.6);
        }
        #f_h3{
            float: right;
            color:blue;
            background-color: rgba(255,255,255,0.6);
        }
    </style>
</head>
<body>
<h3 id="s_h3">消灭数量:0</h3>
<h3 id="f_h3">进屋数量:0</h3>
<script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
<script>
    //定义消灭和进屋的僵尸数
    var sCount = 0;//消灭、成功数量
    var fCount = 0;//消灭、失败数量

    //获取窗口的宽高
    var w = $(window).width();
    var h = $(window).height();
    // alert("窗口的高为"+w+"宽为"+h);

    //把宽高设置到背景图上
    $("body").css("background-size",w+"px "+h+"px");

    //窗口尺寸改变事件
    onresize = function () {
        //获取窗口的宽高
        w = $(window).width();
        h = $(window).height();
        //把宽高设置到背景图片上
        $("body").css("background-size",w+"px "+h+"px");
    }

    //定时器
    setInterval(function () {
        //僵尸图片类型的变量
        //消灭数量：0-19->0  20-39->1 >40->2
        var type=parseInt(sCount/20);
        //如果type大于2 那么就赋值为2，因为图片就三张所以最大就到2 012
        if(type>2)
            type=2;
        //创建图片
        var img = $("<img src='../zombimgs/Zoomimg0"+(type+1)+".png'>");

        var left = w;
        var top = parseInt(Math.random()*(h-60));
        img.css({"left":left+"px","top":top+"px"});
        $("body").append(img);
        //给img对象添加鼠标移入事件a
        img.mouseover(function () {
            //删除当前img元素
            img.remove();
            sCount++;//消灭个数+1
            $("#s_h3").text("成功数量:"+sCount);
        });
    },100);

    //设置僵尸移动
    //10毫秒动一次 一次动4像素
    var t = 10;
    var p = 4;
    var timove = setInterval(function () {
        //遍历所有img
        $("img").each(function () {
            //每个img元素都从当前位置向左移动4像素
            var oldleft = parseInt($(this).css("left"));//
            //将left属性设置为当前left属性值-4
            $(this).css("left",(oldleft-p)+"px");
            //判断僵尸的位置是不是进屋了
            if(oldleft<=100){
                $(this).remove();
                fCount++;
                $("#f_h3").text("进屋数量"+fCount);
                if(fCount>=20){
                    //出现一个可以点击确定或者取消的confirm窗口
                    if(confirm("游戏结束，重新开始吗？")){
                        //用户点击确定，游戏重新开始
                        //刷新页面
                        location.reload();
                    }else {
                        //用户点击取消，清空页面僵尸，定时器停止
                        $("img").remove();
                        clearInterval(timove);
                    }
                }
            }
        })
    })
</script>
</body>
</html>

不知疲倦的专业码农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JQuery实战

打僵尸游戏1.生成僵尸1.首先要先将僵尸生成在页面上<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>僵尸大战</title> <style type="text/css"> body{ background-image: url("../zombimgs/ZoomB
复制链接

扫一扫