summaryrefslogtreecommitdiff
path: root/CrossNoodlesJS/index.html
diff options
context:
space:
mode:
authorGravatar Chris Xiong <chirs241097@gmail.com> 2019-02-10 11:16:07 +0800
committerGravatar Chris Xiong <chirs241097@gmail.com> 2019-02-10 11:16:07 +0800
commit9d3c8c0e6e1a7ba43bf3dc19350d1dca68b657a3 (patch)
tree339de0698c13e1763d3361d70fb1266621025c91 /CrossNoodlesJS/index.html
downloadweb-9d3c8c0e6e1a7ba43bf3dc19350d1dca68b657a3.tar.xz
Initial commit.
Diffstat (limited to 'CrossNoodlesJS/index.html')
-rw-r--r--CrossNoodlesJS/index.html157
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>