peterstockings/rogue
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use full screen

Browse Source
This commit is contained in:
Peter Stockings
2026-01-04 09:44:05 +11:00
parent 64118090d6
commit ad487e766c
4 changed files with 51 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
index.html
View File

@@ -1,13 +1,17 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<meta charset="UTF-8" /> <head>
<link rel="icon" type="image/png" href="/favicon.png" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="icon" type="image/png" href="/favicon.png" />
<title>rogue</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head> <link rel="stylesheet" href="/src/style.css" />
<body> <title>rogue</title>
<div id="app"></div> </head>
<script type="module" src="/src/main.ts"></script>
</body> <body>
</html> <div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

7
src/main.ts
View File

@@ -6,8 +6,11 @@ import { StartScene } from "./scenes/StartScene";
new Phaser.Game({ new Phaser.Game({
type: Phaser.AUTO, type: Phaser.AUTO,
parent: "app", parent: "app",
width: 960, scale: {
height: 540, mode: Phaser.Scale.RESIZE,
width: window.innerWidth,
height: window.innerHeight,
},
backgroundColor: "#111", backgroundColor: "#111",
pixelArt: true, pixelArt: true,
roundPixels: true, roundPixels: true,

8
src/scenes/SplashScene.ts
View File

@@ -16,7 +16,13 @@ export class SplashScene extends Scene {
// Background (Placeholder for Image) // Background (Placeholder for Image)
// If we successfully load the image 'splash', we use it. // If we successfully load the image 'splash', we use it.
if (this.textures.exists('splash')) { if (this.textures.exists('splash')) {
this.add.image(width / 2, height / 2, 'splash').setDisplaySize(width, height); const splash = this.add.image(width / 2, height / 2, 'splash');
// Scale to cover the screen while maintaining aspect ratio
const scaleX = width / splash.width;
const scaleY = height / splash.height;
const scale = Math.max(scaleX, scaleY);
splash.setScale(scale);
} else { } else {
this.add.rectangle(0, 0, width, height, 0x110022).setOrigin(0); this.add.rectangle(0, 0, width, height, 0x110022).setOrigin(0);
this.add.text(width/2, height/2, "ROGUE LEGACY", { this.add.text(width/2, height/2, "ROGUE LEGACY", {

24
src/style.css Normal file
View File

@@ -0,0 +1,24 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
#app {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #111;
}
canvas {
display: block;
}