Skip to content

Instantly share code, notes, and snippets.

@remixer-dec

remixer-dec/LICENSE

Created August 24, 2018 20:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save remixer-dec/95ff53000b00981851a37c1634111c5a to your computer and use it in GitHub Desktop.
Save remixer-dec/95ff53000b00981851a37c1634111c5a to your computer and use it in GitHub Desktop.
Download ZIP
500B JS Snake
Raw
LICENSE
Public Domain
Raw
snake.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>500B Snake (JS ES6)</title>
<style>
#R{
width: 144px;margin: 0 auto;font-size: 20px;
}
#mobilecontrols{
display:grid;
grid-template:'a a' 60px 'b c' 64px 'd d' 60px;
}
</style>
</head>
<body>
<pre id='R'></pre>
<p id="mobilecontrols">
<button style="grid-area: a" onclick="window.onkeydown({keyCode:38})">^</button>
<button style="grid-area: b" onclick="window.onkeydown({keyCode:37})">&lt;</button>
<button style="grid-area: c" onclick="window.onkeydown({keyCode:39})">&gt;</button>
<button style="grid-area: d" onclick="window.onkeydown({keyCode:40})">V</button>
</p>
<center>if you're on PC, you can use arrow keys</center>
<script src="./snake.min.js"></script>
</body>
</html>
Raw
snake.min.js
I=_=>{p=d=39,T=[25],f=0,O=e=>-1!=T.indexOf(e),F()},E=11,g=_=>Math.floor(99*Math.random()+E),F=_=>{while(O(f)||0==f%E)f=g()},I(),K=(c,e)=>d=d==c?e:d,r=_=>{for(H=T[0],v='',T[0]==f?T.push(f)&F():0,K(37,-1),K(39,1),K(38,-E),K(40,E),d=d==-1*p?p:d,O(H+d)||12>H||110<H||0==H%E?I():T.unshift(H+d)&T.pop(),i=0;122>i;i++)v+=0==i%E||E>i||110<i?'#':O(i)?'o':i==f?'$':' ',v+=0==i%E&&0<i&&121>i?'\n#':'';v+=T.length-1,R.innerHTML=v,p=d,89==T.length?alert('U won')&I():0},onkeydown=c=>d=c.keyCode,setInterval(r,400)
@remixer-dec
Copy link
Author

remixer-dec commented Aug 24, 2018 •
edited

Live demo
Full explanation:

I=_=>{//function initiator
	p=d=39, //direction & previous direction, also serves for keypress events
	T=[25], //Tail array with 1D coordinates
	f=0, //food position
	O=e=>-1!=T.indexOf(e), //function that checks if item is crossing the tail
	F()//food generation
},
E=11,//number eleven is used a lot, so why not make it 1 char shorter
g=_=>Math.floor(99*Math.random()+E), // js random number generator
F=_=>{while(O(f)||0==f%E)f=g()}, //Food generator, called untill empty cell is found
I(),//Init.
K=(c,e)=>d=d==c?e:d,//Keyboard event -> direction mapper
r=_=>{//renderer function
	for(//rendering loop init
	H=T[0],//Head = first part of the tail
	v='', //variable for html output caching
	T[0]==f?//if head hits the food
	T.push(f)&F():0,//add new tail part and reset the food
	K(37,-1),K(39,1),K(38,-E),K(40,E),//map keyboard events to directions (1D)
	d=d==-1*p?p:d,//if snake goes backwards reset direction
	O(H+d)||12>H||110<H||0==H%E?I()://if snake hits the border or itself, reset
	T.unshift(H+d)&T.pop(),//othervise move the snake to d direction
	i=0;122>i;i++)//actual rendering loop
		v+=0==i%E||E>i||110<i?'#'://render the walls
		O(i)?'o':i==f?'$':' ',//render empty space, the snake and the food
		v+=0==i%E&&0<i&&121>i?'\n#':'';//render linebreaks and left wall
	v+=T.length-1,R.innerHTML=v,//add the score and insert html content
	p=d,//set previous direction variable to current direction
	89==T.length?alert('U won')&I():0//if player won, show message and reset
},
onkeydown=c=>d=c.keyCode,//set key codes and key press event
setInterval(r,400)//set renderer loop

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment