前端制作PUBG瞄准镜！

最新推荐文章于 2024-05-20 02:26:37 发布
最新推荐文章于 2024-05-20 02:26:37 发布
阅读量414 收藏 1
点赞数 1
分类专栏： 前端 文章标签： css html jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QuKinX/article/details/116088311
版权

还是老样子，看效果
在这里插入图片描述
移动会和pubg一样
在这里插入图片描述
（这两个不一样的）
不相信可以访问这个来直接查看，移动端暂未适配：
Web瞄准镜

HTML：

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>射击</title>
    <link rel="stylesheet" href="index.css">
    <script src="jquery.js"></script>
</head>
<body>
<main class="blur">
    <div class="sight">
        <div class="aim">
            <div class="aim_son aim_vertical"></div>
            <div class="aim_son aim_horizontal"></div>
            <div class="aim_son aim_point"></div>
            <div class="aim_open"></div>
        </div>
        <!--<div class="people"></div>-->
    </div>
</main>
<footer>
    <div class="hand">
        <div class="hand_aim"></div>
    </div>
</footer>
<script src="index.js"></script>
</body>
</html>

CSS：

* {
    margin: 0;
    padding: 0;
}

body{
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

main{
    background: url('img/bg_9.jpg') no-repeat fixed;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    cursor: all-scroll;
}

.blur{
    filter: blur(1.5px);
}

.sight {
    display: none;
    cursor: none;
    width: 100%;
    height: 100%;
    background: url("img/bg_9.jpg") no-repeat fixed;
    background-size: 100% 100%;
}

.sight:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: inherit;
    filter: blur(5px);
}

.aim {
    position: absolute;
    top: 40%;
    left: 30%;
    height: 350px;
    width: 350px;
    background: inherit;
    z-index: 1;
    border-radius: 50%;
    transition: box-shadow 300ms;
    box-shadow: inset 0 0 35px 20px black;
    pointer-events: none;
    border: 10px solid black;
    overflow: hidden;
}
.aim_son{
    transition: left 250ms,top 250ms;
}
.aim_vertical{
    border-right: 2px dashed red;
    height: 100%;
    width: 1px;
    position: relative;
    left: calc(50% - 3px);
}
.aim_horizontal{
    border-top: 2px dashed red;
    height: 1px;
    width: 100%;
    position: relative;
    top: calc(-50% - 3px);
}
.aim_point{
    position: relative;
    width: 8px;
    height: 8px;
    background: red;
    border-radius: 50%;
    top: calc(-50% - 8px);
    left: calc(50% - 5px);
}
.aim_open{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
}
.people{
    background: url("./img/people.png") no-repeat;
    background-size: 100% 100%;
    width: 100px;
    height: 200px;
    position: fixed;
    z-index: 9999;
}
footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 300px;
}
.hand{
    background: url("./img/hand.png") no-repeat;
    background-size: 100% 100%;
    width: 500px;
    height: 100%;
    position: absolute;
    right: 0;
}
.hand_aim{
    width: 50px;
    height: 50px;
    position: absolute;
    border-radius: 50%;
    left: 225px;
    top: 20px;
    background: url("img/bg_9.jpg") no-repeat;
    background-size: 100% 100%;
    filter: blur(1.5px);
}

$(function () {
    /*
    * right_click是否是开镜状态(true是关闭状态)
    * aim是瞄准镜
    * aim_top是记录按下的瞬间的top值(没啥用了)
    * moves是每移动的规定时间内比较前后的数组
    * mv是记录下所有运动轨迹
    * sc是瞄准镜后坐力抖动效果setInterval的名称
    * mode是模式，默认为狙击枪(sniper)，还有步枪(rifle)
    * */
    let right_click=true,aim=$('.aim'),aim_top=0,moves=[],mv=[],sc,mode='sniper';
    // 移动
    function move(e) {
        // 减去瞄准镜的一半，使变成中心点
        let left=e.offsetX-175;
        let top=e.offsetY-175;
        // 记录下瞄准镜的top坐标
        aim_top=top;
        // 移动之后瞄准镜改变位置
        $('.aim').css({
            'left':left,
            'top':top
        });
        // 记录下坐标，到后面moves数组中第一个和最后一个进行比较
        mv.unshift([top,left]);
        moves.push([top,left]);
    }
    // 移动方向时，判断瞄准镜内部阴影动画
    function direction() {
        // 如果没有移动，那就复原
        if (moves.length!==0) {
            // 除以100是因为数字太大，加上10是因为只有个位数的位移的数据不够大
            let top1 = moves[0][0] / 100 + 10;
            let left1 = moves[0][1] / 100 + 10;
            let top2 = moves[moves.length - 1][0] / 100 + 10;
            let left2 = moves[moves.length - 1][1] / 100 + 10;
            // 防止轻微的移动都要有动画效果
            if (Math.abs(top2-top1) > 0.3 ||Math.abs(left2-left1) > 0.3) {
                // 判断是否为负数，当负数时是-10，正数时是+10
                let one = Math.floor((top2 - top1) > 0 ? ((top2 - top1) + 10) : ((top2 - top1) - 10));
                let two = Math.floor((left2 - left1) > 0 ? ((left2 - left1) + 10) : ((left2 - left1) - 10));
                aim.css('box-shadow', 'inset ' + two + 'px ' + one + 'px 35px 20px black');
                $('.aim_vertical').css('left', 'calc(50% - 3px + ' + two + 'px)');
                $('.aim_horizontal').css('top', 'calc(-50% - 3px + ' + one + 'px)');
                $('.aim_point').css({
                    'left': 'calc(50% - 5px + ' + two + 'px)',
                    'top': 'calc(-50% - 8px + ' + one + 'px)'
                });
            }
            // 清除
            moves=[];
        }else{
            // 瞄准镜里面复原为原位
            aim.css('box-shadow','inset 0px 0px 35px 20px black');
            $('.aim_vertical').css('left','175px');
            $('.aim_horizontal').css('top','-175px');
            $('.aim_point').css({
                'left': '173px',
                'top' : '-181px'
            });
        }
    }
    // 狙击枪：
    function sniper() {
        $(document).click(function () {
            // 记录下之后要复原的top值
            let top=aim.css('top');
            // 判断要往哪方向移动抖动后坐力
            let left=Math.random()>0.5?-Math.floor(Math.random()*20):Math.floor(Math.random()*20);
            // 暂停瞄准镜后坐力抖动效果
            clearInterval(sc);

            // 点击位置
            // console.log(top,aim.css('left'));

            // 瞄准镜横线网上提30px
            $('.aim_horizontal').animate({top: '-205px'},200);
            // 瞄准镜点也随之移动，并把偏移抖动量也算进去
            $('.aim_point').animate({
                left: (173+left)+'px',
                top : '-211px'
            },200);
            // 阴影往下效果时，后坐力也往上提
            // console.log(parseInt(top)-100,parseInt(aim.css('left'))-left)
            aim.stop(true).css('box-shadow','inset 0px -30px 35px 20px black').animate({
                top:(parseInt(top)-100)+'px',
                left:(parseInt(aim.css('left'))-left)+'px'
            },200,function () {
                aim.css('box-shadow','inset 0px 0px 35px 20px black');
                // 提好之后，因为不能压强的缘故，所以回到鼠标的位置
                aim.stop().animate({
                    // top:(parseInt(aim_top)-left)
                    top:mv[0][0]+'px',
                    left:mv[0][1]+'px'
                },200);
                $('.aim_horizontal').css('top','-175px');
                $('.aim_point').css({
                    'left': '173px',
                    'top' : '-181px'
                });
                // 开始瞄准镜后坐力抖动效果
                sc=setInterval(direction,200);
            });
        });
    }
    // 步枪：
    function rifle() {
        
    }

    $(document).keydown(function (e) {
        // 按m切换是步枪还是狙击枪
        if (e.keyCode===77){
            if(mode==='sniper') mode='rifle';
            else mode='sniper';
            console.log(mode);
        }
    })
    // 右键
    $(document).bind("contextmenu", function (e) {
        // 先把瞄准镜复原
        aim.css('box-shadow','inset 0px 0px 35px 20px black');
        // 当没开镜状态下
        if (right_click){
            // 持枪人消失
            $('footer').css('display','none');
            // 开镜动画
            $('.aim_open').animate({
                top:'-370px',
                left:'-370px'
            })
            // 改变状态
            right_click=false;
            // 开镜之后定位在哪里，如果没有，下次开镜会出现直接跳转的效果
            move(e);
            // 移动时也要实时监测
            $(document).mousemove(function (e) {
                move(e);
            });
            // 开始规定时间内比较距离
            sc=setInterval(direction,100);

            // 清空
            moves=[];
            // 判断是用哪种枪
            if (mode==='sniper') sniper();
            if (mode==='rifle') rifle();

            // 记录下瞄准镜里面定位线的粗
            let aim_line=parseInt($('.aim_vertical').css('borderRightWidth'));
            let scrollFunc = function (e) {
                if (e.wheelDelta > 0) { //当滑轮向上滚动时
                    if (aim_line<3){
                        ++aim_line;
                    }
                    // alert("滑轮向上滚动");
                }
                else if (e.wheelDelta < 0) { //当滑轮向下滚动时
                    if (aim_line>0){
                        --aim_line;
                    }
                    // alert("滑轮向下滚动");
                }
                $('.aim_vertical').css('borderRightWidth',aim_line+'px');
                $('.aim_horizontal').css('borderTopWidth',aim_line+'px');
            }
            //滚动滑轮触发scrollFunc方法  //ie 谷歌
            window.onmousewheel = document.onmousewheel = scrollFunc;

            $('.sight').css('display','block');
            $('main').removeClass('blur');
        }else{
            $('footer').css('display','display');
            clearInterval(sc);
            right_click=true;
            // 先关闭瞄准镜
            $('.aim_open').animate({
                top:'0px',
                left:'0px'
            },300,function () {
                // 清除效果
                $(document).unbind('click');
                $(document).unbind('mousemove');
                $(document).unbind('mousedown');
                $(document).unbind('mouseup');
                $('.sight').css('display','none');
                $('main').addClass('blur');
            })

        }
        console.log("点击了右键");
        return false;
    });
});

js部分我都写注释了，应该都懂吧
jQuery应该也不需要我提供吧
如果都嫌麻烦可以直接去这个链接下：
码云下载
当然还有许多bug暂未修复，如果有哪位大佬会的可以联系我（bug知道，但不会改，诶～就是玩）

QuKie
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端技术搭建飞机大战小游戏（内含源码）
官方推荐
05-11 7万+
上周我们实通过前端基础实现了弹珠游戏，当然很多伙伴再评论区提出了想法，后续我们会考虑实现的，今天还是继续按照我们原定的节奏来带领大家完成一个飞机大战游戏，功能也比较简单简单，也是想借助这样一个简单的功能，然后来帮助大家了解我们JavaScript在前端中的作用， 在前面的文章当中我们也提及到我们在本系列的专栏是循序渐进从简单到复杂的过程，后续会带领大家用前端实现翻卡片、扫雷、贪吃蛇等有趣的小游戏，纯前端语言实现，都会陆续带给大家。欢迎大家订阅我们这份前端小游戏的专栏。
前端每日实战：9# 视频演示如何用纯 CSS 创作一种按钮被瞄准的交互特效
weixin_33804990的博客
05-01 144
效果预览 按下右侧的“点击预览”按钮在当前页面预览，点击链接全屏预览。 https://codepen.io/zhang-ou/pen/ELWMLr 可交互视频教程 此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 https://scrimba.com/c/cqrN...
JS+CSS实现狙击镜视觉效果
m0_58362205的博客
12-30 607
使用js与css还原了狙击镜移动时的不对称和模糊视觉效果
使用JS的画布制作一个瞄准镜
weixin_30648963的博客
08-09 114
<canvas width="600" height="500" id="myCanvas"></canvas> <script type="text/javascript"> //获取Canvas对象(画布) var canvas = document.getElementById("myCanvas"); ...
使用unity制作瞄准镜
yaoruijie的博客
04-22 1284
使用unity制作瞄准镜 一、创建场景 在Hierarchy窗口中使用Plane和Cube创建场景，并调整摄像机位置 二、使用步骤 1.在Hierarchy窗口中右击在UI中选择Image 2.将瞄准镜素材拖入Image的检视试图中Soure Image中 结果如下： （注意在导入图片时将图片类型更改为下图所示，更改完之后点击Apply） 3.调整瞄准镜位置 三.新建代码 代码如下（示例）： using UnityEngine; using System.Collections; public
unity：瞄准镜制作
weixin_50642897的博客
11-25 691
瞄准镜代码（通用） using UnityEngine; using System.Collections; public class TelesopicView : MonoBehaviour { public float zoomLevel = 2.0f; public float zoomInSpeed = 100.0f; public float zoomOutSpeed = 100.0f; private float initFOV; public Ga
【unity】FPS快速实现全息瞄准镜
１eonＣhan的博客
04-17 3057
使用Unity快速实现全息瞄准镜效果 先看最终效果： 最近在做项目小地图的时候，使用到了UI层的Mask 起初想使用SpriteRenderer控制我的一个图片直接变色，但是发现了一个Bug，在Mask之内的所有SpriteRenderer下的Sprite，都是原来的基础颜色而非我想要的其他颜色，效果如图： 可以看到的 我是以最大的外面的圆作为Mask的大小，我要变色的SpriteRenderer是其子物体。 因为一开始我的圆是黑的，我想着会不会是被遮挡，于是以改变SpriteRenderer
光学瞄准镜是怎么调节校准的，你学会了吗？
Jfoutdoor的博客
06-28 7715
很多玩瞄的兄弟都不太清楚瞄到手后瞄具应该怎么调整校对，这里简单通俗给大家讲讲，希望有帮助！ 【第一：消除视差】 　要想舒服的瞄准，精确的射击，先要消除光瞄的视差即将视差归零 这样才能保证你瞄准时眼睛位置稍有变化时，瞄到的位置依然是准确的，这时候才可以校准瞄的瞄点与弹着点尽量重合！ 【第二：必要掌握的参数含义】 　举例4-14x44SFF光学瞄准镜，咔嗒值：1/4MOA（1英寸=2.54cm），最...
Swift、Flutter 共同瞄准 Windows！
一起来捉 Bug 呀~~
09-24 7955
Windows 生态全面开花时代，苹果的 Swift、谷歌的 Flutter 相继宣布支持 Windows 10，这无疑为锦上添花，也为开发者带来了福音！ 近日，苹果 Swift 编程语言和 Google 基于 Dart 编程语言的 Flutter UI 框架已经登陆 Windows 10。 Swift 工具链支持 Windows 10 Swift 是 Apple 于 2014 年 WWDC 上发布的开源通用编程语言，对于很多用户而言，Swift 在一定程度上可视为是 iOS 开发者的专用语言，主要用.
易语言源码易语言画板瞄准镜.rar
03-31
易语言源码易语言画板瞄准镜.rar
易语言画板瞄准镜
07-23
易语言画板瞄准镜源码,画板瞄准镜
Android瞄准镜效果（3D）
03-26
Android瞄准镜效果（3D）,网络上看到的，觉得不错就上传出来，供大家一起共同分享学习。
超声波瞄准镜
03-30
用于盲人和视障人士的移动电子设备。
CSS-相对和绝对和固定位置
Kevin7_35Durant的博客
05-18 303
将位置改成相对位置，与原先的位置顶部相距100px。原来的位置是占用状态，其他元素无法使用。改变位置的参照物是自己原来的位置。元素的位置在网页滚动时不变。属性值：relative。属性值：absolute。改变位置的参照物是父元素。属性：position。属性：position。属性：positon。
css使用clip-path裁剪出不规则图形并绑定点击事件
qq_40576549的博客
05-16 311
使用工具拖拽出红色区域图形并获取到对应的 clip-path: polygon(使用方式见下方图解（ 多边形裁剪可视化工具。
前端 CSS 经典：filter 滤镜
weixin_64684095的博客
05-17 375
什么叫滤镜呢，就是把元素里的。
JavaWeb基础（HTML,CSS,JS）
最新发布
2302_77073236的博客
05-20 221
还有DOM，本质上DOM将web页面和脚本（编程）语言连接起来了，成为了网页编程的接口，还有DOM的节点树，以及document的常用方法及属性。这些知识用了三四天左右学完，因为是JavaWeb，并不是前端，所以只是够用，不是深入，但是这确实是学校一个学期交的东西（JavaWeb课程）。HTML：这部分并没有什么难点，两种表单提交的方法需要搞清楚（默认为GET和POST）。JS：因为有Java基础，JS的逻辑层面比较清晰，以及定义函数的两种方式（静态和动态），CSS：这部分更是流水账，根据W3C查找即可。
Less 文件转 CSS 文件
zz130428的博客
05-17 414
组件库，同一组件在不同平台的功能一致，但是样式有所不同，如果仍然使用上面的方式进行打包，显然很难满足不同平台对不同样式的需求，因此我开始调研相关的解决方案。发现在诸如 ant-design 这样的知名组件库中，React 组件的书写和样式的书写是分开的，用户在使用过程中，除了需要引入 React 组件之外，还需要统一引入打包好的 css 样式文件。到这里，其实基本上完成了我的需求，只需要将不同主题的各个样式文件统一到对应的入口 less 文件中，之后统一运行编译命令即可生成对应主题的 css 文件。
设计和测量瞄准镜并算出瞄准镜倍率的实验步骤
06-11
以下是一个简单的实验步骤，用于设计和测量瞄准镜并计算瞄准镜倍率： 1. 确定所需的材料和工具，如准直仪、标尺、卡尺、透明塑料、镜片、磨床等。 2. 利用透明塑料制作一个瞄准镜框架，确保框架足够坚固，可以固定在枪支上。 3. 选择适当的镜片，一般选择光学玻璃镜片或者聚合物材料镜片，制作瞄准镜镜片。 4. 将瞄准镜镜片安装在瞄准镜框架上，确保其水平和垂直方向的准直。 5. 使用准直仪将瞄准镜对准标准点，测量瞄准镜的视场角和视场直径。 6. 使用卡尺和标尺测量瞄准镜的放大倍率，这可以通过在不同距离处比较瞄准镜视场中的对象大小来实现。 7. 使用磨床进行微调和精细加工，以确保瞄准镜的放大倍率和准直精度满足要求。 8. 对瞄准镜进行实验测试，包括测量瞄准镜的精度和稳定性，以及其在实际环境中的表现。 以上是一个简单的实验步骤，具体的步骤可能会因为实验要求和具体情况而有所不同。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值