javascript - 间隔上的javascript转换不起作用

Question

基本上试图创建一个游戏，其中用户必须单击位于页面顶部的特定单词，我需要编程 4 个按钮 html 元素以在 div 容器内反弹但是，我的 html 转换间隔是不工作。

var upperLimitY = 360;
var lowerLimitY = 0;
var upperLimitX = 520;
var lowerLimitX = 0;
var upperVelocity = 10;
var lowerVelocity = 2;
var velocity = 5;

var wordStore = document.getElementsByClassName("word1")[0];


function startGame() {
  setInterval(moveWord, 10);
}


function moveWord() {

  if (lowerLimitX < wordStore.style.transform.x < upperLimitX && lowerLimitY <
    wordStore.style.transform.y < upperLimitY) {

    wordStore.style.transform = "translate(" + velocity + "px ," + velocity + ")";
    velocity += velocity;
  } else {
    velocity *= -1;
  }
};

<div class="wordGameContainerHeader">
  <h1>Word Wizard</h1>
  <h4>WORD TO FIND</h4>
</div>

<div class="wordGameContainer">
  <button class="word1">WORD 1</button>
  <button class="word2">WORD 2</button>
  <button class="word3">WORD 3</button>
  <button class="word4">WORD 4</button>
</div>

<div>
  <button onclick="startGame()" class="playButton">PLAY</button>
</div>

按钮嵌入在大小为 600 像素 x 300 像素的 div 中，元素的宽度为 80 像素，高度为 40 像素，因此这就是为什么我将上限 x 设置为 600 像素 - 80 像素，反之亦然。正在测试代码的按钮根本没有移动。

标签： javascripthtmlcss

Answer 1

语法问题：

• style.transform没有子属性（x 和 y）。

您必须使用拆分或正则表达式自己解析它。

• translate 的 y 部分有一个px缺失，使其无效

wordStore.style.transform = "translate(" + velocity + "px ," + velocity + "px)";

• 链式条件逻辑(x < y < z)在 javascript 中无效

x < y && y < z

逻辑问题：

• 使用您当前的逻辑，按钮将在相同的预定义行上反弹
• 一旦按钮超出范围，您的动作就会停止，因为您在反转后从未向实际位置添加任何值velocity
• 您会使用classlike an id，这很好但很愚蠢

根据您的代码评论示例：

注意：以全页模式运行

var upperVelocity = 10;
var lowerVelocity = 2;
//var velocity = 5; //REM: Dropped to bring some random dynamic into it
var speed = 25; //REM: Interval-Timeout
var bounds = null;

//REM: Calculating the bounds according to the bounds of .wordGameContainer
//var upperLimitY = 360;
//var lowerLimitY = 0;
//var upperLimitX = 520;
//var lowerLimitX = 0;

//REM: Not required, since there is only one "word1"
//var wordStore = document.getElementsByClassName("word1")[0];

function startGame(){
  //REM: Calculating the bounds
  bounds = document.querySelector(".wordGameContainer").getBoundingClientRect();

  //REM: Getting all .words
  var tListOfWords = document.getElementsByClassName("word");
  for(var i=0, j=tListOfWords.length; i<j; i++){
    //REM: Clearing the current timeout, else speeds up on pressing again
    clearInterval(tListOfWords[i].dataset.Interval);
  
    //REM: x and y require different directions, else they just keep bouncing back and forth diagonally
    tListOfWords[i].dataset.Direction = JSON.stringify({x: 1, y: 1});
  
    //REM: Storing the return of setInterval() to clear it eventually
    //REM: Binding the element instead, so that moveWord() can be used for all words the same
    tListOfWords[i].dataset.Interval = setInterval(moveWord.bind(null, tListOfWords[i]), speed);
    
    //REM: Adding event to stop the movement
    //REM: Using onmouseup to omit keyboard input (tab + enter)
    tListOfWords[i].onmouseup = function(){
      clearInterval(this.dataset.Interval);
      alert(this.id)
    }
  }
};

//REM: The .word not gets passed as parameter "element"
function moveWord(element){
  //REM: style.transform has no sub properties
  //REM: Using getBoundingClientRect() so the buttons entirely stay inside the box
  var tPosition = element.getBoundingClientRect(),
      tDirection = JSON.parse(element.dataset.Direction);

  //REM Calculate the movement according to upperVelocity and lowerVelocity
  //REM: Using different velocities for x, y to make less predictable and more dynamic
  var tMovementX = Math.floor(Math.random() * (upperVelocity - lowerVelocity) + lowerVelocity),
      tMovementY = Math.floor(Math.random() * (upperVelocity - lowerVelocity) + lowerVelocity);

  //REM: Adding the direction of the element
  tMovementX *= tDirection.x;
  tMovementY *= tDirection.y;

  //REM: Checking x
  if(
    (tPosition.left + tMovementX) <= bounds.left || 
    (tPosition.right + tMovementX) >= bounds.right
  ){
    tDirection.x *= -1;
    tMovementX *= -1;
    
    //REM: Storing the changed direction
    element.dataset.Direction = JSON.stringify(tDirection)
  };
  
  //REM: Checking y
  if(
    (tPosition.top + tMovementY) <= bounds.top ||
    (tPosition.bottom + tMovementY) >= bounds.bottom
  ){
    tDirection.y *= -1;
    tMovementY *= -1;
    
    //REM: Storing the changed direction
    element.dataset.Direction = JSON.stringify(tDirection)
  };

  //REM: Getting the actual left/top assigned to the style
  //REM: Note that those are not the same values as tPosition.
  var tLeftInsideParent = (parseFloat(element.style.left) || 0),
      tTopInsideParent = (parseFloat(element.style.top) || 0);

  element.style.left = tLeftInsideParent + tMovementX + "px";
  element.style.top = tTopInsideParent + tMovementY + "px"
};

//REM: Adjusting the bounds on scrolling and resizing
window.onscroll = window.onresize = function(){
  //REM: Calculating the bounds
  bounds = document.querySelector(".wordGameContainer").getBoundingClientRect()
};

.word{
  position: relative
}

.wordGameContainer{
  background: #1390ff;
  height: 150px;
  width: 400px;
}

<div class="wordGameContainerHeader">
  <h1>Word Wizard</h1>
  <h4>WORD TO FIND</h4>
</div>

<div>
  <button onclick="startGame()" class="playButton">PLAY</button>
</div>

<div class="wordGameContainer">
  <!--REM: Why is the "class" used like an "id"? -->
  <button id="word1" class="word">WORD 1</button>
  <button id="word2" class="word">WORD 2</button>
  <button id="word3" class="word">WORD 3</button>
  <button id="word4" class="word">WORD 4</button>
</div>

Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling..