如何在不使用jQuery的情况下检测鼠标是否在画布上的对象上方？
[英]How to detect if the mouse is over an object inside the canvas without using jquery?
问题描述
我正在尝试制作一个小型2D曲棍球游戏，玩家在其中选择冰球并射击。 目前，我的代码允许玩家从页面上的任意位置选择冰球，但理想情况下，我想这样做，以便只有在玩家单击冰球时才可以选择冰球。
这是目前控制冰球的部分：
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);
}
}
这也是JSfiddle 。
非常感谢你！
1 个解决方案
解决方案1
0 2018-08-23 09:21:10
可以将此处的冰球拖到画布上并“扔”在画布上。
<!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 或 Javascript 中的项目上
[英]How to detect if mouse is over an item in jQuery or Javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.