Skip to content

Instantly share code, notes, and snippets.

@tigercosmos
Last active May 6, 2016 14:02
Show Gist options
  • Save tigercosmos/f36d1b02bc51f956920300f74db89545 to your computer and use it in GitHub Desktop.
Save tigercosmos/f36d1b02bc51f956920300f74db89545 to your computer and use it in GitHub Desktop.
Eating Snake
<!DOCTYPE html>
<html>
<head>
<title>Eating Snake</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<style>
button {
padding: 6px 12px;
font-size: 14px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
margin: 5px;
}
.start {
color: white;
background-color: red;
border: 1px solid transparent;
}
.new {
color: white;
background-color: #5cb85c;
border: 1px solid transparent;
}
#Grids{
border: 1.5px solid #ccc;
max-width: 250px;
max-height: 250px;
}
</style>
<p>Eating Snake</p>
<div id="Control"></div>
<div id="Grids"></div>
<script>
$(document).ready(function(){
var rectW = 25, rectL = 25, cc = 10, delayTime = 100, timerID = 0, stopped = true,
nextDir, grids, body, food, head,
color = ['white','black','green'],
directionVectors = {
65: [-1,0], 37: [-1,0], // 'A' or Left Arrow
87: [0,-1], 38: [0,-1], // 'W' or Up Arrow
68: [1,0], 39: [1,0], // 'D' or Right Arrow
83: [0,1], 40: [0,1] // 'S' or Down Arrow
};
var xs = d3.scale.linear().domain([0,rectL]).range([0,rectL * cc]),
ys = d3.scale.linear().domain([0,rectW]).range([0,rectW * cc]);
var rects = d3.select("#Grids")
.append("svg:svg")
.attr("stroke", "rgba(204, 204,204,0.2)")
.attr("shape-rendering", "optimizeSpeed")
.attr("width",rectL*cc)
.attr("height", rectW*cc);
var ctrl = d3.select("#Control")
ctrl.append('button')
.attr('class', 'new')
.text('New')
.on('click', function(){ return setNewGrid() });
ctrl.append('button')
.attr('class', 'start')
.text('Start')
.on('click', startStop);
var initialize = function(){
grids = [];
d3.range(rectL).forEach(function(x){
grids[x] = new Array();
d3.range(rectW).forEach(function(y){
grids[x][y] = 0;
});
});
body = [[0,0],[0,1],[0,2],[0,3]];
head = [0,3];
nextDir = [0,1];
makeFood();
makeBody();
rects.selectAll("rect")
.data(function(){ return setGrid()})
.enter()
.append("rect")
.attr("x", function(d){ return xs(d.x)})
.attr("y", function(d){ return ys(d.y)})
.attr("width",cc)
.attr("height",cc)
.attr("fill", function(d){ return color[d.state];});
};
$(document).keydown(function(event){
var vector = directionVectors[event.which];
if (!vector) return;
// (right <--> left or up <--> down)
if ((vector[0] !== 0 && vector[0] + nextDir[0] === 0) ||
(vector[1] !== 0 && vector[1] + nextDir[1] === 0)) {
return;
}
nextDir = vector;
event.preventDefault()
});
function collide(a, b){
var k = 0
b.forEach( function(x){
if(a[0]==x[0] && a[1]==x[1]){
k = 1;
}
});
return k;
} ;
function makeFood(){
var x, y, k = 1;
while(k){
x = Math.floor(Math.random()*rectL);
y = Math.floor(Math.random()*rectW);
if(!collide([x,y],body))
k = 0;
}
food = [x, y];
grids[x][y] = 2;
}
function makeBody(){
for(var i in body){
var x = body[i][0],
y = body[i][1];
grids[x][y] = 1;
}
}
var setGrid = function (){
var bits = [];
for(var i= 0; i< rectL; i++){
for(var j= 0; j< rectW; j++){
bits.push({ "x": i, "y": j, "state": grids[i][j] });
}
}
return bits;
};
var setNewGrid = function (){
initialize();
displayGrid();
nextDir = [0,1];
}
var move = function(){
function getNext(i,j){
var x = i[0] + j[0];
var y = i[1] + j[1];
return [x, y];
}
var nextPos = getNext(head, nextDir);
if(nextPos[0] < 0 || nextPos[1] < 0 || nextPos[0] >= rectL || nextPos[1] >= rectW ){
startStop();
return;
}
if(collide(nextPos, body)){
startStop();
return;
}
head[0] = nextPos[0];
head[1] = nextPos[1];
body.push([head[0], head[1]]);
if(nextPos[0] == food[0] && nextPos[1] == food[1]){
makeFood();
}
else{
grids[body[0][0]][body[0][1]] = 0;
body.shift();
}
makeBody()
displayGrid();
};
var displayGrid = function(){
rects.selectAll("rect")
.data(function(){ return setGrid()})
.transition()
.attr("fill", function(d) { return color[d.state]; })
.duration(0);
}
function startStop() {
stopped = !stopped;
d3.select('button.start')
.text(function () { return stopped ? 'Start' : 'Stop';});
}
var run = function(){
clearInterval(timerID);
timerID = setInterval( function(){ if (!stopped) move();},delayTime);
}
initialize();
run();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment