planck
Version:
2D JavaScript/TypeScript physics engine for cross-platform HTML5 game development
92 lines (83 loc) • 2.8 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="user-scalable=no, width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<link rel="stylesheet" href="/testbed/styles.css" />
<title>Testbed for Planck.js</title>
</head>
<body>
<div class="center">
<div class="header">
<table class="control">
<tr>
<td>
<a id="testbed-play" class="pause"><span class="pause">Pause</span><span class="play">Play</span></a>
</td>
<td>
<a id="testbed-reload">Reload</a>
</td>
<td>
<a id="testbed-prev">Prev</a>
</td>
<td>
<a id="testbed-next">Next</a>
</td>
<td>
<select id="testbed-select">
<option selected disabled hidden value=''>Select...</option>
</select>
</td>
</tr>
</table>
<h3 class="title">Planck.js</h3>
</div>
<canvas id="stage"></canvas>
<div class="output">
<div id="testbed-status"></div>
<div id="testbed-info"></div>
</div>
</div>
<script type="module">
const url = new URL(document.location.toString());
const file = url.searchParams.get("example");
import('/example/' + file + '.ts');
</script>
<script type="module">
import list from '/example/list.json';
{
const reloadButton = document.getElementById('testbed-reload');
const listSelect = document.getElementById('testbed-select');
const nextButton = document.getElementById('testbed-next');
const prevButton = document.getElementById('testbed-prev');
reloadButton.addEventListener('click', function () {
window.location.reload();
});
listSelect.addEventListener('change', function () {
window.location.href = this.options[listSelect.selectedIndex].value;
});
for (const example of list) {
const option = document.createElement('option');
option.value = '?example=' + example;
option.innerHTML = example;
option.selected = window.location.search.indexOf("=" + example) > -1;
listSelect.appendChild(option);
}
nextButton.addEventListener('click', function () {
playNext(+1);
});
prevButton.addEventListener('click', function () {
playNext(-1);
});
function playNext(step) {
const nextIndex = (listSelect.selectedIndex + step + listSelect.options.length) % listSelect.options.length;
const nextOption = listSelect.options[nextIndex];
if (nextOption && nextOption.value) {
window.location.href = nextOption.value;
}
}
}
</script>
</body>
</html>