Skip to content

Instantly share code, notes, and snippets.

@Bostonncity

Bostonncity/zmeya.js

Forked from illuvialsky/zmeya.js
Created December 6, 2015 08:12
Show Gist options
  • Save Bostonncity/6b23c072c2d273ccdb55 to your computer and use it in GitHub Desktop.
Save Bostonncity/6b23c072c2d273ccdb55 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
zmeya.js
<html><head><style>
.main .line {
clear: both;
}
.main .line div {
width: 20px;
height: 20px;
float: left;
margin: 1px;
border: 1px solid #ddd;
border-radius: 4px;
background-color: #fff;
transition: background-color .5s;
}
.main .line div.s {
background-color: #bbb;
transition: background-color .5s;
}
.main .line div.f {
background-color: green;
transition: background-color 2s;
}
</style>
</head><body><div id="main" class="main">
<div class="line"><div data-n="1" class="0_0"></div><div class="0_1" data-n="1"></div><div class="0_2" data-n="2"></div><div class="0_3" data-n="3"></div><div class="0_4"></div><div class="0_5"></div><div class="0_6"></div><div class="0_7"></div><div class="0_8"></div><div class="0_9"></div></div>
<div class="line"><div class="1_0"></div><div class="1_1"></div><div class="1_2"></div><div class="1_3" data-n="4"></div><div class="1_4"></div><div class="1_5"></div><div class="1_6"></div><div class="1_7"></div><div class="1_8"></div><div class="1_9"></div></div><div class="line"><div class="2_0"></div><div class="2_1"></div><div class="2_2"></div><div class="2_3" data-n="5"></div><div class="2_4"></div><div class="2_5"></div><div class="2_6"></div><div class="2_7"></div><div class="2_8"></div><div class="2_9"></div></div>
<div class="line"><div class="3_0"></div><div class="3_1"></div><div class="3_2"></div><div class="3_3" data-n="6"></div><div class="3_4"></div><div class="3_5"></div><div class="3_6"></div><div class="3_7"></div><div class="3_8"></div><div class="3_9"></div></div><div class="line"><div class="4_0"></div><div class="4_1"></div><div class="4_2"></div><div class="4_3 s" data-n="7"></div><div class="4_4"></div><div class="4_5"></div><div class="4_6"></div><div class="4_7"></div><div class="4_8"></div><div class="4_9"></div></div>
<div class="line"><div class="5_0"></div><div class="5_1"></div><div class="5_2"></div><div class="5_3 s" data-n="8"></div><div class="5_4"></div><div class="5_5"></div><div class="5_6"></div><div class="5_7"></div><div class="5_8"></div><div class="5_9"></div></div><div class="line"><div class="6_0"></div><div class="6_1"></div><div class="6_2"></div><div class="6_3 s" data-n="9"></div><div class="6_4"></div><div class="6_5"></div><div class="6_6"></div><div class="6_7 f"></div><div class="6_8"></div><div class="6_9"></div></div>
<div class="line"><div class="7_0"></div><div class="7_1"></div><div class="7_2"></div><div class="7_3 s" data-n="10"></div><div class="7_4"></div><div class="7_5"></div><div class="7_6"></div><div class="7_7"></div><div class="7_8"></div><div class="7_9"></div></div><div class="line"><div class="8_0"></div><div class="8_1"></div><div class="8_2"></div><div class="8_3 s" data-n="11"></div><div class="8_4"></div><div class="8_5"></div><div class="8_6"></div><div class="8_7"></div><div class="8_8"></div><div class="8_9"></div></div>
<div class="line"><div class="9_0"></div><div class="9_1"></div><div class="9_2"></div><div class="9_3"></div><div class="9_4"></div><div class="9_5"></div><div class="9_6"></div><div class="9_7"></div><div class="9_8"></div><div class="9_9"></div></div>
</div>
<script>
(function(width, height, length, current, dx, dy, x, y, hasFood, newEl){
document.body.onkeydown = function(e){
dx = (e.keyCode - 38) % 2, dy = (e.keyCode - 39) % 2;
};
var timer = setInterval(function () {
x = (x + dx) < 0 ? width - 1 : (x + dx) % width;
y = (y + dy) < 0 ? height - 1 : (y + dy) % height;
newEl = document.getElementsByClassName(y + '_' + x)[0]
if(newEl.className.indexOf('s') > 0) {
clearInterval(timer), alert('Game Over! Score: ' + length)
};
if(newEl.className.indexOf('f') > 0) {
newEl.className = newEl.className.replace(' f', ''), length++, hasFood = false;
}
newEl.className += ' s', newEl.setAttribute('data-n', current++);
for(var i = 0, min = Infinity, item, items = document.getElementsByClassName('s'), len = items.length; i < len && len > length; i++)
if(+items[i].getAttribute('data-n') < min)
min = +items[i].getAttribute('data-n'), item = items[i];
if(!!item) item.className = item.className.replace(' s', '');
for(var fItem, fX, fY; !hasFood; fX = Math.round(Math.random() * 10 % width), fY = Math.round(Math.random() * 10 % height))
if(!!fX && !!fY && document.getElementsByClassName(fY + '_' + fX)[0].className.indexOf('s') < 0)
hasFood = true, document.getElementsByClassName(fY + '_' + fX)[0].className += ' f';
}, 1000);
})(10, 10, 5, 1, 1, 0, 0, 0, false, null);
</script></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment