Question

我正在尝试制作一个小型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。

非常感谢您！

Answer 1

这里的冰球可以在画布上拖动并“扔”在画布上。

<!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 个答案: