Прослушиватель событий только слушает две фигуры на экране в Javascript и HTML Canvas - PullRequest
Новая
       12

Прослушиватель событий только слушает две фигуры на экране в Javascript и HTML Canvas

0 голосов
/ 26 августа 2018

У меня возникла проблема с моей программой, которая по существу перемещает 100 цифр в окне браузера и меняет их направление, если пользователь нажимает клавишу.Чтобы определить, нажал ли пользователь клавишу, я использовал прослушиватель событий, но проблема в том, что прослушиватель событий работает только для двух фигур на экране.Я могу только изменить направление двух цифр, в то время как другие фигуры продолжают перемещаться по экрану и не реагируют на ввод пользователя.Я приложил весь свой код ниже, и я был бы очень признателен, если бы кто-нибудь помог мне разобраться в проблеме!Спасибо! 

let canvas = document.querySelector("canvas")

canvas.width = window.innerWidth
canvas.height = window.innerHeight

// console.log(innerWidth)
// console.log(innerHeight)

let c = canvas.getContext("2d")
let changeDirection = undefined
let repeatone = 0
let repeattwo = 0

window.addEventListener('keydown', function(event) {
  repeatone = 0
  repeattwo = 0
  changeDirection = true
  console.log(changeDirection)
})

window.addEventListener('keyup', function(event) {
  changeDirection = false
  console.log(changeDirection);
})


function random_rgba() {
  var o = Math.round,
    r = Math.random,
    s = 255;
  return 'rgba(' + o(r() * s) + ',' + o(r() * s) + ',' + o(r() * s) + ',' + r().toFixed(1) + ')';
}

// c.arc(xCircle, yCircle, radius, 0, Math.PI * 2, false)
function Circle(x, y, dx, dy, radius, color) {
  this.x = x
  this.y = y
  this.dx = dx
  this.dy = dy
  this.radius = radius
  this.color = color

  this.draw = function() {
    // c.strokeStyle = this.color
    c.beginPath()
    c.strokeStyle = this.color
    c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
    c.stroke()
  }

  this.update = function() {
    repeatone += 1
    if (changeDirection === true && repeatone <= 1) {
      this.dx = -this.dx
      this.dy = -this.dy
      if (this.x >= innerWidth - this.radius) {
        this.dx = -this.dx
      } else if (this.x <= 0) {
        this.dx = -this.dx
      }
      if (this.y >= innerHeight - this.radius) {
        this.dy = -this.dy
      } else if (this.y <= 0) {
        this.dy = -this.dy
      }

      this.x += this.dx
      this.y += this.dy

      this.draw()
    } else if (changeDirection === false || repeatone > 1) {
      if (this.x >= innerWidth - this.radius) {
        this.dx = -this.dx
      } else if (this.x <= 0) {
        this.dx = -this.dx
      }
      if (this.y >= innerHeight - this.radius) {
        this.dy = -this.dy
      } else if (this.y <= 0) {
        this.dy = -this.dy
      }

      this.x += this.dx
      this.y += this.dy

      this.draw()
    }
  }
}



function Rectangle(x, y, dx, dy, height, width, color) {
  this.x = x
  this.y = y
  this.dx = dx
  this.dy = dy
  this.height = height
  this.width = width
  this.color = color

  this.draw = function() {
    c.beginPath()
    c.fillStyle = this.color
    c.fillRect(this.x, this.y, this.width, this.height)
  }

  this.update = function() {
    repeattwo += 1
    if (changeDirection === true && repeattwo <= 1) {
      this.dx = -this.dx
      this.dy = -this.dy
      if (this.x >= innerWidth - this.width) {
        this.dx = -this.dx
      } else if (this.x <= 0) {
        this.dx = -this.dx
      }
      if (this.y >= innerHeight - this.height) {
        this.dy = -this.dy
      } else if (this.y <= 0) {
        this.dy = -this.dy
      }

      this.x += this.dx
      this.y += this.dy

      this.draw()
    } else if (changeDirection === false || repeattwo > 1) {
      if (this.x >= innerWidth - this.width) {
        this.dx = -this.dx
      } else if (this.x <= 0) {
        this.dx = -this.dx
      }
      if (this.y >= innerHeight - this.height) {
        this.dy = -this.dy
      } else if (this.y <= 0) {
        this.dy = -this.dy
      }

      this.x += this.dx
      this.y += this.dy

      this.draw()
    }
  }
}

// let x = Math.floor((Math.random() * innerWidth) + 1)
// let dx = Math.floor((Math.random() * 10) + 1)
// let y = Math.floor((Math.random() * innerHeight) + 1)
// let dy = Math.floor((Math.random() * 10) + 1)
//
// console.log("X Value " + x)
// console.log("Y Value " + y)
// console.log("X Velocity Value " + dx)
// console.log("Y Velocity Value " + dy)
//

let rectangleArray = []
let circleArray = []


for (var i = 0; i < 50; i++) {
  let xRect = Math.floor((Math.random() * innerWidth) + 1)
  let dxRect = Math.floor((Math.random() * 10) + 1)
  let yRect = Math.floor((Math.random() * innerHeight) + 1)
  let dyRect = Math.floor((Math.random() * 10) + 1)
  let heightRect = Math.floor((Math.random() * 250) + 1)
  let widthRect = Math.floor((Math.random() * 250) + 1)
  let colorRect = random_rgba()
  let xCircle = Math.floor((Math.random() * innerWidth) + 1)
  let dxCircle = Math.floor((Math.random() * 10) + 1)
  let yCircle = Math.floor((Math.random() * innerHeight) + 1)
  let dyCircle = Math.floor((Math.random() * 10) + 1)
  let heightCircle = Math.floor((Math.random() * 250) + 1)
  let widthCircle = Math.floor((Math.random() * 250) + 1)
  let colorCircle = random_rgba()
  let radiusCircle = Math.floor((Math.random() * 100) + 1)
  rectangleArray.push(new Rectangle(xRect, yRect, dxRect, dyRect, heightRect, widthRect, colorRect))
  circleArray.push(new Circle(xCircle, yCircle, dxCircle, dyCircle, radiusCircle, colorCircle))
}

console.log(circleArray)
console.log(rectangleArray)

function animate() {
  requestAnimationFrame(animate)
  c.clearRect(0, 0, innerWidth, innerHeight)

  for (var i = 0; i < rectangleArray.length; i++) {
    rectangleArray[i].draw()
    rectangleArray[i].update()
  }

  for (var i = 0; i < circleArray.length; i++) {
    circleArray[i].draw()
    circleArray[i].update()
  }

}

animate()
<canvas></canvas>

1 Ответ

0 голосов
/ 26 августа 2018

У вас было много кода, я его удаляю ...
Взгляните на новую логику в addEventListener

Устранение неполадок, подобных этому, первое, что я делаю, это уменьшаюscope:

  • у вас было 100 фигур, я уменьшил их до 6
  • ваша анимация была слишком быстрой, я уменьшил скорость.
  • много случайных вещей накод, который создал цифры, я жестко закодировал некоторые из них.
  • у вас было changeDirection, repeatone & repeattwo, я не мог понять, для чего они вам нужны, поэтому я их удаляю. 

let canvas = document.querySelector("canvas")
canvas.width = canvas.height = innerWidth = innerHeight = 300
let c = canvas.getContext("2d")

window.addEventListener('keydown', function(event) {
  for (var i = 0; i < rectangleArray.length; i++) {
    rectangleArray[i].dx *= -1
    rectangleArray[i].dy *= -1
  }
  for (var i = 0; i < circleArray.length; i++) {
    circleArray[i].dx *= -1
    circleArray[i].dy *= -1
  }
})


function random_rgba() {
  var o = Math.round,
    r = Math.random,
    s = 255;
  return 'rgba(' + o(r() * s) + ',' + o(r() * s) + ',' + o(r() * s) + ',' + r().toFixed(1) + ')';
}

// c.arc(xCircle, yCircle, radius, 0, Math.PI * 2, false)
function Circle(x, y, dx, dy, radius, color) {
  this.x = x
  this.y = y
  this.dx = dx
  this.dy = dy
  this.radius = radius
  this.color = color

  this.draw = function() {
    // c.strokeStyle = this.color
    c.beginPath()
    c.strokeStyle = this.color
    c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
    c.stroke()
  }

  this.update = function() {
    if (this.x >= innerWidth - this.radius) {
      this.dx = -this.dx
    } else if (this.x <= this.radius) {
      this.dx = -this.dx
    }
    if (this.y >= innerHeight - this.radius) {
      this.dy = -this.dy
    } else if (this.y <= this.radius) {
      this.dy = -this.dy
    }

    this.x += this.dx
    this.y += this.dy
    this.draw()
  }
}


function Rectangle(x, y, dx, dy, height, width, color) {
  this.x = x
  this.y = y
  this.dx = dx
  this.dy = dy
  this.height = height
  this.width = width
  this.color = color

  this.draw = function() {
    c.beginPath()
    c.fillStyle = this.color
    c.fillRect(this.x, this.y, this.width, this.height)
  }

  this.update = function() {
    if (this.x >= innerWidth - this.width) {
      this.dx = -this.dx
    } else if (this.x <= 0) {
      this.dx = -this.dx
    }
    if (this.y >= innerHeight - this.height) {
      this.dy = -this.dy
    } else if (this.y <= 0) {
      this.dy = -this.dy
    }

    this.x += this.dx
    this.y += this.dy
    this.draw()
  }
}

function randSpeed() {
  return (Math.random() - 0.5) * 5
}

let rectangleArray = []
let circleArray = []
for (var i = 0; i < 3; i++) {
  let heightRect = Math.floor((Math.random() * 100) + 1)
  let widthRect = Math.floor((Math.random() * 100) + 1)
  rectangleArray.push(new Rectangle(80, 80, randSpeed(), randSpeed(), heightRect, widthRect, random_rgba()))

  let radiusCircle = Math.floor((Math.random() * 50) + 1)
  circleArray.push(new Circle(80, 80, randSpeed(), randSpeed(), radiusCircle, random_rgba()))
}


function animate() {
  requestAnimationFrame(animate)
  c.clearRect(0, 0, innerWidth, innerHeight)

  for (var i = 0; i < rectangleArray.length; i++) {
    rectangleArray[i].draw()
    rectangleArray[i].update()
  }

  for (var i = 0; i < circleArray.length; i++) {
    circleArray[i].draw()
    circleArray[i].update()
  }
}

animate()
<canvas></canvas>
...