113 lines
2.7 KiB
JavaScript
113 lines
2.7 KiB
JavaScript
var canvas;
|
|
var ctx;
|
|
|
|
/* Base resolution in osu! skins used for scaling */
|
|
const internal_width = 640;
|
|
const internal_height = 480;
|
|
|
|
/* Updates per second */
|
|
const framerate = 60;
|
|
|
|
/* Colors for playfield */
|
|
const colors = {
|
|
playfield: "#000",
|
|
lane_separator: "#222",
|
|
hitposition: "#AA0",
|
|
note: "#FFF"
|
|
};
|
|
|
|
/* Values retrieved from DOM */
|
|
var options = {
|
|
columnstart: 0,
|
|
columnwidth: 0,
|
|
hitposition: 0,
|
|
scrollspeed: 0,
|
|
noteratio: 0,
|
|
keycount: 0
|
|
}
|
|
|
|
/* Clears the canvas */
|
|
function clear() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
}
|
|
|
|
/* Draws a rectangle */
|
|
function rect(x, y, w, h, color) {
|
|
ctx.fillStyle = color;
|
|
ctx.fillRect(x, y, w, h);
|
|
}
|
|
|
|
/* Draws a string */
|
|
function text(string, x, y, color) {
|
|
ctx.fillStyle = color;
|
|
ctx.fillText(string, x, y);
|
|
}
|
|
|
|
/* Translates osu! coordinates to screen coordinates */
|
|
function translate_pos(x, y) {
|
|
return {
|
|
x: Math.floor(x / internal_width * canvas.width),
|
|
y: Math.floor(y / internal_height * canvas.height)
|
|
}
|
|
}
|
|
|
|
function draw() {
|
|
clear()
|
|
|
|
const columnstart = translate_pos(options.columnstart, 0);
|
|
const columnwidth = translate_pos(options.columnwidth, 0);
|
|
const hitposition = translate_pos(options.columnstart, options.hitposition);
|
|
|
|
const playfield_width = columnwidth.x * options.keycount;
|
|
const note_height = columnwidth.x * options.noteratio;
|
|
|
|
// playfield background
|
|
rect(columnstart.x, 0, playfield_width, canvas.height, colors.playfield);
|
|
|
|
// lane separators
|
|
for (var i = 0; i <= options.keycount; i++) {
|
|
rect(columnstart.x + i * columnwidth.x, 0, 1, canvas.height, colors.lane_separator);
|
|
}
|
|
|
|
// hitpos
|
|
rect(hitposition.x, hitposition.y, playfield_width, 5, colors.hitposition);
|
|
|
|
// notes
|
|
let y_pos = hitposition.y - note_height;
|
|
while (y_pos > 0) {
|
|
for (let i = 0; i < options.keycount; ++i) {
|
|
rect (
|
|
columnstart.x + i * columnwidth.x,
|
|
y_pos,
|
|
columnwidth.x, note_height, colors.note
|
|
);
|
|
|
|
// completely inaccurate but i cba to simulate the whole playfield
|
|
y_pos -= options.scrollspeed * 3;
|
|
}
|
|
}
|
|
}
|
|
|
|
window.onload = function () {
|
|
create_prologue();
|
|
|
|
canvas = document.getElementById("playfield");
|
|
ctx = canvas.getContext("2d");
|
|
|
|
ctx.font = "15px Arial";
|
|
ctx.textBaseline = "hanging";
|
|
|
|
for (let input of document.getElementsByTagName("input")) {
|
|
input.onchange = function () {
|
|
options[this.id] = this.value;
|
|
document.getElementById(this.id + "_out").innerText = this.value;
|
|
};
|
|
|
|
input.onchange();
|
|
}
|
|
|
|
setInterval(function () {
|
|
draw();
|
|
}, 1000 / framerate);
|
|
};
|