- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
我正在编写一个简单的 JavaScript 游戏,您可以在其中寻找页面上隐藏的图像。当你点击它时,图像就会出现。每次点击都会播放一段声音。它本质上是马可波罗。当您靠近隐藏的物体时,我希望声音片段的音量变大。我有这个工作,但是由于距离和体积之间存在线性关系,因此很难准确确定图像的位置,因此,我想建立一种关系,当您非常接近时,体积倾斜度非常陡峭。类似 y = x^5
的内容。不必是 x^5
但这是我的想法。
现在,图像在页面加载时随机放置在页面上,以点 (imgX, imgY)
为中心。该页面的尺寸为 (pageX, pageY)
,我在屏幕上点击了 (clickX, clickY)
。
现在,我的想法是页面上总是有一个距离图像坐标的“最大距离”LD
(理论上这应该是屏幕上的一个 Angular )。我们可以简单地获取四个 Angular 的坐标并找到最大距离 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% 以上的音量(如果这有意义的话)
最佳答案
除了我之前的评论之外,这是我认为您需要的可视化。我刚刚意识到我没有费心重新计算距离最远 Angular 的距离——我只是使用了从正方形中心到 Angular 的距离。这种遗漏是如果到目标的距离超过从正方形中心到 Angular 落的距离,红点可能会绘制在 Y 轴左侧的原因。
点击第二个 Canvas 重新定位隐藏的目标。移动鼠标将计算它到该目标的距离。然后将该值除以上述最大到 Angular 的距离数字。
最后,这个值将作为衰减函数的横坐标。值 [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>
关于javascript - 简单 JavaScript 游戏的陡坡体积算法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40199641/
我正在关注 melon js tutorial .这是在我的 HUD.js 文件的顶部。 game.HUD = game.HUD || {} 我以前在其他例子中见过这个。 namespace.some
我刚刚制作了这个小游戏,用户可以点击。他可以看到他的点击,就像“cookieclicker”一样。 一切正常,除了一件事。 我尝试通过创建一个代码行变量来缩短我的代码,我重复了很多次。 documen
在此视频中:http://www.youtube.com/watch?v=BES9EKK4Aw4 Notch(我的世界的创造者)正在做他称之为“实时调试”的事情。他实际上是一边修改代码一边玩游戏,而不
两年前,我使用C#基于MonoGame编写了一款《俄罗斯方块》游戏,相关介绍可以参考【这篇文章】。最近,使用业余时间将之前的基于MonoGame的游戏开发框架重构了一下,于是,也就趁此机会将之前的《俄
1.题目 你和你的朋友,两个人一起玩 Nim 游戏: 桌子上有一堆石头。 你们轮流进行自己的回合, 你作为先手 。 每一回合,轮到的人拿掉 1 - 3 块石头。 拿掉最后一块石头的人就是获胜者。 假设
我正在创建平台游戏,有红色方 block (他们应该杀了我)和白色方 block (平台) 当我死时,我应该在当前级别的开始处复活。 我做了碰撞检测,但它只有在我移动时才有效(当我跳到红色方 bloc
因此,我正在处理(编程语言)中创建游戏突破,但无法弄清楚检查与 bat 碰撞的功能。 到目前为止,我写的关于与球棒碰撞的部分只是将球与底座碰撞并以相反的方向返回。目前,游戏是一种永无止境的现象,球只是
我试图让我的敌人射击我的玩家,但由于某种原因,子弹没有显示,也没有向玩家射击我什至不知道为什么,我什至在我的 window 上画了子弹 VIDEO bulls = [] runninggame = T
我正在尝试添加一个乒乓游戏框架。我希望每次球与 Racket 接触时球的大小都会增加。 这是我的尝试。第一 block 代码是我认为问题所在的地方。第二 block 是全类。 public class
我想知道 3D 游戏引擎编程通常需要什么样的数学?任何特定的数学(如向量几何)或计算算法(如快速傅立叶变换),或者这一切都被 DirectX/OpenGL 抽象掉了,所以不再需要高度复杂的数学? 最佳
我正在为自己的类(class)做一个霸气游戏,我一直在尝试通过添加许多void函数来做一些新的事情,但由于某种奇怪的原因,我的开发板无法正常工作,因为它说标识符“board”未定义,但是我有到目前为止
我在使用 mousePressed 和 mouseDragged 事件时遇到了一些问题。我正在尝试创建一款太空射击游戏,我希望玩家能够通过按下并移动鼠标来射击。我认为最大的问题是 mouseDragg
你好,我正在尝试基于概率实现战斗和准确性。这是我的代码,但效果不太好。 public String setAttackedPartOfBodyPercent(String probability) {
所以我必须实现纸牌游戏 war 。我一切都很顺利,除了当循环达到其中一张牌(数组列表)的大小时停止之外。我想要它做的是循环,直到其中一张牌是空的。并指导我如何做到这一点?我知道我的代码可以缩短,但我现
我正在做一个正交平铺 map Java 游戏,当我的船移动到 x 和 y 边界时,按方向键,它会停止移动(按预期),但如果我继续按该键,我的角色就会离开屏幕. 这是我正在使用的代码: @O
这里是 Ship、Asteroids、BaseShapeClass 类的完整代码。 Ship Class 的形状继承自 BaseShapeClass。 Asteroid类是主要的源代码,它声明了Gra
我正在开发这个随机数猜测游戏。在游戏结束时,我希望用户可以选择再次玩(或让其他人玩)。我发现了几个类似的线程和问题,但没有一个能够帮助我解决这个小问题。我很确定我可以以某种方式使用我的 while 循
我认为作为一个挑战,我应该编写一个基于 javascript 的游戏。我想要声音、图像和输入。模拟屏幕的背景(例如 640x480,其中包含我的所有图像)对于将页面的其余部分与“游戏”分开非常有用。我
我正在制作一个游戏,我将图标放在网格的节点中,并且我正在使用这个结构: typedef struct node{ int x,y; //coordinates for graphics.h
我正在研究我的游戏技能(主要是阵列)来生成敌人,现在子弹来击倒他们。我能够在测试时设置项目符号,但只有当我按下一个键(比方说空格键)并且中间没有间隔时才可见,所以浏览器无法一次接受那么多。 有没有什么
我是一名优秀的程序员,十分优秀!