<!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>