<!doctype html>
<html>
<head>
<title>Snakes via Cursor Game - RJM Programming - July, 2017</title>
<!--script class="jsbin" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script-->
<style type="text/css">
td { draggable: true; mix-blend-mode: multiply; }
.draggable {
position: absolute;
left: -120px;
top: -120px;
width: 20px;
height: 20px;
background-color: transparent;
border: 1px solid orange;
z-index: 12;
}

</style>
<script type='text/javascript'>

var tlwhl=[], tlwh=[];
var directionxys="1;0,0;-1,1;-1,-1;-1,0;1,1;1,-1;1,-1;0";
var directionlgs="right,center top,top right,top left,center bottom,bottom right,bottom left,left";
var directions="e-resize,n-resize,ne-resize,nw-resize,s-resize,se-resize,sw-resize,w-resize";
var dira=directions.split(",");
var cval=0;
var snake="c_11_11";
var snakea=snake.split(',');
var snakehead=snakea[eval(-1 + snakea.length)];
var nextsnakehead=snakehead;
var score=0, seconds=-1, stopnow=false, first=true;

function startgame() {
var nextxoff=0, nextyoff=0, thisx=0, thisy=0,cnt=0,ii,jj,rect,stuff="";
if (first) {
first=false;
if (1 == 1 || navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
rect=document.getElementById('c_11_11').getBoundingClientRect();
document.getElementById('ddrag').style.top='' + ('' + rect.top).replace('px','') + 'px';
document.getElementById('ddrag').style.left='' + ('' + rect.left).replace('px','') + 'px';
document.getElementById('ddrag').style.width='' + ('' + rect.width).replace('px','') + 'px';
document.getElementById('ddrag').style.height='' + ('' + rect.height).replace('px','') + 'px';
document.getElementById('ddrag').style.cursor=dira[cval];
//alert(document.getElementById('ddrag').outerHTML);
for (ii=1; ii<=21; ii++) {
for (jj=1; jj<=21; jj++) {
stuff='c_' + ii + '_' + jj;
rect=document.getElementById(stuff).getBoundingClientRect();
tlwhl.push(stuff);
stuff='' + '' + ('' + rect.left).replace('px',''); // + 'px';
stuff+=';' + '' + ('' + rect.top).replace('px',''); // + 'px';
stuff+=';' + '' + ('' + rect.width).replace('px',''); // + 'px';
stuff+=';' + '' + ('' + rect.height).replace('px',''); // + 'px';
tlwh.push(stuff);
}
}
}
}
cval=0;
document.title='Snake length: ' + score + ' ... Snakes via Cursor Game - RJM Programming - July, 2017';
document.getElementById('dscore').innerHTML='Score:' + Math.ceil(eval(score * 60 / seconds));
nextsnakehead=snakehead;
while ((',' + snake + ',').indexOf(',' + nextsnakehead + ',') != -1 && !stopnow) {
cnt++;
cval=Math.floor(Math.random() * dira.length);
nextxoff=eval(directionxys.split(',')[cval].split(';')[0]);
nextyoff=eval(directionxys.split(',')[cval].split(';')[1]);
thisx=eval(snakehead.split('_')[1]);
thisy=eval(snakehead.split('_')[2]);
//alert(nextxoff + ' ' + nextyoff + ' ' + thisx + ' ' + thisy);
if (eval(thisx + nextxoff) >= 1 && eval(thisx + nextxoff) <= 21 && eval(thisy + nextyoff) >= 1 && eval(thisy + nextyoff) <= 21) {
nextsnakehead='c_' + eval(thisx + nextxoff) + '_' + eval(thisy + nextyoff);
}
if (cnt > 441) {
stopnow=true;
alert('Nowhere to go with a snake length of ' + score + ' and a score of ' + Math.ceil(eval(score * 60 / Math.abs(seconds))));
location.href=document.URL.split('#')[0].split('?')[0];
}
}
document.getElementById(snakea[eval(-1 + snakea.length)]).style.cursor=dira[cval];
document.getElementById('ddrag').style.cursor=dira[cval];
//alert("-moz-linear-gradient(" + directionlgs.split(',')[cval] + ", red, blue)");
//document.getElementById(snakea[eval(-1 + snakea.length)]).style.background="url('" + "snake.jpg" + "') ";
document.getElementById(snakea[eval(-1 + snakea.length)]).style.background=" -moz-linear-gradient(" + directionlgs.split(',')[cval] + ", red, blue)";
document.getElementById(snakea[eval(-1 + snakea.length)]).style.background+=" -o-linear-gradient(to " + directionlgs.split(',')[cval].replace('center ','') + ", blue, red)";
document.getElementById(snakea[eval(-1 + snakea.length)]).style.background+=" -webkit-gradient(to " + directionlgs.split(',')[cval].replace('center ','') + ", blue, red)";
document.getElementById(snakea[eval(-1 + snakea.length)]).style.background+=" linear-gradient(to " + directionlgs.split(',')[cval].replace('center ','') + ", blue, red)";
}

function omo(tdo) {
document.title='Snake length: ' + score + ' ... Snakes via Cursor Game - RJM Programming - July, 2017';
document.getElementById('dscore').innerHTML='Score:' + Math.ceil(eval(score * 60 / Math.abs(seconds)));
if (tdo.id == nextsnakehead) {
if (tlwh.length > 0) {
for (var it=0; it<tlwhl.length; it++) {
if (tlwhl[it] == nextsnakehead) {
document.getElementById('ddrag').style.top='' + ('' + eval(tlwh[it].split(';')[1])).replace('px','') + 'px';
document.getElementById('ddrag').style.left='' + ('' + eval(tlwh[it].split(';')[0])).replace('px','') + 'px';
document.getElementById('ddrag').style.width='' + ('' + eval(tlwh[it].split(';')[2])).replace('px','') + 'px';
document.getElementById('ddrag').style.height='' + ('' + eval(tlwh[it].split(';')[3])).replace('px','') + 'px';
document.getElementById('ddrag').style.cursor=dira[cval];
}
}
}
tdo.style.backgroundColor='pink';
score++;
snake+=',' + nextsnakehead;
snakea=snake.split(',');
snakehead=snakea[eval(-1 + snakea.length)];
startgame();
}
}

function stopdiv() {
document.getElementById('mydiv').style.display='none';
}

function incsec() {
if (!stopnow) {
if (seconds < 0) {
seconds=Math.abs(seconds);
} else {
seconds++;
}
setTimeout(incsec,1000);
}
}

function dmoved(dois) {
var thisx=0, thisy=0;
if (tlwh.length > 0) {
if (typeof dois.pageX === "undefined") {
thisx=dois.clientX;
thisy=dois.clientY;
} else {
thisx=dois.pageX;
thisy=dois.pageY;
}
for (var it=0; it<tlwhl.length; it++) {
if (tlwhl[it] == nextsnakehead) {
//document.title='here ' + dois.pageX + ',' + dois.pageY + ' ' + Math.floor(eval(tlwh[it].split(';')[0])) + ',' + Math.floor(eval(tlwh[it].split(';')[1])) + ',' + Math.floor(eval(tlwh[it].split(';')[2])) + ',' + Math.floor(eval(tlwh[it].split(';')[3]));
if (thisx >= eval(tlwh[it].split(';')[0]) && thisx <= (eval(tlwh[it].split(';')[0]) + eval(tlwh[it].split(';')[2])) && thisy >= eval(tlwh[it].split(';')[1]) && thisy <= (eval(tlwh[it].split(';')[1]) + eval(tlwh[it].split(';')[3]))) {
//document.title='there';
document.getElementById('ddrag').style.top='' + ('' + eval(tlwh[it].split(';')[1])).replace('px','') + 'px';
document.getElementById('ddrag').style.left='' + ('' + eval(tlwh[it].split(';')[0])).replace('px','') + 'px';
document.getElementById('ddrag').style.width='' + ('' + eval(tlwh[it].split(';')[2])).replace('px','') + 'px';
document.getElementById('ddrag').style.height='' + ('' + eval(tlwh[it].split(';')[3])).replace('px','') + 'px';
omo(document.getElementById(nextsnakehead));
}
}
}
}
}

</script>
</head>
<body onload='setTimeout(incsec,1000); setTimeout(stopdiv,12000); setTimeout(startgame,2000);'>

<table id='mytable' style='width:100%;height:100vh;position:absolute;top:0;left:0;' border=20>
<tbody id='mytbody'>
<tr><td onclick='omo(this);' onmouseover='omo(this);' id='c_1_1'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_2_1'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_3_1'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_4_1'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_5_1'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_6_1'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_7_1'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_8_1'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_9_1'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_10_1'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_11_1'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_12_1'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_13_1'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_14_1'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_15_1'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_16_1'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_17_1'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_18_1'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_19_1'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_20_1'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_21_1'></td></tr>
<tr><td onclick='omo(this);' onmouseover='omo(this);' id='c_1_2'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_2_2'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_3_2'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_4_2'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_5_2'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_6_2'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_7_2'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_8_2'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_9_2'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_10_2'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_11_2'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_12_2'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_13_2'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_14_2'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_15_2'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_16_2'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_17_2'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_18_2'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_19_2'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_20_2'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_21_2'></td></tr>
<tr><td onclick='omo(this);' onmouseover='omo(this);' id='c_1_3'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_2_3'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_3_3'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_4_3'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_5_3'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_6_3'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_7_3'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_8_3'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_9_3'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_10_3'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_11_3'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_12_3'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_13_3'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_14_3'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_15_3'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_16_3'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_17_3'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_18_3'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_19_3'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_20_3'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_21_3'></td></tr>
<tr><td onclick='omo(this);' onmouseover='omo(this);' id='c_1_4'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_2_4'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_3_4'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_4_4'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_5_4'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_6_4'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_7_4'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_8_4'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_9_4'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_10_4'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_11_4'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_12_4'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_13_4'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_14_4'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_15_4'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_16_4'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_17_4'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_18_4'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_19_4'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_20_4'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_21_4'></td></tr>
<tr><td onclick='omo(this);' onmouseover='omo(this);' id='c_1_5'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_2_5'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_3_5'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_4_5'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_5_5'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_6_5'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_7_5'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_8_5'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_9_5'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_10_5'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_11_5'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_12_5'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_13_5'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_14_5'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_15_5'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_16_5'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_17_5'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_18_5'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_19_5'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_20_5'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_21_5'></td></tr>
<tr><td onclick='omo(this);' onmouseover='omo(this);' id='c_1_6'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_2_6'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_3_6'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_4_6'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_5_6'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_6_6'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_7_6'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_8_6'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_9_6'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_10_6'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_11_6'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_12_6'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_13_6'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_14_6'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_15_6'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_16_6'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_17_6'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_18_6'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_19_6'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_20_6'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_21_6'></td></tr>
<tr><td onclick='omo(this);' onmouseover='omo(this);' id='c_1_7'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_2_7'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_3_7'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_4_7'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_5_7'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_6_7'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_7_7'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_8_7'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_9_7'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_10_7'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_11_7'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_12_7'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_13_7'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_14_7'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_15_7'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_16_7'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_17_7'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_18_7'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_19_7'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_20_7'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_21_7'></td></tr>
<tr><td onclick='omo(this);' onmouseover='omo(this);' id='c_1_8'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_2_8'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_3_8'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_4_8'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_5_8'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_6_8'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_7_8'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_8_8'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_9_8'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_10_8'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_11_8'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_12_8'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_13_8'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_14_8'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_15_8'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_16_8'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_17_8'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_18_8'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_19_8'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_20_8'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_21_8'></td></tr>
<tr><td onclick='omo(this);' onmouseover='omo(this);' id='c_1_9'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_2_9'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_3_9'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_4_9'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_5_9'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_6_9'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_7_9'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_8_9'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_9_9'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_10_9'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_11_9'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_12_9'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_13_9'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_14_9'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_15_9'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_16_9'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_17_9'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_18_9'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_19_9'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_20_9'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_21_9'></td></tr>
<tr><td onclick='omo(this);' onmouseover='omo(this);' id='c_1_10'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_2_10'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_3_10'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_4_10'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_5_10'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_6_10'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_7_10'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_8_10'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_9_10'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_10_10'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_11_10'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_12_10'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_13_10'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_14_10'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_15_10'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_16_10'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_17_10'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_18_10'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_19_10'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_20_10'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_21_10'></td></tr>
<tr><td onclick='omo(this);' onmouseover='omo(this);' id='c_1_11'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_2_11'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_3_11'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_4_11'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_5_11'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_6_11'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_7_11'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_8_11'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_9_11'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_10_11'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_11_11' style='font-color:yellow;border:2px inset green;background-color:pink;'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_12_11'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_13_11'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_14_11'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_15_11'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_16_11'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_17_11'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_18_11'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_19_11'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_20_11'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_21_11'></td></tr>
<tr><td onclick='omo(this);' onmouseover='omo(this);' id='c_1_12'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_2_12'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_3_12'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_4_12'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_5_12'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_6_12'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_7_12'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_8_12'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_9_12'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_10_12'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_11_12'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_12_12'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_13_12'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_14_12'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_15_12'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_16_12'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_17_12'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_18_12'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_19_12'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_20_12'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_21_12'></td></tr>
<tr><td onclick='omo(this);' onmouseover='omo(this);' id='c_1_13'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_2_13'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_3_13'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_4_13'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_5_13'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_6_13'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_7_13'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_8_13'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_9_13'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_10_13'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_11_13'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_12_13'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_13_13'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_14_13'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_15_13'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_16_13'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_17_13'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_18_13'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_19_13'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_20_13'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_21_13'></td></tr>
<tr><td onclick='omo(this);' onmouseover='omo(this);' id='c_1_14'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_2_14'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_3_14'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_4_14'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_5_14'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_6_14'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_7_14'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_8_14'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_9_14'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_10_14'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_11_14'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_12_14'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_13_14'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_14_14'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_15_14'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_16_14'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_17_14'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_18_14'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_19_14'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_20_14'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_21_14'></td></tr>
<tr><td onclick='omo(this);' onmouseover='omo(this);' id='c_1_15'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_2_15'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_3_15'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_4_15'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_5_15'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_6_15'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_7_15'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_8_15'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_9_15'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_10_15'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_11_15'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_12_15'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_13_15'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_14_15'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_15_15'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_16_15'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_17_15'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_18_15'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_19_15'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_20_15'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_21_15'></td></tr>
<tr><td onclick='omo(this);' onmouseover='omo(this);' id='c_1_16'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_2_16'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_3_16'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_4_16'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_5_16'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_6_16'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_7_16'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_8_16'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_9_16'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_10_16'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_11_16'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_12_16'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_13_16'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_14_16'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_15_16'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_16_16'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_17_16'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_18_16'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_19_16'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_20_16'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_21_16'></td></tr>
<tr><td onclick='omo(this);' onmouseover='omo(this);' id='c_1_17'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_2_17'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_3_17'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_4_17'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_5_17'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_6_17'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_7_17'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_8_17'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_9_17'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_10_17'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_11_17'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_12_17'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_13_17'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_14_17'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_15_17'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_16_17'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_17_17'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_18_17'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_19_17'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_20_17'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_21_17'></td></tr>
<tr><td onclick='omo(this);' onmouseover='omo(this);' id='c_1_18'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_2_18'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_3_18'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_4_18'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_5_18'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_6_18'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_7_18'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_8_18'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_9_18'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_10_18'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_11_18'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_12_18'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_13_18'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_14_18'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_15_18'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_16_18'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_17_18'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_18_18'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_19_18'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_20_18'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_21_18'></td></tr>
<tr><td onclick='omo(this);' onmouseover='omo(this);' id='c_1_19'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_2_19'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_3_19'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_4_19'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_5_19'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_6_19'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_7_19'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_8_19'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_9_19'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_10_19'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_11_19'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_12_19'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_13_19'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_14_19'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_15_19'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_16_19'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_17_19'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_18_19'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_19_19'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_20_19'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_21_19'></td></tr>
<tr><td onclick='omo(this);' onmouseover='omo(this);' id='c_1_20'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_2_20'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_3_20'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_4_20'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_5_20'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_6_20'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_7_20'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_8_20'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_9_20'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_10_20'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_11_20'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_12_20'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_13_20'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_14_20'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_15_20'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_16_20'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_17_20'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_18_20'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_19_20'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_20_20'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_21_20'></td></tr>
<tr><td onclick='omo(this);' onmouseover='omo(this);' id='c_1_21'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_2_21'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_3_21'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_4_21'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_5_21'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_6_21'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_7_21'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_8_21'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_9_21'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_10_21'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_11_21'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_12_21'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_13_21'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_14_21'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_15_21'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_16_21'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_17_21'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_18_21'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_19_21'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_20_21'></td><td onclick='omo(this);' onmouseover='omo(this);' id='c_21_21'></td></tr>
</tbody>
</table>
<div id='ddrag' class="draggable" onmousemove="dmoved(event);" ontouchmove="dmoved(event);"></div>
<div id='mydiv' style='z-index:9;position:absolute;top:20px;left:30px;opacity:0.5;color:green;'>
<h1 class="blending"><span>G</span><span>u</span>ided Snake Game</h1>
<h2>RJM Programming - July, 2017</h2>
<h3>Follow the red and/or the cursor as fast as possible to maximize score ... good luck!</h3>
</div>
<div id='dscore' style='z-index:9;position:absolute;top:49vh;left:47.5%;opacity:0.9;color:white;'>
</div>
</body>
<!--script type="text/javascript">
$.fn.draggable = function() {
var offset = null;
var start = function(e) {
var orig = e.originalEvent;
var pos = $(this).position();
document.title='at start';
offset = {
x: orig.changedTouches[0].pageX - pos.left,
y: orig.changedTouches[0].pageY - pos.top
};
};
var moveMe = function(e) {
e.preventDefault();
var orig = e.originalEvent;
document.title='at moveMe at '; // + orig.dataTransfer;
$(this).css({
top: orig.changedTouches[0].pageY - offset.y,
left: orig.changedTouches[0].pageX - offset.x
});
};
//this.bind("touchstart", start);
//this.bind("touchmove", moveMe);
//this.bind("drop", dropf);
//this.bind("mousedown", start);
//this.bind("mousemove", moveMe);
};

$(".draggable").draggable();
</script-->
</html>