前端练习 | 万圣节撒糖特效

初始页面

 首先收集各种万圣节的图片素材，拼出页面。

撒糖特效

 然后添加撒糖的特效。之前在各种博客中看到过鼠标点击后抛撒小球的特效，搜索后找到了博客园背景页面动态特效这篇文章，在“5.鼠标点击火花特效”处获取js代码。

 将js代码保存到本地，进行修改。需要把小球改为糖果的图像。（注：本地糖果图像的命名格式为"candy{数字序号}.png"）
 首先找到Boom类，在init函数中，把Circle的color参数去掉，添加index参数。

    init() {
        for (let i = 0; i < this.circleCount; i++) {
            const circle = new Circle({
                context: this.context,
                origin: this.origin,
                // color: this.randomColor(),
                index: Math.floor(15 * Math.random()),
                angle: this.randomRange(Math.PI - 1, Math.PI + 1),
                speed: this.randomRange(1, 6)
            })
            this.circles.push(circle)
        }
    }

 然后在Circle类中，在constructor函数里，同样去掉color，添加index。另外还在末尾新建了Image对象，并设置了路径。

    constructor({ origin, speed, index, angle, context }) {
        this.origin = origin
        this.position = { ...this.origin }
        this.index = index
        this.speed = speed
        this.angle = angle
        this.context = context
        this.renderCount = 0
        this.img = new Image()
        this.img.src="./img/candy"+this.index.toString()+".png";
    }

 在Circle类中，修改draw函数，把绘制小球的代码改为绘制图像。

    draw() {
        // this.context.fillStyle = this.color
        // this.context.beginPath()
        // this.context.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2)
        // this.context.fill()
        
        this.context.drawImage(img,this.position.x,this.position.y);
    }

 在html中引入js代码，特效完成。

<!-- 点击火花特效 -->
<script src="./mouse-click.js"></script>

bug修复

 网上的这段js代码不能适应窗口大小调节，窗口变大后，特效不能铺满整个页面，我进行了修改。
 在CursorSpecialEffects类中，添加handleResize函数。

    handleResize() {
        this.renderCanvas.style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth = window.innerWidth
        this.renderCanvas.style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight = window.innerHeight
    }

 然后在init函数末尾添加一行，将resize事件绑定handleResize函数。

    init() {
        const style = this.renderCanvas.style
        style.position = 'fixed'
        style.top = style.left = 0
        style.zIndex = '999999999999999999999999999999999999999999'
        style.pointerEvents = 'none'

        style.width = this.renderCanvas.width = this.computerCanvas.width = this.globalWidth
        style.height = this.renderCanvas.height = this.computerCanvas.height = this.globalHeight

        document.body.append(this.renderCanvas)

        window.addEventListener('mousedown', this.handleMouseDown.bind(this))
        window.addEventListener('pagehide', this.handlePageHide.bind(this))
        window.addEventListener('resize', this.handleResize.bind(this))
    }

 问题解决。