为什么我的mouseup执行很多次，而且计时器清不掉

樊一翻 2017-08-15 07:32:33

...全文

310 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2017-08-15

打赏
举报


 <style>
        * {
            margin: 0 auto;
            padding: 0;
        }

        canvas {
            margin-top: 80px;
            width: 1000px;
            height: 500px;
            box-shadow: 0 0 5px #222;
            display: block;
        }
    </style>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            var cav = $("#cav");
            var ctx = cav[0].getContext("2d");
            var mx = Math.floor(Math.random() * 500) + 500;
            var my = Math.floor(Math.random() * 500);
            //速度
            var vx = 0, vy = 0;
            ctx.lineWidth = 2
            //绘制弹弓和小鸟
            var dx = 150, dy = 100, x0 = 150, y0 = 100;
            function hiuzhi(x, y) {
                ctx.strokeStyle = "#f00";
                //绘制弹弓
                ctx.beginPath();
                ctx.moveTo(150, 500);
                ctx.lineTo(150, 200);
                ctx.lineTo(100, 100);
                ctx.lineTo(150, 200);
                ctx.lineTo(200, 100);
                ctx.stroke();
                ctx.closePath()
                //绘制鸟
                ctx.beginPath();
                ctx.strokeStyle = "#00f"
                ctx.lineWidth = 5;
                ctx.arc(x, y, 5, 1.6, Math.PI / 2, false)
                ctx.stroke();
                ctx.closePath()
            }
            //绘制目标
            function hzmb(x, y) {
                ctx.beginPath()
                ctx.strokeStyle = "#a72"
                ctx.strokeRect(x, y, 20, 20)
                ctx.fill()
            }
            function hzx(dx, dy) {
                //绘制弹弓线
                ctx.beginPath()
                ctx.strokeStyle = "#000"
                ctx.moveTo(dx, dy)
                ctx.lineTo(200, 100)
                ctx.lineTo(dx, dy)
                ctx.lineTo(100, 100)
                ctx.stroke()
            }
            hiuzhi(dx, dy);
            hzx(dx, dy)
            hzmb(mx, my)
            var moveFlag = false;
            cav.on("mousedown", function (e) {
                var x = e.offsetX;
                var y = e.offsetY;
                if (x > x0 - 10 && x < x0 + 10 && y > y0 - 10 && y < y0 + 10) {
	                moveFlag = true;
                }
            })
            cav.on("mousemove", function (ev) {
	            if (!moveFlag) return;
                ctx.clearRect(0, 0, 1000, 500)
                hiuzhi(dx, dy);
                hzx(dx, dy)
                hzmb(mx, my)
                dx = ev.offsetX;
                dy = ev.offsetY;
            })
            cav.on("mouseup", function () {
	            if (!moveFlag) return;
	             moveFlag = false;
                alert(123)
                vx = (x0 - dx) / 80;
                vy = (y0 - dy) / 100;
                var vy0 = vy;
                var t = 0;
                var timers = setInterval(function () {
                    t = t + 0.1;
                    vy = vy0 + 0.8 * t
                    ctx.clearRect(0, 0, 1000, 500)
                    hiuzhi(dx, dy);
                    hzmb(mx, my)
                    dx = dx + vx * t;
                    dy = dy + t * (vy0 + vy) / 2;
                    if (dx > mx - 10 && dx < mx + 15 && dy < my + 10 && dy > my - 15) {
                        alert("命中")
                        clearInterval(timers);
                    }
                    if (dx > 1000 || dy > 500 || dx < 0 || dy < -1200) {
                        clearInterval(timers);
                        hiuzhi(x0, y0);
                        hzx(x0, y0);
                        hzmb(mx, my);
                        dx = x0, dy = y0;
                    }
                }, 100)
            })
        })
    </script>
</head>
<body>
<canvas id="cav" width="1000" height="500"></canvas>
</body>
</html>

在VB（Visual Basic）编程环境中，"vb 焊操作Idle"是指监控应用程序的状态，以检测用户是否有鼠标或键盘活动。这个概念常用于实现自动化的...这种方法在很多场景下都非常实用，比如创建节能的应用程序或提高用户体验。

在喷枪窗体特效中，计时器被设置为在鼠标按下后开始运行。每当计时器的`Timer`事件触发时，就会在窗体上添加一个新的点，模拟喷枪的效果。 3. **绘图操作**：在VB中，我们可以利用窗体的`OnPaint`事件和`Graphics`...

在`KeyDown`事件中，检查按下的是哪个键，如果是设定的热键，则不执行后续操作。 5. **用户界面设计**：用户界面（UI）应包含设置点击类型（左键/右键）、设置点击间隔时间以及开启/关闭连点等功能的控件，如组合...

"bug挺多的"表明开发者在编程过程中可能遇到了一些错误或未预期的行为，这在初学者的项目中是很常见的，但不影响基本功能的执行。在VB中创建拼图游戏，开发者可能会使用以下技术： 1. 图片处理：首先，需要加载...

要实现长按效果，首先需要监听mousedown事件，开始计时，然后在mouseup事件中检查计时器，如果时间超过了预设值（例如300毫秒），则执行画中画展示的代码。同时，为了防止多次触发，可能还需要添加一些额外的逻辑，...