lhy6305/untitled-rhythm-game
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

git auto update

Browse Source
This commit is contained in:
lhy6305 2025-04-18 20:31:44 +08:00
parent dcdb9485c2
commit b42932dfa0
4 changed files with 83 additions and 289 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
css/main.css
View File

@ -1,14 +1,14 @@
*{
margin:0;
padding:0;
outline:none;
position:relative;
left:0;
top:0;
* {
margin: 0;
padding: 0;
outline: none;
position: relative;
left: 0;
top: 0;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: #888;
}
body{
width:100vw;
height:100vh;
overflow:hidden;
background-color:#000;
}

2
index.html
View File

@ -5,5 +5,5 @@
<script src="./js/0-jsloader.js"></script>
<script src="./js/0-jsloadentry.js"></script>
</head><body>
<div id="mainframe"><canvas id="stagecanvas"></canvas></div>
<div id="mainframe"><canvas id="maincanvas"></canvas></div>
</body></html>

311
js/libmain.js
View File

@ -1,6 +1,6 @@
//libmain.js
(function() {
(async function() {
if(typeof PIXI!="object") {
if(typeof loadfail=="function") {
loadfail("libmain.js: object PIXI(type of "+(typeof PIXI)+") is not defined");
@ -11,259 +11,74 @@
}
var main_stage= {};
main_stage.settings= {};
main_stage.api= {};
(function() { //init canvas and frame
console.log("[libmain] setting up basic pixi application...");
//set up main canvas element
main_stage.width=1920;
main_stage.height=1080;
var mainframe=document.getElementById("mainframe");
var canvas=document.getElementById("stagecanvas");
if(mainframe===null) {
mainframe=document.createElement("div");
mainframe.id="mainframe";
document.body.appendChild(mainframe);
/////////////////////////////////////// set default settings
main_stage.settings.fixed_ratio=16/9;
main_stage.settings.use_fixed_aspect_ratio=true;
/////////////////////////////////////// init canvas and frame
console.log("[libmain] setting up basic pixi application...");
// set up main canvas element
main_stage.mainframe=document.getElementById("mainframe");
main_stage.canvas=document.getElementById("maincanvas");
if(main_stage.mainframe===null) {
main_stage.mainframe=document.createElement("div");
main_stage.mainframe.id="mainframe";
document.body.appendChild(main_stage.mainframe);
}
main_stage.mainframe.style.display="inline-block";
main_stage.mainframe.style.display="inline-block";
main_stage.mainframe.style.zIndex=0;
main_stage.mainframe.style.backgroundColor="#000000";
if(main_stage.canvas===null) {
main_stage.canvas=document.createElement("canvas");
main_stage.canvas.id="maincanvas";
main_stage.mainframe.appendChild(main_stage.canvas);
}
main_stage.canvas.style.width="100%";
main_stage.canvas.style.height="100%";
main_stage.canvas.style.display="inline-block";
main_stage.canvas.style.position="absolute";
main_stage.canvas.style.zIndex=1;
// document resize handler
main_stage.resize=function() {
var res=[document.body.clientWidth, document.body.clientHeight, 0, 0];
if(main_stage.settings.use_fixed_aspect_ratio) {
res=libutil.calcresize(document.body.clientWidth, document.body.clientHeight, main_stage.settings.fixed_ratio);
}
mainframe.style.display="inline-block";
mainframe.style.display="inline-block";
mainframe.style.zIndex=0;
mainframe.style.backgroundColor="#000000";
if(canvas===null) {
canvas=document.createElement("canvas");
canvas.id="stagecanvas";
mainframe.appendChild(canvas);
}
canvas.style.width="100%";
canvas.style.height="100%";
canvas.style.display="inline-block";
canvas.style.position="absolute";
canvas.style.zIndex=1;
main_stage.mainframe=mainframe;
main_stage.canvas=canvas;
mainframe.style.width=res[0]+"px";
mainframe.style.height=res[1]+"px";
mainframe.style.left=res[2]+"px";
mainframe.style.top=res[3]+"px";
};
//document resize handler
main_stage.resize=function() {
var res=libutil.calcresize(document.body.clientWidth, document.body.clientHeight, main_stage.width, main_stage.height);
mainframe.style.width=res[0]+"px";
mainframe.style.height=res[1]+"px";
mainframe.style.left=res[2]+"px";
mainframe.style.top=res[3]+"px";
};
window.addEventListener("resize", main_stage.resize);
main_stage.resize();
window.addEventListener("resize", main_stage.resize);
main_stage.resize();
// setup pixi application
main_stage.renderer=await PIXI.autoDetectRenderer({
"preference":"webgpu",
"canvas":main_stage.canvas,
"antialias":true,
"backgroundAlpha":0,
"width":main_stage.width,
"height":main_stage.height
});
//setup pixi application
if(window.suppgl) {
main_stage.renderer=new PIXI.Renderer({"view":canvas, "antialias":true, "transparent":true, "backgroundAlpha":0, "width":main_stage.width, "height":main_stage.height});
} else {
main_stage.renderer=new PIXI.CanvasRenderer({"view":canvas, "antialias":true, "transparent":true, "backgroundAlpha":0, "width":main_stage.width, "height":main_stage.height});
}
main_stage.stage=new PIXI.Container();
main_stage.stage.sortableChildren=true;
main_stage.render=function() {
requestAnimationFrame(main_stage.render);
main_stage.renderer.render(main_stage.stage);
};
main_stage.render();
main_stage.stage=new PIXI.Container();
main_stage.stage.sortableChildren=true;
main_stage.render=function() {
requestAnimationFrame(main_stage.render);
main_stage.renderer.render(main_stage.stage);
};
requestAnimationFrame(main_stage.render);
})();
(function() { //api functions
console.log("[libmain] initalizing api functions...");
main_stage.addVideoPIXI=function(pth, width, height, left, top) { //[DEPRECIATED] return=PIXI.Sprite
if(arguments.length<=1||isNaN(Number(width))) {
width=main_stage.renderer.screen.width;
}
if(arguments.length<=2||isNaN(Number(height))) {
height=main_stage.renderer.screen.height;
}
if(arguments.length<=3||isNaN(Number(left))) {
left=0;
}
if(arguments.length<=4||isNaN(Number(top))) {
top=0;
}
var tex=PIXI.Texture.from(pth);
var spr=PIXI.Sprite.from(tex);
spr.width=width;
spr.height=height;
spr.position.x=left;
spr.position.y=top;
spr.anchor.x=0;
spr.anchor.y=0;
main_stage.stage.addChild(spr);
tex.baseTexture.on("loaded", function() {
setTimeout(function() {
tex.baseTexture.resource.source.pause();
tex.baseTexture.resource.source.currentTime=0;
}, 0);
});
spr.play=function() {
tex.baseTexture.resource.source.play();
};
spr.pause=function() {
tex.baseTexture.resource.source.pause();
};
spr.stop=function() {
tex.baseTexture.resource.source.pause();
tex.baseTexture.resource.source.currentTime=0;
};
spr.seek=function(t) {
tex.baseTexture.resource.source.currentTime=t;
};
spr.mute=function(t) {
tex.baseTexture.resource.source.muted=t;
};
spr.loop=function(t) {
tex.baseTexture.resource.source.loop=t;
};
return spr;
};
main_stage.addVideo=function(pth, width, height, left, top) { //return=HTMLVideoElement
if(arguments.length<=1||isNaN(Number(width))) {
width=main_stage.renderer.screen.width;
}
if(arguments.length<=2||isNaN(Number(height))) {
height=main_stage.renderer.screen.height;
}
if(arguments.length<=3||isNaN(Number(left))) {
left=0;
}
if(arguments.length<=4||isNaN(Number(top))) {
top=0;
}
width*=100;
width/=main_stage.renderer.screen.width;
height*=100;
height/=main_stage.renderer.screen.height;
left*=100;
left/=main_stage.renderer.screen.width;
top*=100;
top/=main_stage.renderer.screen.height;
var elem=document.createElement("video");
elem.src=pth;
elem.load();
elem.style.pointerEvents="none";
elem.style.left=left+"%";
elem.style.top=top+"%";
elem.style.width=width+"%";
elem.style.height=height+"%";
elem.style.position="absolute";
elem.style.display="inline-block";
elem.style.zIndex=-1;
elem.destroy=function() {
elem.parentNode.removeChild(elem);
elem=null;
};
elem.setposi=function(x, y) {
x*=100;
x/=main_stage.renderer.screen.width;
y*=100;
y/=main_stage.renderer.screen.height;
elem.style.left=x+"%";
elem.style.top=y+"%";
};
main_stage.mainframe.appendChild(elem);
return elem;
};
main_stage.addAudio=function(pth) { //return=HTMLAudioElement
var elem=document.createElement("audio");
elem.style.display="none";
elem.src=pth;
elem.load();
elem.destroy=function() {
elem.parentNode.removeChild(elem);
elem=null;
};
main_stage.mainframe.appendChild(elem);
return elem;
};
main_stage.addText=function(text, left, top, cfg) { //return=PIXI.Sprite
if(arguments.length<=1||isNaN(Number(left))) {
left=0;
}
if(arguments.length<=2||isNaN(Number(top))) {
top=0;
}
if(arguments.length<=3||!(cfg instanceof Object)) {
cfg= {"fontFamily":"Arial", "fontSize":35, "fill":0xffffff, "align":"left"};
}
var spr=new PIXI.Text(text, cfg);
spr.position.x=left;
spr.position.y=top;
spr.anchor.x=0.5;
spr.anchor.y=0.5;
main_stage.stage.addChild(spr);
return spr;
};
main_stage.addShape=function(name, left, top, width, height) { //return=PIXI.Sprite
var shape=null;
for(var a=0; a<main_stage.shapes.length; a++) {
if(main_stage.shapes[a].name==name) {
shape=main_stage.shapes[a];
break;
}
}
if(shape===null) {
console.error("shape \""+name+"\" is not defined.");
return false;
}
if(arguments.length<=1||isNaN(Number(left))) {
left=0;
}
if(arguments.length<=2||isNaN(Number(top))) {
top=0;
}
if(arguments.length<=3||isNaN(Number(width))) {
width=shape.canvas.width;
}
if(arguments.length<=4||isNaN(Number(height))) {
height=shape.canvas.height;
}
var tex=PIXI.Texture.from(shape.canvas);
var spr=PIXI.Sprite.from(tex);
spr.width=width;
spr.height=height;
spr.position.x=left;
spr.position.y=top;
spr.anchor.x=0.5;
spr.anchor.y=0.5;
main_stage.stage.addChild(spr);
return spr;
};
main_stage.addImage=function(pth, left, top, width, height) { //return=PIXI.Sprite
var tex=PIXI.Texture.from(pth);
if(arguments.length<=1||isNaN(Number(left))) {
left=0;
}
if(arguments.length<=2||isNaN(Number(top))) {
top=0;
}
if(arguments.length<=3||isNaN(Number(width))) {
width=tex.width;
}
if(arguments.length<=4||isNaN(Number(height))) {
height=tex.height;
}
var spr=PIXI.Sprite.from(tex);
spr.width=width;
spr.height=height;
spr.position.x=left;
spr.position.y=top;
spr.anchor.x=0.5;
spr.anchor.y=0.5;
main_stage.stage.addChild(spr);
return spr;
};
})();
/////////////////////////////////////// end of setup
window.main_stage=main_stage;
console.log("[libmain] all components initialized successfully.");

33
js/libutil.js
View File

@ -18,37 +18,16 @@
return Math.min(Math.max(val, min), max);
};
libutil.calcresize=function(cw, ch, ew, eh) { //return=[width,height,left,top]
if(cw/ew<ch/eh) {
return [cw, cw/ew*eh, 0, (ch-cw/ew*eh)/2];
libutil.calcresize=function(cw, ch, ratio) { // return=[width,height,left,top]
if(cw/ch<ratio) {
var h=cw/ratio;
return [cw, h, 0, (ch-h)/2];
} else {
return [ch/eh*ew, ch, (cw-ch/eh*ew)/2, 0];
var w=ch*ratio;
return [w, ch, (cw-w)/2, 0];
}
};
libutil.encodeHtmlSpecChars=function(html) {
var elem=document.createElement("div");
var txt=document.createTextNode(html);
elem.appendChild(txt);
return elem.innerHTML;
};
libutil.decodeHtmlSpecChars=function(str) {
var elem=document.createElement("div");
elem.innerHTML=str;
return elem.innerText||elem.textContent;
};
libutil.preloadFont=function(name) {
var elem=document.createElement("div");
elem.style.fontFamily=name;
elem.innerHTML=String(Math.random());
document.body.appendChild(elem);
setTimeout(function() {
document.body.removeChild(elem);
}, 0);
};
window.libutil=libutil;
})();