Question

嗨，我是JavaScript中使用ES 6的新手，我正在尝试创建一个圆圈，用户可以从中单击页面。我现在所拥有的是一个从屏幕顶部向下延伸到底部的圆圈，因此，基本上我想做的就是将鼠标放在画布上，然后从我单击的位置开始向上和向下触发圆圈。

import utils from './utils'

const canvas = document.querySelector('canvas')
const c = canvas.getContext('2d')

canvas.width = innerWidth
canvas.height = innerHeight


const colors = ['#2185C5', '#7ECEFD', '#FFF6E5', '#FF7F66']

// Event Listeners
addEventListener('resize', () => {
    canvas.width = innerWidth
    canvas.height = innerHeight

    init()
})

// Objects
function Star(x, y, radius, color) {
    this.x = x
    this.y = y
    this.radius = radius
    this.color = color
    this.velocity = {
      x: 0 ,
      y: 3
    }
    this.friction = 0.8
    this.gravity = 1

}

Star.prototype.draw = function() {
    c.beginPath()
    c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
    c.fillStyle = this.color
    c.fill()
    c.closePath()
}

Star.prototype.update = function() {
    this.draw()
    //when balls hits end of the screen
    if (this.y + this.radius + this.velocity.y > canvas.height) {
      this.velocity.y = -this.velocity.y * this.friction
      this.shatter()
    } else {
      this.velocity.y += this.gravity
    }

    this.y += this.velocity.y
}

Star.prototype.shatter = function(){
  this.radius -= 3
  for (var i = 0; i < 8; i++) {
    miniStars.push(new MiniStar(this.x, this.y, 2))
  }
}

function MiniStar(x, y, radius, color){
  Star.call(this, x, y, radius, color)
  this.velocity = {
    x: utils.randomIntFromRange(-5, 5) ,
    y: utils.randomIntFromRange(-15, 15)
  }
  this.friction = 0.8
  this.gravity = 0.1
  this.ttl = 200
  this.opacity = 1
}

MiniStar.prototype.draw = function() {
    c.beginPath()
    c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
    c.fillStyle = `rgba(255, 0, 0, ${this.opacity})`
    c.fill()
    c.closePath()
}

MiniStar.prototype.update = function() {
    this.draw()
    //when balls hits end of the screen
    if (this.y + this.radius + this.velocity.y > canvas.height) {
      this.velocity.y = -this.velocity.y * this.friction
    } else {
      this.velocity.y += this.gravity
    }
    this.x += this.velocity.x
    this.y += this.velocity.y
    this.ttl -= 1
    this.opacity -= 1 / this.ttl
}
// Implementation
let stars
let miniStars
function init() {
    stars = []
    miniStars = []

    for (let i = 0; i < 1; i++) {
         stars.push( new Star(canvas.width / 2, 30, 30, 'blue'))
    }
}

// Animation Loop
function animate() {
    requestAnimationFrame(animate)
    c.clearRect(0, 0, canvas.width, canvas.height)

    stars.forEach((star, index) => {
     star.update()
     if (star.radius == 0 ){
       stars.splice(index, 1)
     }
    })
    miniStars.forEach((miniStar, index) => {
      miniStar.update()
      if (miniStar.ttl == 0 ){
        miniStars.splice(index, 1)
      }
    })
}

init()
animate()

Answer 1

您可以尝试在代码末尾添加它：

// when you click the canvas
canvas.addEventListener("click", (evt)=>{
      // you detect the mouse position on click
      let m = oMousePos(canvas, evt);
      // you add a new star to the stars array
      stars.push( new Star(m.x, m.y, 30, 'blue'))
    })

// a function that detects the position of the mouse on event

    function oMousePos(canvas, evt) {
      var ClientRect = canvas.getBoundingClientRect();
        return { 
        x: Math.round(evt.clientX - ClientRect.left),
        y: Math.round(evt.clientY - ClientRect.top)
      }
    }

用鼠标点击发射星星

1 个答案: