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，以便快速轻松地修改衰减曲线。这个值就是将线性距离提升到幂的值。

＆＃13;

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);
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: