<!DOCTYPE html>
<html>
<head>
</head>
<body onLoad = 'align_sticks();load_initial_values();generate_enemies(10)' background = ''>
<div id='sight_container'>
<div id='sticktop' class = 'stick'></div>
<div id='stickleft' class = 'stick'></div>
<div id='stickbottom' class = 'stick'></div>
<div id='stickright' class = 'stick'></div>
</div>
<div id='glass'>
<div id='scoresheet' class='sheet'>0</div>
<div id='timesheet' class='sheet'>0</div>
</div>
<style>
#sight_container
{
width:70px;
height:70px;
position:absolute;
border:2px solid;
border-radius:200px;
}
.stick
{
height:60px;
width:1px;
border:1px solid;
position:absolute;
transition:left 0.3s, top 0.3s, height 0.3s;
}
#glass
{
position:absolute;
}
.enemy
{
width:50px;
height:50px;
background-color:red;
border:1px solid;
box-shadow: 10px 10px 5px #888888;
-webkit-transform-origin:bottom left;
transition:0.3s;
}
.enemy:hover{cursor:pointer}
.counters
{
height:20px;
position:absolute;
text-align:center;
transition:0.5s;
transform-origin:center;
}
#scoresheet
{
width:100px;
height:50px;
left:0;right:0;margin:auto;
text-align:center;
}
#timesheet
{
width:200px;
height:50px;
left:60%;
}
.sheet
{
position:absolute;
font-size:250%;
transition:0.5s;
border:1px solid;
box-shadow: 5px 5px 5px #888888;
}
</style>
<script>
var score = 0;
var started = false;
var time = 0;
var whole;
var mili;
var minor_time = 0;
document.onmousemove = function(e)
{
var x = e.pageX;
var y = e.pageY;
var el = document.getElementById('sight_container');
el.style.left = x - el.offsetWidth/2 + 'px';
document.getElementById('sight_container').style.top = y - el.offsetHeight/2 + 'px';
};
document.body.onclick = function(e)
{
if(e.target.id.indexOf('killable') > - 1)
{
kill(document.getElementById(e.target.id));
if(check_for_end()){clearInterval(mili);}
}
else
{
pts(-10);
}
start();
var el = document.createElement('div');
el.style.position = 'absolute';
el.style.top = e.pageY -10 + 'px';
el.style.left = e.pageX -10 + 'px';
el.style.width = 5 + 'px';
el.style.height = 5 + 'px';
el.style.borderRadius = 200 + 'px';
el.style.backgroundColor = 'white';
document.getElementById('glass').appendChild(el);
};
function ontarget()
{
var st = document.getElementById('sticktop');
var sl = document.getElementById('stickleft');
var sb = document.getElementById('stickbottom');
var sr = document.getElementById('stickright');
var con = document.getElementById('sight_container');
st.style.top = -st.offsetHeight + 'px';
sl.style.left = -40 + 'px';
sb.style.top = Math.floor(con.offsetHeight)-4 + 'px';
sr.style.left = con.offsetWidth - 4 + 40 - sr.offsetWidth + 'px';
colorchildren('sight_container','red');
}
function align_sticks()
{
var sl = document.getElementById('stickleft');
var sr = document.getElementById('stickright');
var sb = document.getElementById('stickbottom');
var st = document.getElementById('sticktop');
var con = document.getElementById('sight_container');
sl.style.left = -sl.offsetWidth + 'px';
sl.style.top = -(sl.offsetHeight - con.offsetHeight)/2 + 'px';
sr.style.left = 100 + '%';
sr.style.top = -(sr.offsetHeight - con.offsetHeight)/2 + 'px';
st.style.top = -st.offsetHeight + (con.offsetHeight/3) + 'px';
st.style.left = con.offsetWidth/2 - st.offsetWidth/2 + 'px';
sb.style.top = con.offsetHeight - (con.offsetHeight/3) + 'px';
sb.style.left = con.offsetWidth/2 - sb.offsetWidth/2 + 'px';
colorchildren('sight_container','black');
}
function load_initial_values()
{
document.getElementById('glass').style.width = window.innerWidth - 100 + 'px';
document.getElementById('glass').style.height = window.innerHeight - 100 + 'px';
}
function generate_enemies(amt)
{
for(i=0;i<=amt-1;i++)
{
var en = document.createElement('div');
var prnt = document.getElementById('glass');
en.style.position = 'absolute';
en.style.top = GRN(0,prnt.offsetHeight) + 'px';
en.style.left = GRN(0,prnt.offsetWidth) + 'px';
en.className = 'enemy';
en.id = 'killable'+i;
en.onmouseover = function(e){ontarget();};
en.onmouseout = function(e){align_sticks();};
prnt.appendChild(en);
}
}
function GRN(min,max)
{
return (Math.floor(Math.random() * (max - min + 1)) + min);
}
function kill(el)
{
if(GRN(0,1) == 1)
el.style.webkitTransform = 'rotate(-90deg)';
else
el.style.webkitTransform = 'rotate(90deg)';
el.style.opacity = 0;
setTimeout(function erase()
{
document.getElementById('glass').removeChild(el);
},500);
var c = document.createElement('div');
c.className = 'counters';
c.style.top = el.offsetTop - 15 + 'px';
c.style.left = el.offsetLeft + 'px';
c.style.width = el.offsetWidth + 'px';
c.innerHTML = '10';
document.getElementById('glass').appendChild(c);
c.style.top = c.offsetTop - 60 + 'px';
c.style.webkitTransform = 'rotateY(360deg)';
setTimeout(function hide(){c.style.opacity = 0;},500);
setTimeout(function erase(){document.getElementById('glass').removeChild(c)},800);
pts(10);
}
function colorchildren(parid,col)
{
for(i=0;i<=document.getElementById(parid).children.length-1;i++)
{
document.getElementById(parid).children[i].style.backgroundColor = col;
}
}
var ptsindex = 0;
function pts(amt)
{
if(amt < 0) var color = 'red';
else var color = 'green';
ptsindex = ptsindex + 1;
var el = document.getElementById('scoresheet');
el.style.backgroundColor = color;
setTimeout(function showup()
{
el.style.backgroundColor = 'inherit';
},600);
score = score + amt;
el.innerHTML = score;
}
function start()
{
if(!started)
{
started = true;
whole = setInterval(function count()
{
time = time + 1;
},1000);
mili = setInterval(function count()
{
minor_time = minor_time + 1;
document.getElementById('timesheet').innerHTML = Number(time) + Number(get_hundreds(minor_time)) + 'seconds';
},100);
}
}
function check_for_end()
{
var amt = 0;
for(i=0;i<=document.getElementById('glass').children.length - 1;i++)
{
if(document.getElementById('glass').children[i].id.indexOf('killable') > -1)
if(window.getComputedStyle(document.getElementById('glass').children[i]).opacity == 1)
amt = amt+1;
}
if(amt > 0)
return false;
else if(amt < 1)
{
clearInterval(whole);
return true;
}
}
function get_hundreds(arg)
{
if(arg<=9) return (arg/10).toFixed(1);
var opts = [10,100,1000];
for(i=0;i<=opts.length-1;i++)
{
if(arg/opts[i] >= 1)
{
return (arg/opts[i] - Math.floor(arg/opts[i])).toFixed(1);
}
}
}
function starmode(w,h)
{
var con = document.getElementById('sight_container');
con.style.width = w + 'px';
con.style.height = h + 'px';
con.style.backgroundColor = 'black';
con.style.borderRadius = 0;
align_sticks();
}
</script>
</body>
</html>
Comments