93 lines
2.9 KiB
HTML
93 lines
2.9 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<title>WebMinecraft</title>
|
|
<script src="app.js"></script>
|
|
|
|
<style>
|
|
body {
|
|
font-family: "Google Sans Text", Arial, Helvetica, sans-serif;
|
|
}
|
|
.params {
|
|
background-color: cadetblue;
|
|
width: fit-content;
|
|
}
|
|
.collapsible {
|
|
padding: 8px;
|
|
cursor: pointer;
|
|
border: none;
|
|
text-align: left;
|
|
width: 100%;
|
|
font-size: medium;
|
|
}
|
|
.paramContent {
|
|
display: flex;
|
|
overflow-y: hidden;
|
|
height: 0px;
|
|
}
|
|
.paramPanel {
|
|
padding: 10px;
|
|
background-color: #eeeeee;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<canvas id="game" width="1024" height="768"></canvas>
|
|
<div id="fps"></div>
|
|
|
|
<div class="params">
|
|
<button class="collapsible">Parameters</button>
|
|
<div class="paramContent">
|
|
<div class="paramPanel">
|
|
<h3>Light</h3>
|
|
<h4>Direction</h4>
|
|
<p>
|
|
x:
|
|
<input type="range" min="-100" max="100" value="50" class="slider" id="lightx" />
|
|
</p>
|
|
<p>
|
|
y:
|
|
<input type="range" min="-100" max="100" value="50" class="slider" id="lighty" />
|
|
</p>
|
|
<p>
|
|
z:
|
|
<input type="range" min="-100" max="100" value="50" class="slider" id="lightz" />
|
|
</p>
|
|
<p>
|
|
<div id="lightDirVec"></div>
|
|
</p>
|
|
<h4>Ambiant light amount</h4>
|
|
<p>
|
|
<input type="range" min="0" max="100" value="50" class="slider" id="ambiant" />
|
|
</p>
|
|
<h4>Sky color</h4>
|
|
<p>
|
|
r:
|
|
<input type="range" min="0" max="255" value="115" class="slider" id="skyr" />
|
|
</p>
|
|
<p>
|
|
g:
|
|
<input type="range" min="0" max="255" value="191" class="slider" id="skyg" />
|
|
</p>
|
|
<p>
|
|
b:
|
|
<input type="range" min="0" max="255" value="255" class="slider" id="skyb" />
|
|
</p>
|
|
<p>
|
|
<div id="skyColor"></div>
|
|
</div>
|
|
<div class="paramPanel">
|
|
<h3>Physics</h3>
|
|
<p>
|
|
Gravity: <span id="gravityValue"></span><input type="range" min="-100" max="100" value="-10" class="slider" id="gravity" />
|
|
</p>
|
|
<p>
|
|
Jump force: <span id="jumpForceValue"></span><input type="range" min="-100" max="100" value="10" class="slider" id="jumpForce" />
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |