-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
99 lines (96 loc) · 7.4 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>RPG Engine</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">-->
<link rel="stylesheet" href="w3.css">
<link rel="icon" href="Assets/Image/favicon.ico">
</head>
<body style="background-color:black;">
<!-- Game -->
<div class="w3-content w3-display-container w3-center">
<!-- Game Canvas -->
<canvas id="game" width=800 height=450></canvas>
<!-- Tileset Canvas -->
<canvas id="tileset" width=400 height=400></canvas>
<!-- Start Button -->
<div onclick="startButton()" id="startButton" class="w3-padding w3-button w3-round-xxlarge w3-jumbo w3-display-middle w3-orange w3-hover-shadow"><b>Start</b></div>
<!--
<div class="w3-padding w3-display-topleft w3-orange">Display</div>
<div class="w3-padding w3-display-topmiddle w3-orange">Display</div>
<div class="w3-padding w3-display-topright w3-orange">Display</div>
<div class="w3-padding w3-display-left w3-orange">Display</div>
<div class="w3-padding w3-display-right w3-orange">Display</div>
<div class="w3-padding w3-display-bottomleft w3-orange">Display</div>
<div class="w3-padding w3-display-bottommiddle w3-orange">Display</div>
<div class="w3-padding w3-display-bottomright w3-orange">Display</div>
-->
</div>
<!-- Editor Buttons -->
<div class="w3-content w3-center w3-hide" id="editorButtons">
<div class="w3-container">
<!--<button class="w3-button w3-orange" onclick="enterFullscreen()">Fullscreen</button>-->
<button class="w3-button w3-red" id="debugButton" onclick="debugButton()">Debug</button>
<button class="w3-button w3-red" id="guiButton" onclick="guiButton()">GUI</button>
<button class="w3-button w3-red" id="drawButton" onclick="drawButton()">Draw</button>
<!-- Layer Selection -->
<div class="w3-dropdown-click">
<button id="currentLayer" onclick="openlayerButton()" class="w3-button w3-blue">Select Layer</button>
<div id="layerSelection" class="w3-dropdown-content w3-bar-block w3-border">
<a id="layer1Button" onclick="layerButton(0)" class="w3-bar-item w3-button w3-blue">Layer 1</a>
<a id="layer2Button" onclick="layerButton(1)" class="w3-bar-item w3-button w3-blue">Layer 2</a>
<a id="layer3Button" onclick="layerButton(2)" class="w3-bar-item w3-button w3-blue">Layer 3</a>
<a id="collisionLayerButton" onclick="layerButton(3)" class="w3-bar-item w3-button w3-blue">Collision</a>
</div>
</div>
<!-- Collision Restriction Selection -->
<div class="w3-dropdown-click">
<image class="w3-image w3-hover-dark-grey w3-hide" id="currentRestriction" onclick="openCollisionButton()" src="Assets/Image/Restriction Arrows/up_down_left_right.png"></image>
<div id="restrictionSelection" class="w3-dropdown-content w3-bar-block w3-border w3-black">
<image id="restriction1" class="w3-image w3-hover-dark-grey" src="Assets/Image/Restriction Arrows/no.png" onclick="restrictionButton(0, this.src)"></image>
<image id="restriction2" class="w3-image w3-hover-dark-grey" src="Assets/Image/Restriction Arrows/up.png" onclick="restrictionButton(1, this.src)"></image>
<image id="restriction3" class="w3-image w3-hover-dark-grey" src="Assets/Image/Restriction Arrows/down.png" onclick="restrictionButton(2, this.src)"></image>
<image id="restriction4" class="w3-image w3-hover-dark-grey" src="Assets/Image/Restriction Arrows/left.png" onclick="restrictionButton(3, this.src)"></image>
<image id="restriction5" class="w3-image w3-hover-dark-grey" src="Assets/Image/Restriction Arrows/right.png" onclick="restrictionButton(4, this.src)"></image>
<image id="restriction6" class="w3-image w3-hover-dark-grey" src="Assets/Image/Restriction Arrows/up_down.png" onclick="restrictionButton(5, this.src)"></image>
<image id="restriction7" class="w3-image w3-hover-dark-grey" src="Assets/Image/Restriction Arrows/up_left.png" onclick="restrictionButton(6, this.src)"></image>
<image id="restriction8" class="w3-image w3-hover-dark-grey" src="Assets/Image/Restriction Arrows/up_right.png" onclick="restrictionButton(7, this.src)"></image>
<image id="restriction9" class="w3-image w3-hover-dark-grey" src="Assets/Image/Restriction Arrows/down_left.png" onclick="restrictionButton(8, this.src)"></image>
<image id="restriction10" class="w3-image w3-hover-dark-grey" src="Assets/Image/Restriction Arrows/down_right.png" onclick="restrictionButton(9, this.src)"></image>
<image id="restriction11" class="w3-image w3-hover-dark-grey" src="Assets/Image/Restriction Arrows/left_right.png" onclick="restrictionButton(10, this.src)"></image>
<image id="restriction12" class="w3-image w3-hover-dark-grey" src="Assets/Image/Restriction Arrows/up_down_left.png" onclick="restrictionButton(11, this.src)"></image>
<image id="restriction13" class="w3-image w3-hover-dark-grey" src="Assets/Image/Restriction Arrows/up_down_right.png" onclick="restrictionButton(12, this.src)"></image>
<image id="restriction14" class="w3-image w3-hover-dark-grey" src="Assets/Image/Restriction Arrows/up_left_right.png" onclick="restrictionButton(13, this.src)"></image>
<image id="restriction15" class="w3-image w3-hover-dark-grey" src="Assets/Image/Restriction Arrows/down_left_right.png" onclick="restrictionButton(14, this.src)"></image>
<image id="restriction16" class="w3-image w3-hover-dark-grey" src="Assets/Image/Restriction Arrows/up_down_left_right.png" onclick="restrictionButton(15, this.src)"></image>
</div>
</div>
<br>
<span class="w3-button w3-orange" id="activeCanvas">Off Canvas</span>
<span class="w3-button w3-orange" id="canvasXY"></span>
<br>
<span class="w3-button w3-yellow">Selected Tile</span>
<span class="w3-button w3-yellow" id="selectedTile"></span>
<span class="w3-button w3-pink">Clicked Tile</span>
<span class="w3-button w3-pink" id="clickedXY"></span>
<br>
<span class="w3-button w3-orange" id="clicked/touched">False</span>
<span class="w3-button w3-orange" id="mtp">False</span>
<br>
<!--
<span class="w3-button w3-yellow">Change Tileset</span>
<input class="w3-button w3-yellow" type="string" id="tilesetFile" onchange="loadImage(value)" value="/Assets/Image/xyz.png"><br>
-->
</div>
</div>
<!-- Footer -->
<footer class="w3-container w3-black w3-padding-16">
<div class="w3-center w3-small w3-opacity">
<a href=https://thenyanta.github.io target="_parent"><img src="https://thenyanta.github.io/images/link.png" alt="Back"></a>
</div>
</footer>
<script id="gameScripts" src="scriptLoader.js"></script>
</body>
</html>