77 lines
2.3 KiB
HTML
77 lines
2.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
|
|
<title>Arkanoid Mini App</title>
|
||
|
|
<script src="https://telegram.org/js/telegram-web-app.js"></script>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
height: 100vh;
|
||
|
|
background-color: #000;
|
||
|
|
}
|
||
|
|
#unity-container {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
#unity-canvas {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
#loading {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
color: white;
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="unity-container">
|
||
|
|
<canvas id="unity-canvas"></canvas>
|
||
|
|
<div id="loading">Loading game...</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Initialize Telegram Mini App
|
||
|
|
const webapp = window.Telegram.WebApp;
|
||
|
|
webapp.ready();
|
||
|
|
webapp.expand();
|
||
|
|
|
||
|
|
// Load Unity WebGL build
|
||
|
|
var unityInstance = null;
|
||
|
|
var buildUrl = 'webgl-build'; // Your WebGL build directory
|
||
|
|
|
||
|
|
var script = document.createElement("script");
|
||
|
|
script.src = buildUrl + "/Build/webgl-build.loader.js";
|
||
|
|
document.body.appendChild(script);
|
||
|
|
|
||
|
|
script.onload = () => {
|
||
|
|
createUnityInstance(document.querySelector("#unity-canvas"), {
|
||
|
|
dataUrl: buildUrl + "/Build/webgl-build.data",
|
||
|
|
frameworkUrl: buildUrl + "/Build/webgl-build.framework.js",
|
||
|
|
codeUrl: buildUrl + "/Build/webgl-build.wasm",
|
||
|
|
streamingAssetsUrl: "StreamingAssets",
|
||
|
|
companyName: "YourCompany",
|
||
|
|
productName: "Arkanoid",
|
||
|
|
productVersion: "1.0",
|
||
|
|
}).then((instance) => {
|
||
|
|
unityInstance = instance;
|
||
|
|
document.getElementById("loading").style.display = "none";
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
// Handle Telegram back button
|
||
|
|
webapp.onEvent('backButtonClicked', () => {
|
||
|
|
if (unityInstance) {
|
||
|
|
unityInstance.SendMessage('GameManager', 'HandleBackButton');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|