HTML5带音效的雷达检测信号动画

用鼠标放置物体，当雷达扫描到该物体时，会触发报警动画（粒子分解动画）和音效。

canvas, radar

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2543
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var c, cx,
    width,
    height,
    axis,
    speed = 4,
    notes,
    smokeParticles,
    numSmokeParticles = 15,
    centre = {
        x: 0,
        y: 0
    },
    animationFrameId,
    tau = Math.PI * 2,
    axisLength = 200,
    axisSpeed = 0.01,
    resetSwitch = document.getElementById('reset'),
    audioCx = new(window.AudioContext || window.webkitAudioContext)();

resetSwitch.onclick = function(e) {
    e.preventDefault();
    window.cancelAnimationFrame(animationFrameId);
    for (let n = 0; n < notes.length; n++) {
        let note = notes[n];
        if (note.osc) note.osc.stop();
    }
    init();
    loop();
};

window.addEventListener('resize', function() {
    width = c.width = window.innerWidth;
    height = c.height = window.innerHeight;
}, false);

window.addEventListener('click', function(e) {
    checkNote(e.pageX, e.pageY);
});

class SmokeParticle {

constructor(x, y) {
        this.x = x;
        this.y = y;
        this.radius = rand(1, 4);
        this.dx = rand(-0.5, 0.5);
        this.dy = rand(-0.5, 0.5);
        this.age = 0;
        this.lifeSpan = rand(30, 80);
        this.colours = newColours();
    }

draw() {
        cx.beginPath();
        cx.arc(this.x, this.y, this.radius, 0, tau);
        cx.fillStyle = 'rgba(' + this.colours.r + ',' + this.colours.g + ',' + this.colours.b + ', 1)';
        cx.fill();
    }

step() {
        this.y += this.dy;
        this.x += this.dx;
        this.age++;
    }

}

class Axis {

constructor(x, y) {
        this.x = x;
        this.y = y;
        this.colours = newColours();
        this.endX = x + axisLength;
        this.endY = y;
        this.angle = 0;
    }

step() {
        this.angle += axisSpeed;
        if (this.angle >= tau) this.angle = 0;
        this.endX = axisLength * Math.cos(this.angle) + this.x;
        this.endY = axisLength * Math.sin(this.angle) + this.y;
    }

draw() {
        cx.beginPath();
        cx.moveTo(this.x, this.y);
        cx.lineTo(this.endX, this.endY);
        cx.lineWidth = 1;
        cx.strokeStyle = 'rgba(' + this.colours.r + ',' + this.colours.g + ',' + this.colours.b + ', 1)';
        cx.stroke();
    }

}

class Note {

constructor(x, y) {

this.x = x;
        this.y = y;
        this.colours = newColours();
        this.permColours = this.colours;
        this.radius = 5;
        this.hitLife = 40;
        this.dying = 0;
        this.beenHit = false;
        this.distance = lineDistance({
            x: this.x,
            y: this.y
        }, {
            x: centre.x,
            y: centre.y
        });

}

draw() {

cx.beginPath();
        cx.arc(this.x, this.y, this.radius, 0, tau);
        cx.fillStyle = 'rgba(' + this.colours.r + ',' + this.colours.g + ',' + this.colours.b + ', 1)';
        cx.fill();

}

step() {

if (this.dying > 0) {
            this.dying -= 1;
        } else if (this.beenHit) {
            this.beenHit = false;
            this.osc.stop();
        }
        if (!this.beenHit) {
            this.colours = this.permColours;
        }

}

hit() {

if (!this.beenHit) {

this.beenHit = true;

this.dying = this.hitLife;

this.smoke();

this.colours = {
                r: 255,
                g: 255,
                b: 255
            };

this.osc = audioCx.createOscillator();
            this.osc.type = 'square';
            this.osc.frequency.value = this.distance + 100;
            this.osc.connect(audioCx.destination);
            this.osc.start();

}
    }

smoke() {

for (let x = 0; x < numSmokeParticles; x++) {
            smokeParticles.push(new SmokeParticle(this.x, this.y));
        }

}

pointToLineDistance = (line, point) => {

let normalLength = Math.sqrt(Math.pow(line.endX - line.x, 2) + Math.pow(line.endY - line.y, 2));

let ptd = Math.abs((point.x - line.x) * (line.endY - line.y) - (point.y - line.y) * (line.endX - line.x)) / normalLength;

return ptd;

}

lineDistance = (point1, point2) => {

return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));

}

checkNote = (x, y) => {

let removed = false;

for (let n = 0; n < notes.length; n++) {
        let note = notes[n];
        if (x < note.x + note.radius && x > note.x - note.radius && y < note.y + note.radius && y > note.y - note.radius) {
            if (note.osc) note.osc.stop();
            notes.splice(n, 1);
            removed = true;
        }
    }

if (!removed) {
        notes.push(new Note(x, y));
    }

}

addSmokeParticle = () => {

let xDiff = rand(0, 1);
    let yDiff = 0;
    smoke.push(new SmokeParticle(player.x + xDiff, player.y + player.radius + yDiff));

}

newColours = () => {
    let r = Math.floor(rand(64, 128));
    let g = Math.floor(rand(0, 64));
    let b = Math.floor(rand(128, 255));
    return {
        r, g, b
    };
}

checkLineHit = (note) => {

if (pointToLineDistance(axis, note) < 1 && lineDistance({
            x: axis.x,
            y: axis.y
        }, note) < axisLength && lineDistance({
            x: axis.endX,
            y: axis.endY
        }, note) < axisLength) {
        note.hit();
    }

}

rand = (min, max) => {
    return Math.random() * (max - min) + min;
}

loop = () => {

animationFrameId = window.requestAnimationFrame(loop);
    cx.clearRect(0, 0, width, height);

axis.step();
    axis.draw();

for (let n = 0; n < notes.length; n++) {
        let note = notes[n];
        note.step();
        note.draw();
        checkLineHit(note);
    }

for (let s = 0; s < smokeParticles.length; s++) {
        let smokeParticle = smokeParticles[s];
        smokeParticle.step();
        smokeParticle.draw();
        if (smokeParticle.age >= smokeParticle.lifeSpan) {
            smokeParticles.shift();
        }
    }
}

init = () => {

c = document.querySelector('canvas');
    width = c.width = window.innerWidth;
    height = c.height = window.innerHeight;
    cx = c.getContext('2d');

cx.globalCompositeOperation = 'lighter';

centre.x = width / 2;
    centre.y = height / 2;

notes = [];
    smokeParticles = [];

axis = new Axis(centre.x, centre.y);

}

init();

loop();

编译

CSS

HTML

用鼠标放置物体，当雷达扫描到该物体时，会触发报警动画（粒子分解动画）和音效。

canvas, radar

编辑器支持Emmet

快捷键

用鼠标放置物体，当雷达扫描到该物体时，会触发报警动画（粒子分解动画）和音效。

canvas, radar

HTML5 Canvas滤镜特效示例 - 带模糊光晕背景的五角星粒子动画

HTML5柏林噪音算法实现的墨汁浸染背景图片过渡动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：