diff options
Diffstat (limited to 'CrossNoodlesJS/index.html')
| -rw-r--r-- | CrossNoodlesJS/index.html | 157 |
1 files changed, 157 insertions, 0 deletions
diff --git a/CrossNoodlesJS/index.html b/CrossNoodlesJS/index.html new file mode 100644 index 0000000..eafa550 --- /dev/null +++ b/CrossNoodlesJS/index.html @@ -0,0 +1,157 @@ +<!DOCTYPE html> +<html> +<head> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> +<title>Chrisoft::Cross Noodles</title> +<link rel="icon" href="/favicon.png"> +<link rel="stylesheet" type="text/css" href="/common.css"> +<script type="text/javascript" src="crossnoodles.js"></script> +<script type="text/javascript" src="wglmath.js"></script> +<style> +div.ndiv{ + display:none; + font-size:3em; + position:absolute; + top:0px; + left:0px; + width:100%; + padding-top:0.32em; + padding-bottom:0.32em; + background-color:rgba(0,0,0,0.3); + text-align:center; + vertical-align:middle; + color:#fff; + z-index:-1; +} +div.nbdiv{ + display:block; + font-size:2em; + width:15em; + padding-top:0.32em; + padding-bottom:0.32em; + position:absolute; + left:50%; + transform:translate(-50%,0%); + -webkit-transform:translate(-50%,0%); + text-align:center; + color:#fff; +} +div#resetbtn,div#p1sbtn{ +background-color:rgba(0,255,0,0.6); +} +div#resetbtn:hover,div#p1sbtn:hover{ +background-color:rgba(0,255,0,0.7); +} +div#resetbtn:active,div#p1sbtn:active{ +background-color:rgba(0,255,0,0.8); +} +div#easybtn{ +background-color:rgba(0,255,0,0.6); +} +div#easybtn:hover{ +background-color:rgba(0,255,0,0.7); +} +div#easybtn:active{ +background-color:rgba(0,255,0,0.8); +} +div#normalbtn{ +background-color:rgba(222,217,0,0.6); +} +div#normalbtn:hover{ +background-color:rgba(222,217,0,0.7); +} +div#normalbtn:active{ +background-color:rgba(222,217,0,0.8); +} +div#hardbtn{ +background-color:rgba(255,128,0,0.6); +} +div#hardbtn:hover{ +background-color:rgba(255,128,0,0.7); +} +div#hardbtn:active{ +background-color:rgba(255,128,0,0.8); +} +div#extremebtn{ +background-color:rgba(255,0,0,0.6); +} +div#extremebtn:hover{ +background-color:rgba(255,0,0,0.7); +} +div#extremebtn:active{ +background-color:rgba(255,0,0,0.8); +} +div#easy2btn{ +background-color:rgba(0,0,0,0.6); +} +div#easy2btn:hover{ +background-color:rgba(0,0,0,0.7); +} +div#easy2btn:active{ +background-color:rgba(0,0,0,0.8); +} +div#survivalbtn{ +background-color:rgba(192,192,192,0.6); +} +div#survivalbtn:hover{ +background-color:rgba(192,192,192,0.7); +} +div#survivalbtn:active{ +background-color:rgba(192,192,192,0.8); +} +</style> +</head> +<body onload="init();"> +<script type="text/javascript" language="javascript"> +link = document.createElement("link"); +var thm=document.cookie.replace(new RegExp("(?:(?:^|.*;\\s*)thm\\s*\\=\\s*([^;]*).*$)|^.*$"),"$1"); +switch(thm) +{ + case "day": + link.href="colors-day.css"; + break; + case "night": + link.href="colors-night.css"; + break; + case "auto": + default: + var c=new Date(); + if(c.getHours()>=6&&c.getHours()<18) + link.href = "colors-day.css"; + else + link.href = "colors-night.css"; + break; +} +link.type="text/css"; +link.rel="stylesheet"; +link.media="screen,print"; +document.getElementsByTagName("head")[0].appendChild(link); +</script> +<div class="TText" style="font-size:2em;"><a href="../">Chrisoft</a>::Cross Noodles</div> +<canvas id="glCvs" width="800" height="450" style="position:absolute;top:4em;left:50%;transform:translate(-50%,0%);-webkit-transform:translate(-50%,0%);"></canvas> +<div id="containerDiv" class="TText" style="width:800px;height:450px;position:absolute;top:4em;left:50%;transform:translate(-50%,0%);-webkit-transform:translate(-50%,0%);"> + <div id="healthDiv" style="display:none;width:100%;padding-top:0.1em;padding-bottom:0.1em;position:absolute;bottom:0px;left:0px;background-color:rgba(0,255,0,0.6);color:#fff;font-size:1em;">health</div> + <div id="HUDDiv" style="display:none;width:100%;padding-top:0.1em;padding-bottom:0.1em;postion:absolute;top:0px;left:0px;background-color:rgba(0,0,0,0.6);color:#fff;font-size:1em;text-align:center;z-index:1;">HUD</div> + <div id="winDiv" class="ndiv">You Win!</div> + <div id="loseDiv" class="ndiv">You are DEAD!</div> + <div id="resetbtn" class="nbdiv" style="display:none;top:34%;" onclick="reset();">Play Again</div> + <div id="p1sbtn" class="nbdiv" style="display:none;top:50%;" onclick="p1s();">+1s!!</div> + <div id="selDiv" class="ndiv" style="display:block;font-size:2.5em;">Select Difficulty</div> + <div id="easybtn" class="nbdiv" style="top:16%;" onclick="gameInit(Math.random()*11+10,0,'Easy');">Easy</div> + <div id="normalbtn" class="nbdiv" style="top:30%;" onclick="gameInit(Math.random()*21+20,0,'Normal');">Normal</div> + <div id="hardbtn" class="nbdiv" style="top:44%;" onclick="gameInit(Math.random()*41+40,5,'Hard');">Hard</div> + <div id="extremebtn" class="nbdiv" style="top:58%;" onclick="gameInit(Math.random()*81+80,10,'Extreme!!');">Extreme!!</div> + <div id="easy2btn" class="nbdiv" style="top:72%;" onclick="gameInit(Math.random()*41+160,10,'Too Simple?');">Too Simple?</div> + <div id="survivalbtn" class="nbdiv" style="top:86%;" onclick="survivalInit();">Sometimes Naïve!</div> + <div id="brutesw" class="nbdiv" style="top:44%;width:8em;left:85%;background-color:rgba(192,192,192,0.6);">Brute mode</div> + <div style="position:absolute;top:100%;" class="TText"> + Replica of the old "Cross Noodles" game I created years ago. Written in html+javascript, uses WebGL.<br> + This page may burn your CPU if you keep it open!<br> + Guide: Use WASD to control the cube. Avoid the lines and try to reach the opposite corner! Green balls restore your health.<br> + By enabling "Brute mode", you guarantee that you will not touch a single line twice!<br> + The original "Cross Noodles" is <a href="../Cross_Noodles.html">here</a>.<br> + License: <a href="https://opensource.org/licenses/MIT">The MIT License.</a> + </div> +</div> +</body> +</html> |