mirror of
https://github.com/lucky-sideburn/kubeinvaders.git
synced 2026-05-16 13:46:51 +00:00
224 lines
7.6 KiB
HTML
224 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui, shrink-to-fit=no">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
|
|
|
<title>KubeInvaders 0.2.8</title>
|
|
<style type='text/css'>
|
|
/* Disable user selection to avoid strange bug in Chrome on Windows:
|
|
* Selecting a text outside the canvas, then clicking+draging would
|
|
* drag the selected text but block mouse down/up events to the engine.
|
|
*/
|
|
body {
|
|
|
|
position: fixed; /* Prevent overscroll */
|
|
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
|
|
.canvas-app-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.canvas-app-container:-webkit-full-screen {
|
|
/* Auto width and height in Safari/Chrome fullscreen. */
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
#canvas {
|
|
outline: none;
|
|
border: 0;
|
|
width: 100%;
|
|
vertical-align: bottom;
|
|
}
|
|
|
|
#canvas-container {
|
|
position: relative;
|
|
}
|
|
|
|
canvas:focus, canvas:active {
|
|
outline: none;
|
|
border: 0;
|
|
ie-dummy: expression(this.hideFocus=true);
|
|
-moz-outline-style: none;
|
|
}
|
|
|
|
div {
|
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.canvas-app-progress {
|
|
position: absolute;
|
|
background-color: #d1dbeb;
|
|
height: 6px;
|
|
margin-top: -6px;
|
|
width: 100%;
|
|
}
|
|
|
|
.canvas-app-progress-bar {
|
|
font-size: 12px;
|
|
height: 6px;
|
|
color: rgb(255, 255, 255);
|
|
background-color: #1a72eb;
|
|
text-align: center;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.button {
|
|
background-image: url("data:image/svg+xml,%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' baseProfile='full' width='16' height='16' viewBox='0 0 16 16' version='1.1' xml:space='preserve'%3E%3Ctitle%3Eic-16-fullscreen%3C/title%3E%3Cg id='ic-16-fullscreen' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M3,11.5 C3,11.776 3.224,12 3.5,12 L12.5,12 C12.776,12 13,11.776 13,11.5 L13,4.5 C13,4.224 12.776,4 12.5,4 L3.5,4 C3.224,4 3,4.224 3,4.5 L3,11.5 Z M14,11 L14,13 L12,13 C11.724,13 11.5,13.224 11.5,13.5 C11.5,13.776 11.724,14 12,14 L14.5,14 C14.776,14 15,13.776 15,13.5 L15,11 C15,10.724 14.776,10.5 14.5,10.5 C14.224,10.5 14,10.724 14,11 Z M12,2 C11.724,2 11.5,2.224 11.5,2.5 C11.5,2.776 11.724,3 12,3 L14,3 L14,5 C14,5.276 14.224,5.5 14.5,5.5 C14.776,5.5 15,5.276 15,5 L15,2.5 C15,2.224 14.776,2 14.5,2 L12,2 Z M2,13 L2,11 C2,10.724 1.776,10.5 1.5,10.5 C1.224,10.5 1,10.724 1,11 L1,13.5 C1,13.776 1.224,14 1.5,14 L4,14 C4.276,14 4.5,13.776 4.5,13.5 C4.5,13.224 4.276,13 4,13 L2,13 Z M1,2.5 C1,2.224 1.224,2 1.5,2 L4,2 C4.276,2 4.5,2.224 4.5,2.5 C4.5,2.776 4.276,3 4,3 L2,3 L2,5 C2,5.276 1.776,5.5 1.5,5.5 C1.224,5.5 1,5.276 1,5 L1,2.5 Z ' id='fill_1' fill='%23006fff'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
border-color: transparent;
|
|
float: left;
|
|
color: #006fff;
|
|
padding-left: 50%;
|
|
padding: 0px 0px 0px 20px;
|
|
cursor:pointer;
|
|
background-position: left bottom;
|
|
margin-left: 2px;
|
|
}
|
|
.link, .button {
|
|
font-family: sans-serif;
|
|
font-size: 14px;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-stretch: normal;
|
|
line-height: normal;
|
|
letter-spacing: 0px;
|
|
padding-top: 12px;
|
|
}
|
|
|
|
.buttons-background {
|
|
background-color: #ffffff;
|
|
width: 100%;
|
|
height: 42px;
|
|
}
|
|
|
|
body {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.canvas-app-container {
|
|
background: rgba(250,252,255,1);
|
|
background: -moz-linear-gradient(-45deg, rgba(250,252,255,1) 0%, rgba(250,252,255,1) 50%, rgba(245,249,255,1) 50%, rgba(245,249,255,1) 100%);
|
|
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(250,252,255,1)), color-stop(50%, rgba(250,252,255,1)), color-stop(50%, rgba(245,249,255,1)), color-stop(100%, rgba(245,249,255,1)));
|
|
background: -webkit-linear-gradient(-45deg, rgba(250,252,255,1) 0%, rgba(250,252,255,1) 50%, rgba(245,249,255,1) 50%, rgba(245,249,255,1) 100%);
|
|
background: -o-linear-gradient(-45deg, rgba(250,252,255,1) 0%, rgba(250,252,255,1) 50%, rgba(245,249,255,1) 50%, rgba(245,249,255,1) 100%);
|
|
background: -ms-linear-gradient(-45deg, rgba(250,252,255,1) 0%, rgba(250,252,255,1) 50%, rgba(245,249,255,1) 50%, rgba(245,249,255,1) 100%);
|
|
background: linear-gradient(135deg, rgba(250,252,255,1) 0%, rgba(250,252,255,1) 50%, rgba(245,249,255,1) 50%, rgba(245,249,255,1) 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafcff', endColorstr='#f5f9ff', GradientType=1 );
|
|
}
|
|
|
|
.canvas-app-canvas {
|
|
background-repeat:no-repeat;
|
|
background-position: center center;
|
|
background-image: url("kubeinvaderslogo.png");
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app-container" class="canvas-app-container">
|
|
<div id="canvas-container" class="canvas-app-canvas-container">
|
|
<canvas id="canvas" class="canvas-app-canvas" tabindex="1" width="1920" height="1080"></canvas>
|
|
</div>
|
|
<div class="buttons-background">
|
|
<div class="button" onclick="Module.toggleFullscreen();">Fullscreen</div>
|
|
</div>
|
|
</div>
|
|
<!-- -->
|
|
<script id='engine-loader' type='text/javascript' src="dmloader.js"></script>
|
|
<!-- -->
|
|
<script id='engine-setup' type='text/javascript'>
|
|
var extra_params = {
|
|
archive_location_filter: function( path ) {
|
|
return ("archive" + path + "");
|
|
},
|
|
engine_arguments: [],
|
|
custom_heap_size: 268435456,
|
|
full_screen_container: "#canvas-container",
|
|
disable_context_menu: true
|
|
}
|
|
|
|
Module['onRuntimeInitialized'] = function() {
|
|
Module.runApp("canvas", extra_params);
|
|
};
|
|
|
|
Module["locateFile"] = function(path, scriptDirectory)
|
|
{
|
|
// dmengine*.wasm is hardcoded in the built JS loader for WASM,
|
|
// we need to replace it here with the correct project name.
|
|
if (path == "dmengine.wasm" || path == "dmengine_release.wasm" || path == "dmengine_headless.wasm") {
|
|
path = "KubeInvaders.wasm";
|
|
}
|
|
return scriptDirectory + path;
|
|
};
|
|
|
|
var is_iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
|
|
var buttonHeight = 0;
|
|
buttonHeight = 42;
|
|
// Resize on init, screen resize and orientation change
|
|
function resize_game_canvas() {
|
|
// Hack for iOS when exit from Fullscreen mode
|
|
if (is_iOS) {
|
|
window.scrollTo(0, 0);
|
|
}
|
|
|
|
var app_container = document.getElementById('app-container');
|
|
var game_canvas = document.getElementById('canvas');
|
|
var innerWidth = window.innerWidth;
|
|
var innerHeight = window.innerHeight - buttonHeight;
|
|
var width = 1920;
|
|
var height = 1080;
|
|
var targetRatio = width / height;
|
|
var actualRatio = innerWidth / innerHeight;
|
|
|
|
|
|
|
|
//Fit
|
|
if (actualRatio > targetRatio) {
|
|
width = innerHeight * targetRatio;
|
|
height = innerHeight;
|
|
app_container.style.marginLeft = ((innerWidth - width) / 2) + "px";
|
|
app_container.style.marginTop = "0px";
|
|
}
|
|
else {
|
|
width = innerWidth;
|
|
height = innerWidth / targetRatio;
|
|
app_container.style.marginLeft = "0px";
|
|
app_container.style.marginTop = ((innerHeight - height) / 2) + "px";
|
|
}
|
|
|
|
|
|
app_container.style.width = width + "px";
|
|
app_container.style.height = height + buttonHeight + "px";
|
|
game_canvas.width = width;
|
|
game_canvas.height = height;
|
|
}
|
|
resize_game_canvas();
|
|
window.addEventListener('resize', resize_game_canvas, false);
|
|
window.addEventListener('orientationchange', resize_game_canvas, false);
|
|
</script>
|
|
|
|
<script id='engine-start' type='text/javascript'>
|
|
EngineLoader.load("canvas", "KubeInvaders");
|
|
</script>
|
|
</body>
|
|
</html>
|