Private
Public Access
110 lines
3.1 KiB
HTML
Executable File
110 lines
3.1 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>HTML/Canvas Game Starter</title>
|
|
<meta name="description" content="">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<link rel="stylesheet" href="css/game.css">
|
|
<link rel="stylesheet" href="../../css/hint.css">
|
|
<link rel="stylesheet" href="../../css/font-awesome.min.css">
|
|
|
|
<script src="../../lib/pixi.min.js"></script>
|
|
<script src="../../lib/u-events.js"></script>
|
|
<script src="../../lib/u-howler.js"></script>
|
|
<script src="../../lib/u-pathastar.js"></script>
|
|
<script src="../../lib/u-helper.js"></script>
|
|
<script src="../../lib/u-grid.js"></script>
|
|
<script src="../../lib/u-pixistage8.js"></script>
|
|
|
|
<script src="js/game.js"></script>
|
|
</head>
|
|
<body onunload="Game.quick_save();" oncontextmenu="event.preventDefault();">
|
|
|
|
<nav>
|
|
</nav>
|
|
|
|
<footer>
|
|
<div id="frame-rate"></div>
|
|
</footer>
|
|
|
|
<script type="module">
|
|
|
|
async function initGame() {
|
|
try {
|
|
let stage = await PixiStage.create();
|
|
stage.layers.add('base');
|
|
|
|
function updateFrameRate() {
|
|
let fps = stage.app.ticker.FPS.toFixed(2);
|
|
document.getElementById('frame-rate').innerText = `FPS: ${fps}`;
|
|
}
|
|
stage.app.ticker.add(updateFrameRate);
|
|
|
|
let glow_filter = new PIXI.filters.GlowFilter();
|
|
let prev_glow_filter_parent = false;
|
|
|
|
let tile_size = 120;
|
|
for (let ix = 0; ix < 5; ix++) {
|
|
for (let iy = 0; iy < 5; iy++) {
|
|
let square = new PIXI.Graphics();
|
|
square.beginFill(0xff0000 + (ix * 0x003300) + (iy * 0x000033));
|
|
square.drawRect(0, 0, tile_size*0.9, tile_size*0.9);
|
|
square.endFill();
|
|
square.x = ix * tile_size;
|
|
square.y = iy * tile_size;
|
|
stage.layers.get('base').addChild(square);
|
|
|
|
stage.make_draggable(square);
|
|
stage.make_clickable(square, () => {
|
|
stage.director.focus_on(square, -0.5);
|
|
});
|
|
|
|
square.on('mouseout', () => {
|
|
if(prev_glow_filter_parent == square)
|
|
square.filters = [];
|
|
});
|
|
square.on('mouseover', () => {
|
|
if(prev_glow_filter_parent)
|
|
prev_glow_filter_parent.filters = [];
|
|
square.filters = [glow_filter];
|
|
prev_glow_filter_parent = square;
|
|
});
|
|
|
|
stage.events.on('drag:start', (data) => {
|
|
if(data.object === square) {
|
|
stage.director.focus_on(square, 0.35);
|
|
}
|
|
});
|
|
stage.events.on('drag:end', (data) => {
|
|
if(data.object === square) {
|
|
stage.director.focus_on(stage.layers.get('base'));
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
stage.event_handlers.wheel = (e) => {
|
|
if(e.deltaY > 0)
|
|
stage.app.stage.target_scale *= 0.9;
|
|
else
|
|
stage.app.stage.target_scale *= 1.1;
|
|
stage.app.stage.target_scale = clamp(stage.app.stage.target_scale, stage.params.zoom.min, stage.params.zoom.max);
|
|
stage.director.zoom(stage.app.stage, stage.app.stage.target_scale);
|
|
}
|
|
|
|
stage.director.focus_on(stage.layers.get('base'));
|
|
} catch (error) {
|
|
console.error('Failed to initialize game:', error);
|
|
}
|
|
}
|
|
|
|
// Initialize when page loads
|
|
window.addEventListener('load', initGame);
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|