134 lines
5.3 KiB
HTML
Executable File
134 lines
5.3 KiB
HTML
Executable File
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>ASCII Dungeon Crawler</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 20px;
|
|
background-color: #000;
|
|
color: #ccc;
|
|
font-family: "Courier New", monospace;
|
|
}
|
|
|
|
#gameContainer {
|
|
text-align: center;
|
|
}
|
|
|
|
#viewport {
|
|
font-size: 10px;
|
|
line-height: 7px;
|
|
white-space: pre;
|
|
border: 2px solid #0f0;
|
|
display: inline-block;
|
|
padding: 2px;
|
|
border: 5px solid #666;
|
|
font-weight: bold;
|
|
}
|
|
#minimap {
|
|
font-size: 12px;
|
|
line-height: 11.5px;
|
|
white-space: pre;
|
|
display: inline-block;
|
|
padding: 2px;
|
|
border: 5px solid #666;
|
|
background-color: black;
|
|
}
|
|
|
|
#controls {
|
|
margin-top: 20px;
|
|
color: #0f0;
|
|
}
|
|
|
|
#mapInput {
|
|
margin-top: 20px;
|
|
overflow-x: scroll;
|
|
overflow-wrap: normal;
|
|
}
|
|
|
|
textarea {
|
|
background-color: #001100;
|
|
color: #ccc;
|
|
border: 1px solid #0f0;
|
|
font-family: "Courier New", monospace;
|
|
padding: 10px;
|
|
}
|
|
|
|
button {
|
|
background-color: #001100;
|
|
color: #0f0;
|
|
border: 1px solid #0f0;
|
|
padding: 5px 10px;
|
|
font-family: "Courier New", monospace;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #002200;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="gameContainer">
|
|
<div id="viewport"></div>
|
|
<div id="status">orientation</div>
|
|
<div id="minimap"></div>
|
|
|
|
<div id="threejs" style="border: 2px solid green; background-color: #222"></div>
|
|
<div id="mapInput">
|
|
←→↑↓
|
|
<br />
|
|
<textarea id="mapText" rows="10" cols="120" wrap="off">
|
|
############################################################
|
|
############################################################
|
|
############################################################
|
|
## # ################# ########################
|
|
#### # ################### # ## ########################
|
|
## P Z###############Z # ## ################ ::: P(east) Z(a, b, west) Z(b, a, east) // Comments
|
|
## ######################## # ## #### ####
|
|
### E # # ## # #### # # #### ::: E(gnoll)
|
|
#### ################## ## #### # ####
|
|
##### ################### # ## # # #### ####
|
|
######E#################### # #### ::: E(Goblins, gnoll) // These are comments
|
|
###### #################### ########## #### ####
|
|
###### #################### ########## # # #### # # ####
|
|
###### #################### ########## #### # # ####
|
|
###### #################### #################### ####
|
|
###### #################### ############################
|
|
###### #################### # ############################
|
|
###### #################### # ############################
|
|
######E#################### # ############################ ::: E(gnoll)
|
|
###### ## ##### ## ############################ :::
|
|
###### ## Z#### ## # # ############################ ::: Z(c, d, west)
|
|
###### ## ####Z ## ######## ############ ::: Z(d, c, east)
|
|
###### ## ## # ########### ## ######## ############
|
|
######E## # #E ############ ::: E(Dwarves, gnoll) ; E(Gelatinous_Cube, gnoll)
|
|
###### # # # ############
|
|
######### # ## ########### # ######### # ############
|
|
######### # # ########### # ######### # # ############
|
|
######### ########### # ######### ############
|
|
###########Z############### # ######### #### ############### ::: Z(e, f, null)
|
|
########################### # ######### #### ###############
|
|
########################### # ######### #### ###############
|
|
########################### # ######### #### ###############
|
|
########################### # #### ###############
|
|
######################### # #### # # # ######## ###
|
|
########################Z # # ######## # ### ::: Z(f, null, east) // you can teleport here, but you cannot teleport back
|
|
######################### # ##### # # # # ######## ###
|
|
######################### # # ###
|
|
######################### ####################### # ###
|
|
##################################################### ###
|
|
############################################################
|
|
</textarea
|
|
>
|
|
<br /><br />
|
|
<button onclick="game.loadMap()">Load Map</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="./ascii_dungeon_crawler.js"></script>
|
|
</body>
|
|
</html>
|