如何在不使用jQuery的情况下检测鼠标是否在画布上的对象上方？

Question

I'm trying to make a small 2d hockey game where the player selects the puck and shoots it. 我正在尝试制作一个小型2D曲棍球游戏，玩家在其中选择冰球并射击。 At the moment my code allows the player to select the puck from anywhere on the page, but ideally I would like to do it so that it's only possible to select the puck If the player clicks on top of it. 目前，我的代码允许玩家从页面上的任意位置选择冰球，但理想情况下，我想这样做，以便只有在玩家单击冰球时才可以选择冰球。

Here's the part that at the moment takes control of the puck: 这是目前控制冰球的部分：

document.addEventListener("mousedown", mouseDownHandler, false);
// For mousecontrols

// When user clicks, the puck starts following the cursor
function mouseDownHandler(e) {

document.addEventListener("mousemove", mousemoveHandler, false);
document.addEventListener("mouseup", mouseUpHandler, false);
function mousemoveHandler(e) {
var relativeX = e.clientX - canvas.offsetLeft;
var relativeY = e.clientY - canvas.offsetTop;
if (relativeX > 0 && relativeX < canvas.width) {
  x = relativeX - 18 / 2;
} if (relativeY > 0 && relativeY < canvas.height) {
  y = relativeY - 20 / 2;
}
}
function mouseUpHandler(e) {
dx = -dx + 0;
dy = -dy - 0;
x += 0;
y += 0;
document.removeEventListener("mousemove", mousemoveHandler,     false);
}
}

Here's also a JSfiddle . 这也是JSfiddle 。

Thank you very much! 非常感谢你！

Answer 1

The puck here can be dragged around and "thrown" around the canvas. 可以将此处的冰球拖到画布上并“扔”在画布上。

 <!doctype html> <html> <head> <meta charset="utf-8"> <style> body { background-color: black; } canvas { display: block; margin: auto; border: solid 1px white; border-radius: 10px; } </style> </head> <body> <canvas id="canvas"></canvas> <script type="application/javascript"> void function() { "use strict"; // Variables var canvasWidth = 180; var canvasHeight = 160; var canvas = null; var ctx = null; var puck = null; var lastPuckPosition = {x: 0.0,y: 0.0}; var isPuckGettingDragged = false; // Classes function Puck(x,y) { this.x = x; this.y = y; this.dx = 0.0; this.dy = 0.0; } Puck.prototype = { RADIUS: 10.0, MAX_SPEED: 5.0, DAMPENING: 0.98, EPSILON: 0.1, // A point is inside a circle if // the distance from that point to the circle's center // is less than it's radius isIntersecting: function(x,y) { var distance = Math.sqrt(Math.pow(this.x - x,2.0) + Math.pow(this.y - y,2.0)); return distance < this.RADIUS; }, tick: function() { // Bounce off boundaries if (this.x < this.RADIUS) { this.x = this.RADIUS; this.dx = -this.dx; } if (this.x > canvasWidth - this.RADIUS) { this.x = canvasWidth - this.RADIUS; this.dx = -this.dx; } if (this.y < this.RADIUS) { this.y = this.RADIUS; this.dy = -this.dy; } if (this.y > canvasHeight - this.RADIUS) { this.y = canvasHeight - this.RADIUS; this.dy = -this.dy; } // Slow the puck down this.dx = this.dx * this.DAMPENING; this.dy = this.dy * this.DAMPENING; if (this.dx > -this.EPSILON && this.dx < this.EPSILON) { this.dx = 0.0; } if (this.dy > -this.EPSILON && this.dy < this.EPSILON) { this.dy = 0.0; } this.x += this.dx; this.y += this.dy; }, render: function() { ctx.fillStyle = "darkred"; ctx.strokeStyle = "black"; ctx.beginPath(); ctx.arc(this.x,this.y,this.RADIUS,0.0,2.0 * Math.PI,false); ctx.fill(); ctx.stroke(); } }; // Functions function onMouseDown(e) { var bounds = canvas.getBoundingClientRect(); var x = e.clientX - bounds.left; var y = e.clientY - bounds.top; if (puck.isIntersecting(x,y)) { isPuckGettingDragged = true; puck.x = x; puck.y = y; puck.dx = 0.0; puck.dy = 0.0; lastPuckPosition.x = x; lastPuckPosition.y = y; } } function onMouseMove(e) { if (isPuckGettingDragged) { var bounds = canvas.getBoundingClientRect(); var x = e.clientX - bounds.left; var y = e.clientY - bounds.top; lastPuckPosition.x = puck.x; lastPuckPosition.y = puck.y; puck.x = x; puck.y = y; } } function onMouseUp(e) { if (isPuckGettingDragged) { isPuckGettingDragged = false; puck.dx = puck.x - lastPuckPosition.x; puck.dy = puck.y - lastPuckPosition.y; var magnitude = Math.sqrt(puck.dx * puck.dx + puck.dy * puck.dy); if (magnitude > puck.MAX_SPEED) { var newMagnitude = (1.0 / magnitude) * puck.MAX_SPEED; puck.dx = puck.dx * newMagnitude; puck.dy = puck.dy * newMagnitude; } } } function loop() { // Tick (Update game logic) puck.tick(); // Render ctx.fillStyle = "gray"; ctx.fillRect(0,0,canvasWidth,canvasHeight); puck.render(); // requestAnimationFrame(loop); } // Entry Point (Runs when the page loads) onload = function() { canvas = document.getElementById("canvas"); canvas.width = canvasWidth; canvas.height = canvasHeight; canvas.onmousedown = onMouseDown; canvas.onmouseup = onMouseUp; canvas.onmousemove = onMouseMove; ctx = canvas.getContext("2d"); puck = new Puck(canvasWidth >> 1,canvasHeight >> 1); loop(); } }(); </script> </body> </html>

如何在不使用jQuery的情况下检测鼠标是否在画布上的对象上方？

问题描述

1 个解决方案

解决方案1
0 2018-08-23 09:21:10

如何在不使用jQuery的情况下检测鼠标是否在画布上的对象上方？

问题描述

1 个解决方案

解决方案1 0 2018-08-23 09:21:10

解决方案1
0 2018-08-23 09:21:10