110 lines
4.1 KiB
HTML
110 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="transform.js" defer></script>
|
|
<script src="collision.js" defer></script>
|
|
<script src="input.js" defer></script>
|
|
<script src="player.js" defer></script>
|
|
<script src="environment.js" defer></script>
|
|
<script src="debug.js" defer></script>
|
|
<script src="engine.js" defer></script>
|
|
<style>
|
|
.debug[data-state="running"] {
|
|
background-color: rgb(30,200,30);
|
|
}
|
|
.debug[data-state="halted"] {
|
|
background-color: rgb(200,30,30);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body
|
|
style="margin:0;"
|
|
>
|
|
|
|
<!-- DEBUG TOOLS -->
|
|
<div class="debug"
|
|
id="toggle-engine-container"
|
|
style="display:flex;border: 2px solid rgb(200,0,0);padding:2px;"
|
|
>
|
|
<label for="toggle-engine"
|
|
class="debug">
|
|
the engine's going to keep processing as long as this window is open,
|
|
unless you toggle it here. warning: the engine gets weird when woken
|
|
from complete halt.
|
|
</label>
|
|
<button class="debug"
|
|
id="toggle-engine"
|
|
data-description="the actual button that toggles the engine"
|
|
data-state="running"
|
|
type="button"
|
|
>toggle engine</button>
|
|
</div>
|
|
|
|
<div class="debug"
|
|
id="pointer"
|
|
data-description="pointer used for debugging positioning things"
|
|
style="position:absolute;width:5px;height:5px;top:50vh;left:50vw;
|
|
border: 5px solid rgb(127,0,0);
|
|
background-color:rgb(255,255,255);"
|
|
></div>
|
|
<!-- /DEBUG TOOLS -->
|
|
|
|
<div class="player"
|
|
data-description="this is the player character"
|
|
data-transform="[1,0,0,1,0,0]"
|
|
data-collision-layers="player"
|
|
data-collision-mask="environment"
|
|
id="player"
|
|
style="position:absolute;width:50px;height:50px;
|
|
background-color:rgba(50,0,127,0.7);"
|
|
></div>
|
|
<article
|
|
class="level"
|
|
id="test"
|
|
data-description="a test level for developing the engine"
|
|
>
|
|
<!-- testing collision -->
|
|
<div class="environment wall"
|
|
data-description="a wall"
|
|
data-collision-layers="environment"
|
|
data-collision-mask="player"
|
|
style="width:500px;height:25px;transform:matrix(1,0,0,1,0,300);
|
|
background-color:rgba(127,100,0,0.7);"
|
|
>~~this is a wall~~ (no collision handling yet)
|
|
</div>
|
|
|
|
<!-- testing radio button: collision handling not implemented yet -->
|
|
<form
|
|
class=""
|
|
id="test-form"
|
|
data-description="testing using radio input to move around"
|
|
style="transform:matrix(1,0,0,1,10,600);max-width:80vw;"
|
|
>
|
|
<fieldset>
|
|
<legend>
|
|
try selecting a radio button to teleport
|
|
(not implemented yet)
|
|
</legend>
|
|
<div
|
|
style="display:flex;flex-direction:column;"
|
|
>
|
|
<input
|
|
type="radio" id="tut-rad-1" name="tut-rad"
|
|
value="tut-rad-1"
|
|
style="transform:matrix(1,0,0,1,100,200);"
|
|
></input>
|
|
<input
|
|
type="radio" id="tut-rad-2" name="tut-rad"
|
|
value="tut-rad-2" ></input>
|
|
<input
|
|
type="radio" id="tut-rad-3" name="tut-rad"
|
|
value="tut-rad-3" ></input>
|
|
<input
|
|
type="radio" id="tut-rad-4" name="tut-rad"
|
|
value="tut-rad-4" ></input>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</article>
|
|
</body>
|
|
</html>
|