114 lines
2.7 KiB
JavaScript
114 lines
2.7 KiB
JavaScript
import { Sprite } from './entity.js';
|
|
import { LANE_COLORS, getPixelsPerBeat } from './config.js';
|
|
import { KeyHint } from './ui.js';
|
|
|
|
class BeatLine extends Sprite {
|
|
constructor() {
|
|
super((700 - 300) / 2, 40)
|
|
}
|
|
|
|
draw() {
|
|
stroke(190)
|
|
strokeWeight(1)
|
|
line(this.x, this.y, this.x + 300, this.y)
|
|
}
|
|
}
|
|
|
|
export class PressIndicator extends Sprite {
|
|
constructor(lane) {
|
|
super(((width - 300) / 2) + (75*lane), height - 40 - 24);
|
|
|
|
this.heldFor = 0;
|
|
|
|
this.laneTransparency = 0
|
|
this.transparency = 0
|
|
this.hit = false;
|
|
}
|
|
|
|
draw(held) {
|
|
// console.log("hf", this.heldFor, held)
|
|
if(held) {
|
|
if(this.hit) {
|
|
blur(color(255,255,255), 16)
|
|
if(this.heldFor == 0) {
|
|
this.transparency = 255
|
|
this.laneTransparency = 100
|
|
} else {
|
|
this.transparency = lerp(this.transparency, 50, 0.2)
|
|
}
|
|
} else {
|
|
this.transparency = lerp(this.transparency, 50, 0.6);
|
|
}
|
|
} else {
|
|
this.transparency = lerp(this.transparency, 0, 0.5)
|
|
}
|
|
|
|
fill(255, 255, 255, this.transparency)
|
|
noStroke()
|
|
rect(this.x, this.y, 75, 24)
|
|
|
|
|
|
// lane
|
|
this.laneTransparency = lerp(this.laneTransparency, 0, 0.05)
|
|
fill(255, 255, 255, this.laneTransparency)
|
|
noStroke()
|
|
rect(this.x, 0, 75, height)
|
|
|
|
if(this.hit) {
|
|
blur(0, 0)
|
|
}
|
|
|
|
if(!held && this.heldFor > 0)
|
|
this.heldFor = 0;
|
|
|
|
if(held)
|
|
this.heldFor += 1;
|
|
|
|
if(this.hit && held)
|
|
this.hit = false;
|
|
}
|
|
}
|
|
|
|
export class Highway extends Sprite {
|
|
constructor() {
|
|
super(0,0)
|
|
}
|
|
|
|
static draw(curBeat) {
|
|
noStroke()
|
|
blur(color(20), 16)
|
|
fill(140)
|
|
rect((width - 300) / 2, 0, 300, height)
|
|
blur(0, 0)
|
|
|
|
fill(80)
|
|
rect((width - 300) / 2, height - 28 - 12, 300, 28 + 12)
|
|
|
|
// purple bar
|
|
for(let i = 0; i < LANE_COLORS.length; i++) {
|
|
let c = color(LANE_COLORS[i][0], LANE_COLORS[i][1], LANE_COLORS[i][2])
|
|
fill(lerpColor(c, color(0), 0.5))
|
|
rect((width - 300) / 2 + ((300/4) * i), height - 28 - 24 - 12, (300 / 4), 24)
|
|
}
|
|
|
|
// Lines
|
|
let PIXELS_PER_BEAT = getPixelsPerBeat();
|
|
let beatLineX = height - 40
|
|
while(beatLineX > 0) {
|
|
stroke(170);
|
|
strokeWeight(2);
|
|
line(
|
|
(width - 300) / 2,
|
|
beatLineX + (PIXELS_PER_BEAT * (curBeat % 1) - 1),
|
|
(width - 300) / 2 + 300,
|
|
beatLineX + (PIXELS_PER_BEAT * (curBeat % 1) - 1)
|
|
);
|
|
beatLineX -= PIXELS_PER_BEAT;
|
|
}
|
|
|
|
KeyHint.draw("D", (width/2) + 182 - (300 / 4)*4, height - 14)
|
|
KeyHint.draw("F", (width/2) + 182 - (300 / 4)*3, height - 14)
|
|
KeyHint.draw("J", (width/2) + 182 - (300 / 4)*2, height - 14)
|
|
KeyHint.draw("K", (width/2) + 182 - (300 / 4)*1, height - 14)
|
|
}
|
|
} |