当前位置：文江博客话题详情

js怎么做捕鱼达人的子弹

发布于 2022-09-07 04:03:05 字数 32 浏览 8 评论 0

让子弹根据鼠标点击的方向发射出去，跟捕鱼达人的一样

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

女中豪杰 2022-09-14 04:03:05

一、两个步骤：
1.获取鼠标点击的坐标；
2.将子弹移动到第1步得到的坐标。

二、完整代码：
依赖jQuery的animate动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
            position: relative;
        }

        #dot {
            background: #000;
            height: 20px;
            width: 20px;
            border-radius: 50%;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="dot"></div>
    </div>
    <script src="jquery-1.9.1.min.js"></script>
    <script>
        function getMousePos(event) {
            var e = event || window.event;
            return { 'left': e.clientX, 'top': e.clientY }
        }
        $("#container").on("click", function (event) {
            var xy = getMousePos(event);
            $("#dot").animate(xy);
        })
    </script>
</body>

</html>

回复收藏 0