-
Notifications
You must be signed in to change notification settings - Fork 72
/
play.htm
156 lines (148 loc) · 6.09 KB
/
play.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html>
<head>
<title>Cube Engine v1.0</title>
<meta name="description" content="Cube Engine: an HTML5 3D engine">
<meta charset="utf-8">
<link rel="shortcut icon" href="media/logo.png">
<link type="text/css" rel="stylesheet" href="style/style.css">
<script type="text/javascript" src="js/player.js"></script>
<script type="text/javascript" src="js/save.js"></script>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="js/node.js"></script>
<script type="text/javascript" src="js/world.js"></script>
<script type="text/javascript" src="js/render.js"></script>
<script type="text/javascript" src="js/TouchControl.js"></script>
<script type="text/javascript">
toggleJoystick = function (elem) {
if (elem.style.display === "none") {
elem.style.display = "block";
} else {
elem.style.display = "none";
}
}
</script>
</head>
<body>
<div id="controls">
<h1>Cube Engine v1.0</h1>
<ul>
<li><a href="https://github.com/Nurgak/Cube-engine">Download the source</a></li>
</ul>
<h2>Controls</h2>
<ul>
<li>WASD: Movement</li>
<li>Pg. Up: Up</li>
<li>Pg. Down: Down</li>
<li>Arrows: Rotation</li>
<li>Space: Jump</li>
</ul>
<h2>Options</h2>
<ul>
<li><u>H</u>UD: <input type="checkbox" checked="yes" onchange="renderer.hud = this.checked;" accesskey="h"></li>
<li><u>G</u>ravity: <input type="checkbox" checked="yes" onchange="player.gravity = this.checked;" accesskey="g"></li>
<li><u>C</u>ollision detection: <input type="checkbox" checked="yes" onclick="player.collision = this.checked;" accesskey="c"></li>
<li><u>P</u>erformace graph: <input type="checkbox" onchange="renderer.graph = this.checked;" accesskey="p"></li>
<li><u>M</u>ap: <input type="checkbox" onchange="renderer.map = this.checked;" accesskey="m"></li>
<li><input type="button" value="Lock pointer" onclick="renderer.lockPointer();"></li>
<li><input type="button" value="Joystick" onclick="toggleJoystick(document.getElementById('joystick'))"></li>
<li>Focal length:<br>
<input type="range" min="100" max="1000" value="500" onchange="renderer.focalLength = this.value">
</li>
<li>Render distance:<br>
<input type="range" min="20" max="1024" value="100" onchange="renderer.changeRenderDist(this.value);">
</li>
<li><u>R</u>ender mode:<br>
<select onchange="renderer.renderMode = this.value;" accesskey="r">
<option value="0">Plain color</option>
<option value="1" selected>Textured</option>
</select>
</li>
<li><u>T</u>ype:<br>
<select id="type" accesskey="t">
<optgroup label="Construction">
<option value="dirt">Dirt</option>
<option value="grass">Grass</option>
<option value="stone">Stone</option>
<option value="cobblestone">Cobblestone</option>
<option value="wood">Wood</option>
<option value="planks">Wooden planks</option>
<option value="sand">Sand</option>
<option value="sandstone">Sand stone</option>
<option value="glass">Glass</option>
<option value="bricks">Brick</option>
<option value="water">Water</option>
<option value="ice">Ice</option>
<option value="snow">Snow</option>
<option value="leaves">Leaves</option>
<option value="lava">Lava</option>
<option value="gravel">Gravel</option>
<option value="obsidian">Obsidian</option>
<option value="stoneblock">Stone block</option>
<option value="cobweb">Cobweb</option>
</optgroup>
<optgroup label="Cloth">
<option value="white">White</option>
<option value="black">Black</option>
<option value="darkgray">Dark gray</option>
<option value="gray">Gray</option>
<option value="red">Red</option>
<option value="rose">Rose</option>
<option value="green">Green</option>
<option value="lime">Lime</option>
<option value="brown">Brown</option>
<option value="yellow">Yellow</option>
<option value="blue">Blue</option>
<option value="lightblue">Light blue</option>
<option value="purple">Purple</option>
<option value="magneta">Magneta</option>
<option value="cyan">Cyan</option>
<option value="orange">Orange</option>
</optgroup>
</select>
</li>
<!--<li><input type="button" value="Screenshot" onclick="document.location = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');"></li>-->
<li>Generate world<br>
Seed <input type="text" id="seed" size="4" value="3">
<input type="button" value="Generate" onclick="world.newMap(document.getElementById('seed').value); player.spawn();">
</li>
<li>Save as<br>
<select id="saveas">
<option value="world1">world1</option>
<option value="world2">world2</option>
<option value="world3">world3</option>
<option value="world4">world4</option>
<option value="world5">world5</option>
</select>
<br>
<input type="button" value="Save" onclick="save.saveLocally(player);">
<input type="button" value="Save to file" onclick="save.saveToFile(player);">
</li>
<li>Load<br>
<select id="load">
<option value="world1">world1</option>
<option value="world2">world2</option>
<option value="world3">world3</option>
<option value="world4">world4</option>
<option value="world5">world5</option>
</select><br>
<input type="button" value="Load" onclick="save.loadLocalSave();">
<input type="button" value="Remove" onclick="save.removeLocalSave();">
</li>
<li>Load file<br>
<input type="button" value="Load file" onclick="document.getElementById('worldFile').click();">
<form id="upload"><input type="file" id="worldFile" onchange="save.loadFromFile(this.files[0]);" style="visibility: hidden;"></form>
</li>
</ul>
</div>
<canvas id="canvas" tabindex="1"></canvas>
<joystick id="joystick" style="display: none;"></joystick>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var world = new World(3);
var player = new Player(world);
var renderer = new Renderer(canvas, world, player);
var save = new Save(world, player);
</script>
</body>
</html>