简单 JavaScript 游戏的陡峭倾斜体积算法

Question

我正在编写一个简单的 JavaScript 游戏，您在其中寻找页面上的隐藏图像。当您单击它时，图像会出现。每次点击都会播放一段声音。它本质上是马可波罗。当你靠近隐藏的物体时，我希望声音片段的音量变大。我有这个工作，但是距离和体积之间的线性关系很难确定图像的确切位置，所以，我想建立一个关系，当你非常接近时，体积倾斜非常陡峭。类似于y = x^5 的东西。不必一定是x^5，但这就是我的想法。

现在，图像在页面加载时随机放置在页面上，以(imgX, imgY) 为中心。该页面的尺寸为(pageX, pageY)，我在屏幕上单击(clickX, clickY)。

现在，我的想法是，页面上与图像坐标之间的“最大距离”LD（理论上这应该是屏幕上的一个角）。我们可以简单地得到四个角的坐标，然后找到最大的距离，NBD。

音量，从 0 到 1 应该有类似的功能

V = 1 - D

D 是我现在无法确定的关系。

为了获得我目前使用的简单线性关系

D = d / LD

在哪里

d = sqrt((imgX - clickX)^2 + (imgY - clickY)^2)

编辑 只是想我会澄清我的意图：1-d/LD 有效，但是当你靠近时，这会导致音量直线增加。这不是直观清晰，但在实践中，当您获得大约 80%-100% 的音量时，这听起来非常相似，这意味着图像周围的区域对于人耳来说似乎具有相同的音量。当你真正接近时，我想要一个更显着的增长。即，它只能在 3-4% 距离内达到 80% 以上的音量（如果有意义的话）

Answer 1

在我之前的评论之外，这是我认为您需要的可视化。 我刚刚意识到我没有费心重新计算与最远角落的距离——我只是使用了从广场中心到角落的距离。如果到目标的距离超过从正方形中心到角的距离，则可能会在 Y 轴左侧绘制红点。

点击第二个画布重新定位隐藏的目标。移动鼠标将导致计算它到该目标的距离。然后，该值将除以上述最大距离到角落的数字。

最后，这个值将作为衰减函数的 X 坐标。值 [0..1] 将用于驱动生成的音量。 我在代码中留下了一个变量steepnessFactor，以便快速轻松地修改衰减曲线。这个值只是线性距离的幂次方。

function allByClass(clss,parent){return (parent==undefined?document:parent).getElementsByClassName(clss)}
function byId(id){return document.getElementById(id)}

window.addEventListener('load', onDocLoaded, false);

var steepnessFactor = 5;	// inputs [0..1] will be raised to this power
var visSize = 128;	// width/height of the 2 canvases

// click pos and corners of our window
var targetPoint;
var topLeft, topRight, botLeft, botRight;
// initialized to dist from center to (any) corner
var maxDist = (Math.sqrt(2) * visSize) / 2;


function onDocLoaded(evt)
{
	targetPoint = new vec2_t(visSize/2,visSize/2);
	
	topLeft = new vec2_t(0,0);
	topRight = new vec2_t(visSize,0);
	botLeft = new vec2_t(0,visSize);
	botRight = new vec2_t(visSize,visSize);
	
	var can1 = byId('graph');
	var can2 = byId('map');
	
	can1.width = visSize;
	can1.height = visSize;
	
	can2.width = visSize;
	can2.height = visSize;
	
	
	
	byId('map').addEventListener('click', onMapClicked, false);
	byId('map').addEventListener('mousemove', onMapMouseMoved, false);
	drawGraph();
	drawMap(byId('map'));
}

function drawGraph()
{
	var can = byId('graph');
	var ctx = can.getContext('2d');
	
	ctx.clearRect(0,0,can.width,can.height);
	
	// draw the axis lines
	ctx.strokeStyle = "#555555";
	ctx.moveTo(0,can.height/2);
	ctx.lineTo(can.width, can.height/2);
	ctx.moveTo(can.width/2, 0);
	ctx.lineTo(can.width/2, can.height);
	ctx.stroke();
	
	// draw the unit markers (spaced at 0.1 unit intervals)
	var numDivisions = 20;
	for (var x=0; x<can.width; x+= can.width/(numDivisions) )
	{
		ctx.moveTo(x, (can.height/2) - 4 );
		ctx.lineTo(x, (can.height/2) + 4 );
	}
	for (var y=0; y<can.height; y+= can.height/(numDivisions) )
	{
		ctx.moveTo( (can.width/2)-4, y);
		ctx.lineTo( (can.width/2)+4, y);
	}
	ctx.stroke();
	
	var scaleX = 2 / can.width;
	var scaleY = 2 / can.height;
	
	ctx.beginPath();
	ctx.moveTo(0,can.height);
	for (var curX=0; curX<can.width; curX++)
	{
		var scaledX = -1;
		scaledX += curX * scaleX;
	
		var curY = Math.pow( scaledX, steepnessFactor);	// steepness of curve
		curY *= can.height/2;
		
		curY = can.height/2 - curY;
		
		ctx.lineTo(curX, curY);
	}
	ctx.strokeStyle = "#7e6cb5";
	ctx.stroke();
}

function vec2_t(x,y)
{
	this.x=x;
	this.y=y;
	this.equals = function(vec2){this.x = vec2.x; this.y = vec2.y;}
	this.addVec = function(vec2){this.x += vec2.x; this.y += vec2.y;}
	this.scalarMult = function(scalar){this.x *= scalar; this.y *= scalar;}
	this.vecLen = function(){return Math.sqrt( this.x*this.x + this.y*this.y );}
	this.normalize = function(){ let k = 1.0 / this.vecLen(); this.scalarMult(k); }
	this.vecSub = function(vec2){this.x-=vec2.x;this.y-=vec2.y;}
	this.toString = function(){return"<"+this.x+","+this.y+">"}
	return this;
}

function onMapClicked(evt)
{
	targetPoint.x = evt.offsetX;
	targetPoint.y = evt.offsetY;
	drawMap(this);
}

function drawMap(canvasElem)
{
	var ctx = canvasElem.getContext('2d');
	ctx.clearRect(0,0,canvasElem.width,canvasElem.height);
	var radius = 5;
	ctx.beginPath();
	ctx.arc(targetPoint.x, targetPoint.y, radius, 0, 2 * Math.PI, false);
	ctx.fillStyle = 'green';
	ctx.fill();
}

function onMapMouseMoved(evt)
{
	var x = evt.offsetX, y = evt.offsetY;
	
	var curPos = new vec2_t(x, y);
	var curVec = new vec2_t();
	
	curVec.equals( curPos );
	curVec.vecSub( targetPoint );
	var curDist = curVec.vecLen();
	
	var linearDist = (1-(curDist/maxDist));
	
//	console.log("CurDist / MaxDist = " + linearDist );
//	console.log("CurValue = " + Math.pow(linearDist, 5) );
	
	x = linearDist;
	y = Math.pow(linearDist, steepnessFactor);			// steepness of curve
	setVolumeSVG(y * 100);
	
	drawGraph();
	var mapCan = byId('graph');
	var ctx = mapCan.getContext('2d');
	
	var scaleX = mapCan.width / 2;
	var scaleY = -mapCan.height / 2;

	var radius = 5;
	ctx.beginPath();
	ctx.arc(	x*scaleX + mapCan.width/2, 
				y*scaleY + mapCan.height/2, radius, 0, 2 * Math.PI, false);
	ctx.fillStyle = 'red';
	ctx.fill();	
	ctx.beginPath();
}

function setVolumeSVG(percent)
{
	var svg = byId('mSvg');
	var barWidth = (percent/100) * svg.width.baseVal.value;
	var barHeight = (percent/100) * svg.height.baseVal.value;
	
	var msg = "0,"+svg.height.baseVal.value + " " 
			+ barWidth + "," + (svg.height.baseVal.value-barHeight) + " " 
			+ barWidth + "," + svg.height.baseVal.value;
											
	allByClass('barSlider')[0].setAttribute('points', msg);
}

#graph{	border: solid 1px black; }
#map{	border: solid 1px red; }

<canvas width=256 height=256 id='graph'></canvas>
	<canvas width=256 height=256 id='map'></canvas><br>
		<svg id='mSvg' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 100" width=285 height=100>
		<g>
			<polygon class="barFrame" points="0,100 285,100 285,0"></polygon>
			<polygon class='barSlider' points="0,100 143,100 143,50"></polygon>
		</g>
		<style>
			.barFrame{ fill: #d1d3d4; }
			.barSlider{ fill: #69bd45; }
		</style>
	</svg>