index.html

<!doctype html>
<html lang="en" onkeypress = "keyEventHandler(event)">
<head>
	<title> Snake </title>

	<meta name="robots" content="index, follow" />
	<meta charset="UTF-8">
	<link rel="canonical" href="" />
	<meta name="keywords" content="Snake Single Page Application SPA CSS CSS3 HTML HTML5 Javascript Cayla Savitzky">
	<meta name = "description" content = "A single page application that plays the classic game Snake. This is a demo page by Cayla Savitzky">
	<meta name="author" content="Cayla Savitzky">
	<script src="https://hammerjs.github.io/dist/hammer.js"></script>
<style>
body{
	background-color: black;
	margin:25;
}
ul {
position:relative;
display:inline-block;
top:-50%;
}

#pause_menu{
	color: white;
	background: #333;
	opacity: .9;
	padding: 10px;
	position: absolute;
	top:25px;
	display: flex;
	flex-wrap: wrap;
	margin-right:20px;
	width:calc(100% - 70px);
	transition: z-index .1s;
}

#pause_menu > h3{
	width:100%;
	align-self: center;
	justify-self:center;
}

#pause_menu> div{
	background-color: #333;
	width: 100%;
	display: flex;
	align-items: center;
	align-content: center;
}

canvas {
	margin-bottom: 0;
	margin-right: 0;
	margin:2.5px;
}

div{
	background-color: black;
	margin:0;
	float:left;
}

#menu{
	box-sizing: border-box;
	background-color: black;
	margin:2.5px;
	width:200px;
	float:left;
	border: 10px solid #2c2;
	display: grid;
	grid-template-columns: repeat(1,1fr);
	grid-gap: 10px;
	grid-template-areas: 
	  " a "
	  " b "
	  " c ";
}

button{
	background: black;
	color: #66FF66;
	border: 1px solid #66FF66;
	border-radius: 10%;
	padding:6px 10px;
	outline:none;
}

#options{
	display: grid;
	grid-template-columns: repeat(5,1fr);
	grid-gap: 10px;
	grid-auto-rows: 25px;
	grid-template-areas: 
	  ". a b c .";
}
#info{
	display: grid;
	color: #66FF66;
	grid-template-columns: repeat(1,1fr);
	grid-gap: 10px;
	grid-auto-rows: 25px;
	grid-template-areas: 
	  " a "
	  " b ";
}
#directions{
	display: grid;
	grid-template-columns: repeat(5,1fr);
	grid-gap: 10px;
	grid-auto-rows: 25px;
	grid-template-areas: 
	  ". . a . ."
	  ". b . c ."
	  ". . d . .";
}

#menu > div {
	margin:20px;
}

button, p {
	align-self: center;
	justify-self: center;
}

#options {grid-area: a}
#info {grid-area: b}
#directions {grid-area: c}
#option1 {grid-area: a;}
#option2{grid-area: b;}
#option3{grid-area: c;}
#score{grid-area: a;}
#time{grid-area: b;}
#up{grid-area: a;}
#left{grid-area: b;}
#right{grid-area: c;}
#down{grid-area: d;}


@media all and (max-aspect-ratio:1/1){
	#menu{
		grid-template-columns: repeat(2,1fr);
		grid-template-areas: 
		  " a  c"
		  " b  c"
	}
}

</style>
</head>
<body onresize="screenResize()">
<div>
	<canvas id = 'gamecanvas' onclick="clickEventHandler(event)"></canvas>
</div>
<div id = 'menu'>
	<div id = "options">
		<button id = "option1" onclick= "option1()"> :3 </button>
		<button id = "option2" onclick= "option2()"> ;) </button>
		<button id = "option3" onclick= "option3()"> :P </button>
	</div>
	<div id = "info">
		<p id = "score"> score: 0 </p>
		<p id = "time"> time: off </p>
	</div>
</div>


<img style="display:none" id = "nompic">
<div id = "pause_menu">
	<h3>How to play:</h3>
	<ul>
	<li>
	Move with WASD or by swiping!
	</li>
	<li>
	Pause the game by pressing the "p" key
	</li>
	<li>
	You can pass through walls but be careful not to eat your own tail.
	</li>
	<li>
	When the timer runs out it's game over.
	</li>
	</ul>
	<div width="100%">
		<button  onclick = "keyEventHandler(new fakeEvent(112))">
			~Play~
		</button>
	</div>
</div>
</body>
<script>
// Snake


/*
*
*
* 			Setup:
*
*
*/

var objectSize = 10;
var canvas = document.getElementById("gamecanvas");
var menu = document.getElementById("menu");
var board = canvas.getContext('2d');
var edge = objectSize;

var windowHeight;
var windowWidth;
var width;
var height;

var screenResize = function(){
	windowHeight = window.innerHeight
	windowWidth = window.innerWidth
	windowHeight = Math.floor(windowHeight/10)*10
	windowWidth = Math.floor(windowWidth/10)*10
	let oneninety = 190;
	if (window.innerWidth < windowHeight){
		width = windowWidth-50;
		height = windowHeight-50 - 200;
		board.canvas.width = windowWidth-50;
		board.canvas.height = windowHeight-50 - 200;
		menu.style.width = windowWidth-50;
		menu.style.height = 190;
		menu.style.width = width.toString() +"px";
		menu.style.height = oneninety.toString + "px";
		console.log(windowWidth-50)
		console.log(menu.style.width)
	}
	else
		{
			width = windowWidth-50 -200;
			height = windowHeight-50;
			board.canvas.width = windowWidth-50 -200;
			board.canvas.height = windowHeight-50;
			menu.style.width = oneninety.toString + "px";
			menu.style.height = height.toString() +"px";
			console.log(windowHeight-50)
			console.log(menu.style.height)
			console.log(menu)
		}
	width = board.canvas.width-edge;
	height = board.canvas.height-edge;
}

screenResize();


var fruit = []
var actors = []
actors.push(fruit)
var count = 0
var countMax = 600
var interval = 50
var fontSize = 16;
var play = false
var nomPic = document.getElementById("nompic")
var neonGreen = "#88FF88"
var borderGreen = "#2c2"
var euclidian = false;
var foodIncrease = 0;
var countdown = true;
var countdownBonus = .125;
var snackCounter = 0;
var pause = !play
var moveSpeed = 10;
var size1 = objectSize;
var size2 = objectSize;
var movingFruit = false;
var wildColoredFruit = false;
var fruityRainbow = ["Radical Red","#FF355E",
"Wild Watermelon","#FD5B78",
"Outrageous Orange","#FF6037",
"Atomic Tangerine","#FF9966",
"Neon Carrot","#FF9933",
"Sunglow","#FFCC33",
"Laser Lemon","#FFFF66",
"Unmellow Yellow","#FFFF66",
"Electric Lime","#CCFF00",
"Screamin' Green","#66FF66",
"Magic Mint","#AAF0D1",
"Blizzard Blue","#50BFE6",
"Shocking Pink","#FF6EFF",
"Razzle Dazzle Rose","#EE34D2",
"Hot Magenta","#FF00CC",
"Purple Pizzazz","#FF00CC"]

option1 = function(){
	wildColoredFruit = !wildColoredFruit
}

option2 = function(){
	foodIncrease +=1;
	foodIncrease %=2;
}

option3 = function(){
	countdown = !countdown;
}

/*
*
*
*
Swipe Detector
*
*
*
*/
try{
	var swipedetector = new Hammer(canvas);
	swipedetector.get('pan').set({direction:Hammer.DIRECTION_ALL});

	swipedetector.on("panleft panright panup pandown", function(ev) {
	    var a;
	    if (ev.type == "panup"){
	    	a =119;
	    }
	    if (ev.type == "panleft"){
	    	a = 97;
	    }
	    if (ev.type == "panright"){
	    	a = 100;
	    }
	    if (ev.type == "pandown"){
	    	a = 115;
	    }
	    keyEventHandler(new fakeEvent(a));
	    console.log(ev.type);
	});
}
catch(err) {
	console.log("Hammer the js package isn't loading. Error caught: ",err)
}

/*
*
*
*
class constructors
*
*
*
*/

// Fruit and your snake are of this class
class actor {
	constructor(name,cords,symbol,size,v = new cord(0,0)){
		this.name = name;
		this.cords = cords;
		this.symbol = symbol;
		this.size = size;
		this.v = v;
		this.move = function(){
			var vel = this.v;
			for (var c in this.cords){
				var cord1 = this.cords[c] 
				cord1.x += vel.x
				cord1.y += vel.y
			}
		}
	}
}
// This is used anytime one is refering to coordinates
//	or direction!
class cord {
	constructor (x,y){
		this.x = x;
		this.y = y;
		this.dup = function(){
			return new cord(this.x,this.y)
		}
		this.isSame = function(cord2){
			if (this.x == cord2.x && this.y == cord2.y){
				return true;
			}
			return false;
		}
	}
}

var rectIntersect = function(cord1, size1, cord2, size2){
	var left1 = cord1.x;
	var right1 = cord1.x+size1;
	var top1 = cord1.y;
	var bottom1 = cord1.y +size1;
	var left2 = cord2.x;
	var right2 = cord2.x+size2;
	var top2 = cord2.y;
	var bottom2 = cord2.y +size2;
	if (left1 < right2 &&
		right1 > left2 &&
		top1 < bottom2 &&
		bottom1 > top2){
		return true;
	}
	return false;
}


// these are three tests to see if everything is working right!
//var fruit1 = new actor('fruit',[new cord(0,0)],"blue", size1)
//actors[1].push(fruit1)
//console.log(-7%3)


/*
*
*
*		Snake Construction (called heroine)
*
*
*/

// Wala! Our Protagonist appears! Along with a delightful snack!
var heroine = new actor('heroine',[new cord(0+size1,height-size1)],neonGreen,size1, new cord(0,-moveSpeed))
// oldDir is used periodically to look at the last
//	direction your snake was headed
var oldDir = new cord(0,0)

// She moves by adding a new cord for where her head is going, 
//	and removing the furthest back cord where her tail was
//	this saves a lot of processing, !!!BUT!!! it also means that
//	the speed must always be equal to or greater than the snakes body
heroine.moveEuclidian = function(){
	oldDir = this.v
	var body1 = this.cords[0]
	var head = body1.dup()  /// issue this is refferencing head, but we just want its properties
	head.x += this.v.x
	head.y += this.v.y
	this.cords.splice(0,0,head)
	this.cords.pop()
}
heroine.moveNonEuclidian = function(){
	oldDir = this.v
	var body1 = this.cords[0]
	var head = body1.dup()  /// issue this is refferencing head, but we just want its properties
	head.x += this.v.x + width -10
	head.x %= width-10
	head.y += this.v.y + height -10
	head.y %= height-10
	this.cords.splice(0,0,head)
	this.cords.pop()
}
if(euclidian){
	heroine.move = function() {
		this.moveEuclidian()
	}
}
else{
	heroine.move = function() {
		this.moveNonEuclidian()
	}
}
// Yes! I know! This actually adds new snacks to the front of your snake
//	will anyone ever know? (from playing that is, obvi you&I know)
heroine.eat = function(nom){
	var head = this.cords[0]
	//the new spot goes in the direction you're going (as a unit vector) multiplied by the size of your bod
	var addition = new cord(head.x + this.v.x/moveSpeed*this.size, head.y + this.v.y/moveSpeed*this.size)	
	this.cords.splice(0,0,addition)
	
	
	fruit.splice(fruit.indexOf(nom),1)
	
	snackCounter = snackCounter+1
}
// Adding your Snake to the list of actors (or actresses as the case may be!)
actors.splice(0,0,[heroine])


fruitMaker = function(){
	var place = new cord(Math.floor(Math.random()*(width - 2*size2)/10)*10 + size2, Math.floor(Math.random()*(height - 2*size2)/10)*10+size2)
	var color = "blue"
	//weird fruit colors ^-^
	color = fruityRainbow[Math.floor(Math.random()*fruityRainbow.length/2)*2+1];
	var fruit = new actor('fruit',[place],color,size2)
	actors[1].push(fruit)
}

fruitMaker()
fruitMaker()
//actors[0][0].eat(actors[1][0])


// Event Simulator
var fakeEvent = function(key){
	this.which = key;
}


// any key presses are handled here
keyEventHandler = function(event){
	var key = event.which
	var h = actors[0][0];
	switch(key){
		case 119: 
		if (!oldDir.isSame(new cord(0,moveSpeed))){
			h.v = new cord(0,-moveSpeed); 
		}
		break;
		case 115: 
		if (!oldDir.isSame(new cord(0,-moveSpeed))){
			h.v = new cord(0,moveSpeed); 
		}
		break;
		case 97:
		if (!oldDir.isSame(new cord(moveSpeed,0))){
			h.v = new cord(-moveSpeed,0); 
		}
		break
		case 100:
		if (!oldDir.isSame(new cord(-moveSpeed,0))){
			h.v = new cord(moveSpeed,0); 
		}
		break
		case 112:
		if (play){
			play = false;
			document.getElementById("pause_menu").style.zIndex = "1";
		}
		else {
			play = true;
			document.getElementById("pause_menu").style.zIndex = "-1";
		}
		pause = !play
		break
		default: 
		break;
		console.log('event handled: ' + h.v)
	}
}


// gameboard clicks are handled here
clickEventHandler = function(event){
	var click = event
	console.log(click.clientX, click.clientY);
	switch(click){
	}
}


post = function(){
	document.getElementById("score").innerHTML = "Score: " + snackCounter;
	document.getElementById("time").innerHTML = "Time: " + Math.floor(countMax*interval/250-count*interval/250)


	//drawing the game board
	board.beginPath();
	board.rect(edge,edge,width-edge,height-edge);
	board.closePath();

	board.lineWidth = edge*2;
	board.strokeStyle = borderGreen;
	board.stroke();

	board.fillStyle = "#000";
	board.fill();


	//setting relivant variables
	var herione = actors[0][0]
	var head = herione.cords[0]
	var fruit = actors[1]
	// check if a fruit is eaten, resolve if do, draw if not

	let f = 0
	while (f < fruit.length){

		var nom = fruit[f]
		f = f+1
		var cords = nom.cords
		for (var c in cords){
			// wait, how many cordinates are there in cords for just one fruit? 
			// ...This second for is unhelpful, there's always just one thing in it.
			var cord1 = cords[c]  
			if (rectIntersect(head, heroine.size, cord1, nom.size)){ 
				herione.eat(nom)
				fruitMaker()

				var n = 0
				// optional increasing amount of food after each snack caught
				while (n < foodIncrease){
				fruitMaker()
				n = n +1
				}

				//optional adding time to the timer
				if (countdown)
				{
					countMax= countMax - count + countMax*countdownBonus
					count = 0
				}

				f = 0
			}
			else{
				if (!wildColoredFruit){
					board.fillStyle = "blue"
				}
				else{
					board.fillStyle = nom.symbol					
				}
				board.fillRect(cord1.x+edge, cord1.y +edge, nom.size, nom.size)
				board.drawImage(nomPic, cord1.x +edge,cord1.y+edge,nom.size,nom.size)
			}

		}
	}
	/*debugging statement
	for (var c in heroine.cords){console.log('cord'+c+":",heroine.cords[c].x, heroine.cords[c].y)}
	*/
	//print out our heroine's movement
	for (var c = 0; c < heroine.cords.length; c++){
		var cord1 = herione.cords[c] 
		for (var c2=0; c2 < heroine.cords.length; c2++){
			var cord2 = heroine.cords[c2];
			if (rectIntersect(cord1, heroine.size, cord2, heroine.size) && c != c2){
				play = false
			}
		}
		board.fillStyle = heroine.symbol
		board.fillRect(cord1.x + edge,cord1.y+edge,herione.size,herione.size)
	}
	if (euclidian){
		if (head.x <=0 || head.x >= width || head.y <=0 || head.y >= height){
			console.log("Game Over")
			play = false
			//removes most of any parts of your snake that pass through the right wall
			board.beginPath()
			board.strokeStyle = "black";
			board.moveTo(width,0);
			board.lineWidth = edge;
			board.lineTo(width,height);
			board.stroke();
		}
	}
}

update = function(){
	if(movingFruit){
		for (var a in actors){
			var nouns = actors[a]
			for (var n in nouns){
				var noun = nouns[n]
				noun.move()
			}
		}
	}
	else{
		heroine.move()
		}
		if (countdown){
		count ++
		if(count*interval >countMax*interval){
	//		count = 0
	//		fruitMaker()
			play = false
			count --
		}
	}
}

/*
for(var x = 0; x<15; x++){
	fruitMaker()}
	*/

post()


playgame = function(){
	setInterval(function(){
		if(play){
			update(); 
			post();
			}
		else if (pause)
		{
			post();
		}
		else{
			document.getElementById("pause_menu").innerHTML = "<h3> Game Over </h3> <p> Please refresh your page to play again... or experiment with the pause button...</p>"
			document.getElementById("pause_menu").style.zIndex = "1";
			}
		} ,interval)
}

playgame();


/*
**
**
**		To Do:
**	0: Menu of options (with phone buttons) & way to restart
**	1: Make circle collision!
**	2: Test how much alternate move system slows snake
**	3: Make snake head and snacks circles
**	4: Make circle & flat collision! (snake & walls)
**	5: Resizable
**	6: cute opening animations and menu animations? collapsable clicking for menue?
**	7: A (better) way to play on a phone? (best so far is play area, touch keys beneath, and hamburger at top right or bottom center)
**
**
**
** 		Variations:
**	1: Countdown Snake: Everybody's got to eat! There's 
	a timer counting down and I hope you find a snack in
	time!
**	2: Limited Countdown Snake: timer is counting down and
	you have a little less time each nom (but time
	stacks)
**	3: Increasing Food Snake: more and more noms fill the
	screen as you catch them!
**	4: Non-Euclidian Snake: if you go off the edge 
	you end up on the other side.
**	5: Runaway Snacks Snake: the blips are running
	away from you! There are various speeds and intelegence
	levels. (what if in some cases you actually need to trap them?
		// to do this add a v to fruit maker and some thought to
		//	update for lv.2
**	6: Assorted themes! Other than glow in the dark you might
	offer little doodle-y bugs and such
**
**
*/


</script>
</html>