Mercurial > maze-src

annotate lab.html @ 0:1eef88068f9f tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
initial commit of maze game source
author ferencd
date Sun, 15 Sep 2019 11:46:47 +0200
parents
children
rev   line source
ferencd@0 1 <!DOCTYPE html>
ferencd@0 2 <html>
ferencd@0 3 <head>
ferencd@0 4 <link rel="image_src" href="/img/dung.png"/>
ferencd@0 5 <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
ferencd@0 6 <meta name="google-site-verification" content="gvy0h6qHfZoCWcfyIilhOm_Kifle93a-bt_xk7zXJp0" />
ferencd@0 7 <meta name="msvalidate.01" content="2211C2467FF4056C4317EC99FD76DCD7" />
ferencd@0 8 <meta name="description" content="Dungeons of Perish: a tiny online maze game for those who love labyrinths">
ferencd@0 9 <meta property="og:image" content="/img/dung.png" />
ferencd@0 10 <meta property="og:url" content="http://dungeons.sh" />
ferencd@0 11 <meta property="og:type" content="game" />
ferencd@0 12 <meta property="og:title" content="Dungeons of Perish" />
ferencd@0 13 <meta charset="UTF-8">
ferencd@0 14 <style>
ferencd@0 15 .newgametable td { background-color:black; cursor: pointer; }
ferencd@0 16 .newgametable td:hover { background-color: lightslategray; };
ferencd@0 17
ferencd@0 18 /* unvisited link */
ferencd@0 19 a:link {
ferencd@0 20 color: white;
ferencd@0 21 }
ferencd@0 22
ferencd@0 23 /* visited link */
ferencd@0 24 a:visited {
ferencd@0 25 color: white;
ferencd@0 26 }
ferencd@0 27
ferencd@0 28 /* mouse over link */
ferencd@0 29 a:hover {
ferencd@0 30 color: blue;
ferencd@0 31 }
ferencd@0 32
ferencd@0 33 /* selected link */
ferencd@0 34 a:active {
ferencd@0 35 color: blue;
ferencd@0 36 }
ferencd@0 37 </style>
ferencd@0 38 <script type="text/javascript" src="/js/requester.js"></script>
ferencd@0 39 <!-- <script type="text/javascript" src="progress.js"></script> -->
ferencd@0 40 <script type="application/javascript">
ferencd@0 41
ferencd@0 42 function get_browser() {
ferencd@0 43 var ua=navigator.userAgent,tem,M=ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
ferencd@0 44 if(/trident/i.test(M[1]))
ferencd@0 45 {
ferencd@0 46 tem=/\brv[ :]+(\d+)/g.exec(ua) || [];
ferencd@0 47 return {name:'IE',version:(tem[1]||'')};
ferencd@0 48 }
ferencd@0 49 if(M[1] === 'Chrome')
ferencd@0 50 {
ferencd@0 51 tem = ua.match(/\bOPR|Edge\/(\d+)/);
ferencd@0 52 if(tem!==null)
ferencd@0 53 {
ferencd@0 54 if(tem[1] !== undefined)
ferencd@0 55 {
ferencd@0 56 return {name:'Opera', version:tem[1]};
ferencd@0 57 }
ferencd@0 58 else
ferencd@0 59 {
ferencd@0 60 if(tem[0] === 'OPR')
ferencd@0 61 {
ferencd@0 62 var ver = tem.input[tem.index + 3 + 1]; // skip OPR and /
ferencd@0 63 ver += tem.input[tem.index + 3 + 1 + 1]; // till Opera reaches 100 this should work ok.
ferencd@0 64 return {name:'Opera', varsion:ver};
ferencd@0 65 }
ferencd@0 66 }
ferencd@0 67
ferencd@0 68 }
ferencd@0 69 }
ferencd@0 70 M=M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
ferencd@0 71 if((tem=ua.match(/version\/(\d+)/i))!==null) {M.splice(1,1,tem[1]);}
ferencd@0 72 return {
ferencd@0 73 name: M[0],
ferencd@0 74 version: M[1]
ferencd@0 75 };
ferencd@0 76 }
ferencd@0 77
ferencd@0 78 var browser=get_browser();
ferencd@0 79 if(browser.name !== "Firefox" && browser.name !== "Chrome" && browser.name !== "Opera" ||
ferencd@0 80 (browser.name === 'Opera' && browser.version < 45
ferencd@0 81 || browser.name === "Chrome" && browser.version < 56
ferencd@0 82 || browser.name === "Firefox" && browser.version < 52) )
ferencd@0 83 {
ferencd@0 84 var message = browser.name + " version " + browser.version +" is not really supported.\n\nWe recommend using one of the following browsers:\n\n \u2022 Firefox > 53 \n \u2022 Chrome > 56 \n \u2022 Opera > 45\n\notherwise you might encounter performance issues.";
ferencd@0 85 window.alert(message);
ferencd@0 86 }
ferencd@0 87
ferencd@0 88 function on_new_game(e, loc)
ferencd@0 89 {
ferencd@0 90 window.location.href = loc;
ferencd@0 91 }
ferencd@0 92 function new_story_game(e)
ferencd@0 93 {
ferencd@0 94 // Yup, next release will contain a story too :)
ferencd@0 95 on_new_game(e, '${story_game_loc}')
ferencd@0 96 }
ferencd@0 97 function new_adventure_game(e)
ferencd@0 98 {
ferencd@0 99 on_new_game(e, '${adv_game_loc}')
ferencd@0 100 }
ferencd@0 101 function new_timechaser_game(e)
ferencd@0 102 {
ferencd@0 103 on_new_game(e, '${timer_game_loc}')
ferencd@0 104 }
ferencd@0 105 function page_loader(e)
ferencd@0 106 {}
ferencd@0 107 function upon_page_load()
ferencd@0 108 {
ferencd@0 109 requestjss("/js/graphics.js");
ferencd@0 110 }
ferencd@0 111 </script>
ferencd@0 112 </head>
ferencd@0 113 <body style="margin: 0; height: 100%; overflow: hidden; " bgcolor="black" onload="${page_loader}">
ferencd@0 114 <div id="fb-root"></div>
ferencd@0 115 <script>(function(d, s, id) {
ferencd@0 116 var js, fjs = d.getElementsByTagName(s)[0];
ferencd@0 117 if (d.getElementById(id)) return;
ferencd@0 118 js = d.createElement(s); js.id = id;
ferencd@0 119 js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10";
ferencd@0 120 fjs.parentNode.insertBefore(js, fjs);
ferencd@0 121 }(document, 'script', 'facebook-jssdk'));</script>
ferencd@0 122
ferencd@0 123 <div id="menu" style="
ferencd@0 124 background-color: black;
ferencd@0 125 width: 100%;
ferencd@0 126 min-height: 31px;
ferencd@0 127 max-height: 31px;
ferencd@0 128 position: absolute;
ferencd@0 129 border-color: black;
ferencd@0 130 top: 0;
ferencd@0 131 left: 0;
ferencd@0 132 margin: 0 auto;
ferencd@0 133 visibility: ${menu_line_visible};
ferencd@0 134 ">
ferencd@0 135 <font color="white" face="Arial">
ferencd@0 136
ferencd@0 137 <table style="border: 0;table-layout: fixed; max-height: 24px; height: 24px;" cellspacing="0" cellpadding="0">
ferencd@0 138 <tr>
ferencd@0 139
ferencd@0 140 <!-- Game ID -->
ferencd@0 141 <td style="border: 0; background-color: rgb(136,139,40); visibility: ${gameid_visible};">
ferencd@0 142 <div style="width: ${gameid_size}; visibility: ${gameid_visible};">
ferencd@0 143 GameID:
ferencd@0 144 </div>
ferencd@0 145 </td>
ferencd@0 146 <td style="border: 0; background-color: rgb(136,139,40); width: ${gameid_size}; visibility: ${gameid_visible};" align="right">
ferencd@0 147 <div style="width: ${gameid_size}; visibility: ${gameid_visible};">
ferencd@0 148 <span style="margin: 0;padding: 0; visibility: ${gameid_visible}" id="gameid" title="${level_statistics}"></span>
ferencd@0 149 </div>
ferencd@0 150 </td>
ferencd@0 151
ferencd@0 152 <!-- Day/Level counter -->
ferencd@0 153 <td style="border: 0; background-color: rgb(22,127,169); visibility: ${levelctr_visible};">
ferencd@0 154 <div style="width: 55px; visibility: ${levelctr_visible};">
ferencd@0 155 ${day_or_level}:
ferencd@0 156 </div>
ferencd@0 157 </td>
ferencd@0 158 <td style="border: 0; background-color: rgb(22,127,169); visibility: ${levelctr_visible};" align="right">
ferencd@0 159 <div style="width: 125px; visibility: ${levelctr_visible};">
ferencd@0 160 <span style="margin: 0;padding: 0; visibility: ${levelctr_visible};" id="levelctr"> </span>
ferencd@0 161 </div>
ferencd@0 162 </td>
ferencd@0 163 <td style="border: 0; background-color: rgb(22,127,169); visibility: ${levelctr_visible};">
ferencd@0 164 <div style="width: 30px;">
ferencd@0 165 &nbsp;
ferencd@0 166 </div>
ferencd@0 167 </td>
ferencd@0 168
ferencd@0 169 <!-- Health -->
ferencd@0 170 <td style="border: 0; background-color: green; visibility: ${health_visible};">
ferencd@0 171 <div style="width: 30px; visibility: ${health_visible};">
ferencd@0 172 <img src="/img/player/heart.png" width="24px" height="24px" title="How much health you have left">
ferencd@0 173 </div>
ferencd@0 174 </td>
ferencd@0 175 <td style="border: 0 solid black; background-color: green; visibility: ${health_visible};">
ferencd@0 176 <div style="width: 102px; visibility: ${health_visible};">
ferencd@0 177 <progress id="lifeprg" value="100" max="100" style="
ferencd@0 178 border-radius: 1px;
ferencd@0 179 height: 23px;
ferencd@0 180 width: 100px;
ferencd@0 181 padding: 0;
ferencd@0 182 background-color: black;
ferencd@0 183 color: green;
ferencd@0 184 -webkit-appearance: none;
ferencd@0 185 ">
ferencd@0 186 </progress>
ferencd@0 187 </div>
ferencd@0 188 </td>
ferencd@0 189 <td style="border: 0; background-color: green; visibility: ${health_visible};">
ferencd@0 190 <div style="width: 30px; visibility: ${health_visible};">
ferencd@0 191 <span style="margin: 0;padding: 0;" id="energy">100</span>
ferencd@0 192 </div>
ferencd@0 193 </td>
ferencd@0 194
ferencd@0 195 <!-- Skeleton -->
ferencd@0 196 <td style="border: 0; background-color: rgb(122,27,69); visibility: ${skeletons_visible}; ">
ferencd@0 197 <div style="width: 30px;">
ferencd@0 198 &nbsp;
ferencd@0 199 </div>
ferencd@0 200 </td>
ferencd@0 201 <td style="border: 0; background-color: rgb(122,27,69); visibility: ${skeletons_visible}; ">
ferencd@0 202 <div style="width: 24px; visibility: ${skeletons_visible};">
ferencd@0 203 <img src="/img/skel/wl/d_wl_1.png" width="24px" height="24px" title="How many skeletons have you killed">
ferencd@0 204 </div>
ferencd@0 205 </td>
ferencd@0 206 <td style="border: 0; background-color: rgb(122,27,69); visibility: ${skeletons_visible}; ">
ferencd@0 207 <div style="width: 20px; visibility: ${skeletons_visible};">
ferencd@0 208 <p style="margin: 0;padding: 0;" id="skels_killed">0</p>
ferencd@0 209 </div>
ferencd@0 210 </td>
ferencd@0 211
ferencd@0 212 <!-- Gold -->
ferencd@0 213 <td style="border: 0; background-color: rgb(39,71,122); visibility: ${gold_visible};">
ferencd@0 214 <div style="width: 3px; visibility: ${gold_visible};">
ferencd@0 215 &nbsp;
ferencd@0 216 </div>
ferencd@0 217 </td>
ferencd@0 218 <td style="border: 0; background-color: rgb(39,71,122); visibility: ${gold_visible};">
ferencd@0 219 <div style="width: 24px; visibility: ${gold_visible};">
ferencd@0 220 <img src="/img/gold.png" width="20px" height="20px" alt="Gold" title="Your accumulated gold">
ferencd@0 221 </div>
ferencd@0 222 </td>
ferencd@0 223 <td style="border: 0; background-color: rgb(39,71,122); visibility: ${gold_visible};">
ferencd@0 224 <div style="width: 20px; visibility: ${gold_visible};">
ferencd@0 225 <p style="margin: 0;padding: 0;" id="gold">0</p>
ferencd@0 226 </div>
ferencd@0 227 </td>
ferencd@0 228
ferencd@0 229
ferencd@0 230 <!-- Ring Indicator -->
ferencd@0 231 <td style="border: 0; background-color: black; ">
ferencd@0 232 <div style="width: 24px; visibility:${equipment_visible};" id = "ring_of_health_div">
ferencd@0 233 <img src="/img/weapons/ring.png" width="24px" height="24px" title="The Ring of Health is yours">
ferencd@0 234 </div>
ferencd@0 235 </td>
ferencd@0 236
ferencd@0 237 <!-- Shoes indicator -->
ferencd@0 238 <td style="border: 0; background-color: black;">
ferencd@0 239 <div style="width: 24px; visibility:${equipment_visible};" id="boots_of_light_div">
ferencd@0 240 <img src="/img/weapons/shoe.png" width="24px" height="24px" title="The Boots of Lightness are yours">
ferencd@0 241 </div>
ferencd@0 242 </td>
ferencd@0 243
ferencd@0 244 <!-- Loading indicator -->
ferencd@0 245 <td style="border: 0; background-color: black;" valign="center">
ferencd@0 246 <div style="width: 100%; visibility:"visible";" id="loader_div">
ferencd@0 247 <img src="/img/loader.gif" width="128x" height="15px" title="Loading">
ferencd@0 248 </div>
ferencd@0 249 </td>
ferencd@0 250
ferencd@0 251
ferencd@0 252 <!-- Maze statistics counter -->
ferencd@0 253 <td style="height:24px; border: 0; background-color: rgb(0,0,0); text-align:right; visibility: ${statis_visible};">
ferencd@0 254 <div style="margin: 0;padding: 0; width: 100px; visibility: ${statis_visible};" id="steps_passed">0</div>
ferencd@0 255 </td>
ferencd@0 256 <!-- Time counter -->
ferencd@0 257 <td style="height:24px; border: 0; width: 100%; background-color: rgb(0,0,0); text-align:right; visibility: ${timer_visible};">
ferencd@0 258 <span style="margin: 0;padding: 0; visibility: ${timer_visible};" id="time_passed">0:0:0</span>
ferencd@0 259 </td>
ferencd@0 260
ferencd@0 261 <!-- Menu -->
ferencd@0 262 <td style="cursor: pointer; height:24px; border: 0; width: 100%; background-color: rgb(0,0,0); text-align:right; ">
ferencd@0 263 <img src="/img/menu.png" height="24px" width="24px" onclick="show_menu();" title="Play a new game">
ferencd@0 264 </td>
ferencd@0 265 <!-- Help -->
ferencd@0 266 <td style="cursor: pointer; height:24px; border: 0; width: 100%; background-color: rgb(0,0,0); text-align:right; ">
ferencd@0 267 <script type="text/javascript">
ferencd@0 268 document.write("<a href=\"mail" + "to:" + new Array("dungeons.sh","gmail.com").join("@") + "\">" + "<img src=\"/img/question.png\" height=\"24px\" width=\"24px\" title=\"Send a raven\">" + "</" + "a>");
ferencd@0 269 </script>
ferencd@0 270 </td>
ferencd@0 271 <!-- FB -->
ferencd@0 272 <td>
ferencd@0 273 <div class="fb-like" data-href="http://dungeons.sh" data-width="24" data-layout="button" data-action="like" data-size="small" data-show-faces="false" data-share="true">
ferencd@0 274 </div>
ferencd@0 275 </td>
ferencd@0 276 </tr>
ferencd@0 277 </table>
ferencd@0 278 </font>
ferencd@0 279 </div>
ferencd@0 280
ferencd@0 281 <div id="canvasdiv" style="width: calc(100% - 2px);
ferencd@0 282 height: calc(100% - 34px); overflow: hidden;
ferencd@0 283 position: absolute;
ferencd@0 284 top: 32px;
ferencd@0 285 left: 0;
ferencd@0 286 border-color: black;
ferencd@0 287 margin: 0 auto;">
ferencd@0 288 <canvas id="canvas" width="10px" height="10px"></canvas>
ferencd@0 289 </div>
ferencd@0 290 <script type="application/javascript">
ferencd@0 291 //var bar = new ProgressBar.Line('#canvasdiv', {easing: 'easeInOut'});
ferencd@0 292 </script>
ferencd@0 293 <div id="messages" style="
ferencd@0 294 position:fixed;
ferencd@0 295 top:60px;
ferencd@0 296 left:calc(50% - 320px);
ferencd@0 297 width:640px;
ferencd@0 298 height: 480px;
ferencd@0 299 z-index: 55;
ferencd@0 300 background-color: black;
ferencd@0 301 border:1px solid black;
ferencd@0 302 border-radius: 25px;
ferencd@0 303 visibility: ${messages_visible};
ferencd@0 304 ">
ferencd@0 305 <img id="goimg" src="/img/dungeonslogo.png">
ferencd@0 306 <center>
ferencd@0 307 <font face="Arial" color="white"><strong>
ferencd@0 308 <div id="sysmenu" style="visibility: ${sysmenu_visible}; height:100%; display:${sysmenu_display};">
ferencd@0 309 <center>
ferencd@0 310 You are ...
ferencd@0 311 </center>
ferencd@0 312 <p>
ferencd@0 313 <table class="newgametable" style="width:400px; height:100%; border: 1px solid white ">
ferencd@0 314 <tr>
ferencd@0 315 <!--
ferencd@0 316 <td onclick="new_story_game(event);">
ferencd@0 317 <center>
ferencd@0 318 <img src="/img/tavern.png" width="48px" height="48px">
ferencd@0 319 <p>
ferencd@0 320 ... having a drink at the tavern while a funny fellow stares at you
ferencd@0 321 </center>
ferencd@0 322 </td>
ferencd@0 323 -->
ferencd@0 324 <td onclick="new_adventure_game(event);">
ferencd@0 325 <center>
ferencd@0 326 <img src="/img/business.png" width="48px" height="48px">
ferencd@0 327 <p>
ferencd@0 328 ... a fearless adventurer in search for fame and fortune
ferencd@0 329 </center>
ferencd@0 330 </td>
ferencd@0 331 <td onclick="new_timechaser_game(event);">
ferencd@0 332 <center>
ferencd@0 333 <img src="/img/clock.png" width="48px" height="48px">
ferencd@0 334 <p>
ferencd@0 335 ... determined to get out from here as fast as possible
ferencd@0 336 </center>
ferencd@0 337 </td>
ferencd@0 338 </tr>
ferencd@0 339 </table>
ferencd@0 340 (PS: You will need a decent browser for this to work)
ferencd@0 341 </p>
ferencd@0 342 <!--
ferencd@0 343 <table style="width:100%; height:100%; border: 1px solid black ">
ferencd@0 344 <tr>
ferencd@0 345 <td>
ferencd@0 346 ...the owner of a GameID:
ferencd@0 347 </td>
ferencd@0 348 <td>
ferencd@0 349 <input type="text">
ferencd@0 350 </td>
ferencd@0 351 <td>
ferencd@0 352 <button type="button">Continue</button>
ferencd@0 353 </td>
ferencd@0 354 </tr>
ferencd@0 355 </table>
ferencd@0 356 -->
ferencd@0 357 </div>
ferencd@0 358 <div id="badbrowser" style="visibility: ${badbrowser_visible}; height:100%; display:${badbrowser_display};">
ferencd@0 359 Seems your browser is not in the list of supported browsers...
ferencd@0 360 We recommend using one of the following browsers:<p>
ferencd@0 361 <ul>
ferencd@0 362 <li>Firefox &gt; 53</li>
ferencd@0 363 <li>Chrome &gt; 56</li>
ferencd@0 364 <li>Opera &gt; 44</li>
ferencd@0 365 </ul>
ferencd@0 366 otherwise you might encounter performance issues... or simply, the game will not work.<p>
ferencd@0 367 </div>
ferencd@0 368 <span id="gotext1" style="visibility: hidden;">
ferencd@0 369 ${gotext1}
ferencd@0 370 <p id="gotext2" style="visibility: hidden;">
ferencd@0 371 ${gotext2}
ferencd@0 372 </p>
ferencd@0 373 <p id="gotext3" style="visibility: hidden;">
ferencd@0 374 ${gotext3}
ferencd@0 375 </p>
ferencd@0 376 <p id="gotext4" style="visibility: hidden;">
ferencd@0 377 ${gotext4}
ferencd@0 378 </p>
ferencd@0 379 <p id="gotext5" style="visibility: hidden;">
ferencd@0 380 ${gotext5}
ferencd@0 381 </p>
ferencd@0 382 </span>
ferencd@0 383 </strong></font>
ferencd@0 384 <center>
ferencd@0 385 <p>&nbsp;<p align="center">
ferencd@0 386 <span id="gospan">
ferencd@0 387 <button id="gobutton" onclick="setup_labyrinth();" style="visibility: hidden;">
ferencd@0 388 Let's get out
ferencd@0 389 </button>
ferencd@0 390 </span>
ferencd@0 391 <p>
ferencd@0 392 <span id="goexploremore" style="visibility: hidden;">
ferencd@0 393 <button id="gonextlevel" onclick="${new_game_type}(window.event);">
ferencd@0 394 New game
ferencd@0 395 </button>
ferencd@0 396 </span>
ferencd@0 397 </center>
ferencd@0 398 </center>
ferencd@0 399
ferencd@0 400 </div>
ferencd@0 401 <form name="n">
ferencd@0 402 <input type=hidden id="gid" name="gid" value="${gid}"/>
ferencd@0 403 <input type=hidden id="lid" name="lid" value="${lid}"/>
ferencd@0 404 </form>