Question

基本上我已经设法用这些代码随机化了2个变量的值：

function getRandomPosition()
{
var xx = document.body.clientWidth;
var yy = document.body.clientHeight;
var randomY = Math.floor(Math.random()*yy);
var randomX = Math.floor(Math.random()*xx);
}

这很好用。接下来，我使用这个随机坐标随机制作了一个图像。

function randomly()
{
var yx = getRandomPosition(img);
img.style.top = yx[0];
img.style.left = yx[1];
return[yx];
}

接下来我想要不断监控鼠标的位置和图像的位置。

function plswork()
{
var yxx=getRandomPosition();
if((event.clientX < yxx[1]-210)||event.clientX>yxx[1]+340) //only comparing the x axis~~ etcetc
{ //play an audio track
}
}

document.onmousemove= plswork;//when mouse move, run that function.

但是，我现在遇到的问题是，一旦移动鼠标，图像就会产生。如果我调用getRandomPosition（）;它会自动运行，给我一组不同的数字来检查鼠标。谁能给我建议？或者帮助谢谢

我的目标是检查鼠标位置并将其与图像产生的随机位置进行比较。函数中的'yx'随机（）告诉我图像产生的位置的坐标。所以带来这个函数我必须返回它，但是当我在函数plswork（）中执行此操作时，每当我移动鼠标时，它将调用并执行整个函数随机生成图像...但是，如果我调用函数getRandomPosition（）替换函数plswork（）中的var yx，我随机地比较函数中'yx'的一组不同坐标。（

Answer 1

不确定你到底想要做什么，但我会尽力帮忙。首先，在random（）之外声明图像位置yx，以便在plswork（）中访问它

function getRandomPosition(){...}

var yx = null;
function randomly()
{
  yx = getRandomPosition();
  img.style.top = yx[0];
  img.style.left = yx[1];
}

function plswork()
{
  if((event.clientX < yx[1]-210)||event.clientX>yx[1]+340)
  { //play an audio track
  }
}
document.onmousemove= plswork;//when mouse move, run that function.

Answer 2

您的Javascript中缺少许多基本内容：函数getRandomPosition()仅声明局部变量，并且不会为程序的其他部分返回任何值;使用参数getRandomPosition()调用函数img，但getRandomPosition()没有参数; CSS样式top和width设置为不带“px”;你再次打电话给getRandomPosition()，期望获得相同的价值，而不是第一次存储......

无论如何，这是一个脚本的快速示例，该脚本将图像放置在随机位置，然后在鼠标离图像一定距离内时执行某些操作（在这种情况下：移动图像）。好好看看并检查与原始脚本的差异。

我使用doStuff.pos作为在函数pos中存储静态变量doStuff()的方法;这样，变量在重复调用函数之间保持其值。（其他人可能更喜欢使用在函数外声明的全局变量。）

function getRandomPosition() {
    var maxX = document.body.clientWidth - 32;
    var maxY = document.body.clientHeight - 32;
    var rndX = Math.floor(Math.random() * maxX);
    var rndY = Math.floor(Math.random() * maxY);
    return {x: rndX, y: rndY};
}
function randomizeImage() {
    var pos = getRandomPosition();
    var img = document.getElementById("image");
    img.style.left = pos.x + "px";
    img.style.top = pos.y + "px";
    return pos;
}
function doStuff() {
    if (!event) doStuff.pos = randomizeImage();
    else if (event.clientX < doStuff.pos.x + 96 
          && event.clientX > doStuff.pos.x - 64
          && event.clientY < doStuff.pos.y + 96
          && event.clientY > doStuff.pos.y - 64) {
        doStuff.pos = randomizeImage(); // or do other stuff here
    }
}
doStuff(); // call first time without event
document.addEventListener("mousemove", doStuff)

BODY {min-height: 218px; margin: 0; border: 1px solid #CCC;}
IMG {position: relative; width: 32px; height: 32px;}

<img id="image" src="https://www.gravatar.com/avatar/ebdcdc75fd352485e37d13c2d7526372?s=32&d=identicon&r=PG&f=1" />

或者，如果您不介意使用全局变量：

var posX, posY; // global variables

function getRandomPosition() {
    var maxX = document.body.clientWidth - 32;
    var maxY = document.body.clientHeight - 32;
    posX = Math.floor(Math.random() * maxX);
    posY = Math.floor(Math.random() * maxY);
}
function randomizeImage() {
    getRandomPosition();
    var img = document.getElementById("image");
    img.style.left = posX + "px";
    img.style.top = posY + "px";
}
function doStuff() {
    if (event.clientX < posX + 96 
    &&  event.clientX > posX - 64
    &&  event.clientY < posY + 96
    &&  event.clientY > posY - 64) {
        randomizeImage(); // or do other stuff here
    }
}
randomizeImage(); // initialize position
document.addEventListener("mousemove", doStuff)

BODY {min-height: 218px; margin: 0; border: 1px solid #CCC;}
IMG {position: relative; width: 32px; height: 32px;}

<img id="image" src="https://www.gravatar.com/avatar/ebdcdc75fd352485e37d13c2d7526372?s=32&d=identicon&r=PG&f=1" />

你也可以使用闭包，但它们解释和理解起来并不那么简单。基本上，函数doStuff()在函数randomizeImage()中定义，因此它可以访问randomizeImage()中声明的变量。有关详细信息，请查看this question。

function randomizeImage() {
    var img = document.getElementById("image");
    var maxX = document.body.clientWidth - 32;
    var maxY = document.body.clientHeight - 32;
    var posX = Math.floor(Math.random() * maxX);
    var posY = Math.floor(Math.random() * maxY);
    img.style.left = posX + "px";
    img.style.top = posY + "px";

    function doStuff() {
        if (event.clientX < posX + 96 && event.clientX > posX - 64
        &&  event.clientY < posY + 96 && event.clientY > posY - 64) {
            img.classList.add("mousenear");
        } else {
            img.classList.remove("mousenear");
        }
    }
    return doStuff;
}

var myFunc = randomizeImage();                  // randomizeImage() returns doStuff()
document.addEventListener("mousemove", myFunc); // so doStuff() is called

BODY {min-height: 218px; margin: 0; border: 1px solid #CCC;}
IMG {position: relative; width: 32px; height: 32px;}
.mousenear {-webkit-transform: rotate(45deg); transform: rotate(45deg);}

<img id="image" src="https://www.gravatar.com/avatar/ebdcdc75fd352485e37d13c2d7526372?s=32&d=identicon&r=PG&f=1" />

返回随机变量数据javascript

2 个答案: