103 lines
2.8 KiB
HTML
103 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html background-color="black">
|
|
<head>
|
|
<link href=" https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css " rel="stylesheet">
|
|
<style> html { background-color: black; } </style>
|
|
<script src="https://cdn.jsdelivr.net/npm/phaser@3.70.0/dist/phaser-arcade-physics.min.js"></script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
|
|
class WebFontFile extends Phaser.Loader.File
|
|
{
|
|
/**
|
|
* @param {Phaser.Loader.LoaderPlugin} loader
|
|
* @param {string | string[]} fontNames
|
|
* @param {string} [service]
|
|
*/
|
|
constructor(loader, fontNames, service = 'google')
|
|
{
|
|
super(loader, {
|
|
type: 'webfont',
|
|
key: fontNames.toString()
|
|
})
|
|
|
|
this.fontNames = Array.isArray(fontNames) ? fontNames : [fontNames]
|
|
this.service = service
|
|
}
|
|
|
|
load()
|
|
{
|
|
const config = {
|
|
active: () => {
|
|
this.loader.nextFile(this, true)
|
|
}
|
|
}
|
|
|
|
switch (this.service)
|
|
{
|
|
case 'google':
|
|
config['google'] = {
|
|
families: this.fontNames
|
|
}
|
|
break
|
|
|
|
default:
|
|
throw new Error('Unsupported font service')
|
|
}
|
|
|
|
window.WebFont.load(config)
|
|
}
|
|
}
|
|
class Example extends Phaser.Scene
|
|
{
|
|
constructor()
|
|
{
|
|
super('Bungee')
|
|
}
|
|
|
|
preload ()
|
|
{
|
|
this.load.setBaseURL('https://exevirus.github.io/Keyboard-Kingdom/');
|
|
this.load.addFile(new WebFontFile(this.load, 'Bungee'))
|
|
this.load.image('key', 'keyboard.png');
|
|
}
|
|
|
|
create ()
|
|
{
|
|
const particles = this.add.particles(1280/2, 320, 'key', {
|
|
speed: 500,
|
|
scale: { start: 0.5, end: 0.2 }
|
|
});
|
|
|
|
const logo = this.add.text(1280/2-290, 180, 'Keyboard Kingdom!', {
|
|
fontFamily: '"Bungee"',
|
|
fontSize: '50px',
|
|
origin: { x: 0.5, y: 0.5 }
|
|
})
|
|
}
|
|
}
|
|
|
|
const config = {
|
|
type: Phaser.AUTO,
|
|
width: 1280,
|
|
height: 720,
|
|
scene: Example,
|
|
scale: {
|
|
mode: Phaser.Scale.FIT,
|
|
autoCenter: true
|
|
},
|
|
backgroundColor: 0x000000, // Black background color
|
|
physics: {
|
|
default: 'arcade',
|
|
arcade: {
|
|
gravity: { y: 200 }
|
|
}
|
|
}
|
|
};
|
|
|
|
const game = new Phaser.Game(config);
|
|
</script>
|
|
</body>
|
|
</html> |