JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

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();