Question

现在重复的代码问题已经解决但是在执行时， moveHorse 的if条件函数正在被执行。请帮忙。功能moveHorse（horseId）

）; 间隔= setInterval的（函数（）{moveHorse（ 'horseID'）;}，20）;

现在重复的代码问题已经解决但是在执行时， moveHorse 的if条件函数正在被执行。请帮忙。

Answer 1

由于看起来不同的唯一部分是马被改变，只需将其传入。例如：

var horse4 = document.getElementById('horse4');

function horseUp(horse, moving) {

    var horseTop = horse.offsetTop;
    var random = Math.random() * 2.7 + 2;

    horse.style.top = horseTop - 0.5 * random + 'px';

    if (horseTop <= window.innerHeight * 0.05) {
        clearInterval(interval4);
        interval4 = setInterval(moving, 10);
    }
}

还有一些其他变量，例如interval4，你需要弄清楚，但这应该给你一般的想法。

Answer 2

将元素ID作为函数参数传递，然后您可以将代码重构为 -

// TODO: rename your local variable name because now it doesn't need to be horse4, right?
function horseUp(horseElementId) {
  var horse = document.getElementById(horseElementId);
  // do the rest
}

function horseDown(horseElementId) {
  var horse = document.getElementById(horseElementId);
  // do the rest
}

function horseleft(horseElementId) {
  var horse = document.getElementById(horseElementId);
  // do the rest
}

要使用该功能，请传入元素Id

horseUp('horse4');
horseLeft('horse2');

等等

Answer 3

可以使用OOP：

function Horse(id) {
   this.el = document.getElementById(id);
}

Horse.prototype={
  move(x,y){
    this.el.offsetTop+=(this.y=typeof y !=="undefined"?y:this.y);
    this.el.offsetLeft+=(this.x=typeof x !== "undefined"?x:this.x);
  },
  up(){
    this.move(0,0.5*Math.random() * 2.7 + 2* + 'px';
  },
  down(){ this.move(0,- 0.5* Math.random() * 2.4 + 2);}, 
  left(){ this.move(0.5* Math.random() * 2.4 + 2,0);}, 
  right(){ this.move(- 0.5* Math.random() * 2.4 + 2,0);},
  setInterval(){
    this.interval=setInterval(_=>this.move(),10);
  }
}

像这样使用：

var horse4=new Horse("horse4");
horse4.setInterval();
horse4.left();

我可以使用循环变量或数组来减少我的代码

3 个答案: