120 lines
3.8 KiB
HTML
120 lines
3.8 KiB
HTML
<!doctypehtml>
|
|
<html lang=EN-us>
|
|
|
|
<head>
|
|
<meta charset=utf-8>
|
|
<meta content="text/html; charset=utf-8" http-equiv=Content-Type>
|
|
<title>Jelly Rescue</title>
|
|
<meta content="Jelly Rescue" name=title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
|
|
</head>
|
|
<style>
|
|
html {
|
|
width: 100vw;
|
|
height:100vh;
|
|
background: #0C0D14;
|
|
}
|
|
body {
|
|
margin: 0px;
|
|
width:100%;
|
|
height:100%;
|
|
display:flex;
|
|
}
|
|
canvas {
|
|
margin:auto;
|
|
cursor:none;
|
|
background: black;
|
|
}
|
|
.media-player {
|
|
margin:auto;
|
|
padding: 0.5rem 0.5rem 0.5rem 0.5rem;
|
|
border-radius: 0.4rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: rgb(33, 34, 51);
|
|
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.4);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.game-title {
|
|
color:ivory;
|
|
margin:0.3rem 0.5rem 0.8rem 0.5rem;
|
|
font-size: larger;
|
|
font-family: 'Press Start 2P', cursive;
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
|
|
user-select: none;
|
|
}
|
|
|
|
.links {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin:1.2rem 0.5rem 0 0.4rem;
|
|
}
|
|
|
|
a {
|
|
height: 24px;
|
|
}
|
|
|
|
.bi-github {
|
|
margin-top:0.1rem;
|
|
width: 24px;
|
|
height: 24px;
|
|
fill: white;
|
|
}
|
|
.bi-github:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
@media (max-width: 643px) {
|
|
.media-player {
|
|
width: 100%; /* Make media-player take full width */
|
|
}
|
|
canvas {
|
|
width:100%;
|
|
}
|
|
.game-title {
|
|
font-size:medium;
|
|
}
|
|
}
|
|
</style>
|
|
<body>
|
|
<div class="media-player">
|
|
<canvas id="canvas" width="640" height="544"></canvas>
|
|
<div class="links">
|
|
<span class="game-title">Jelly Rescue</span>
|
|
<a href="https://github.com/Ninjaws/WebJelly-Rescue" class="github-link" target="_blank">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
|
|
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<p id="output" />
|
|
<script>
|
|
var Module = {
|
|
print: (function() {
|
|
var element = document.getElementById('output');
|
|
if (element) element.value = '';
|
|
return function(text) {
|
|
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
|
|
console.log(text);
|
|
if (element) {
|
|
element.value += text + "\n";
|
|
element.scrollTop = element.scrollHeight;
|
|
}
|
|
};
|
|
})(),
|
|
canvas: (function() {
|
|
var canvas = document.getElementById('canvas');
|
|
return canvas;
|
|
})()
|
|
};
|
|
|
|
window.onload = function() {
|
|
document.getElementById('canvas').focus();
|
|
};
|
|
</script>
|
|
<script src=game.js async></script>
|
|
</body>
|
|
|
|
</html>
|