Score and lots of fixes. Audio works better, more drops on the board at the same time, and more.

css/styles.css

@@ -6,7 +6,7 @@
 
 html, body {
 	height: 100%;
-	background-color: #333;
+	background-color: black;
 }
 
 .error {
@@ -34,6 +34,20 @@ html, body {
 	-moz-transition: all .1s ease;
 }
 
+#score {
+	position: absolute;
+	float: left;
+	top: 6%;
+	left: 4%;
+	font-size: 20pt;
+	color: #333;
+	text-align: center;
+	z-index: 101;
+	transition: all .5s ease;
+	-webkit-transition: all .5s ease;
+	-moz-transition: all .5s ease;
+}
+
 #popup-text {
 	position: absolute;
 	float: left;

index.html

@@ -14,7 +14,11 @@
 		<canvas id="gameCanvas">
 			<p class="error">Your browser does not support HTML5 Canvas!</p>
 		</canvas>
-		<p id="popup-text">Ready?<br><small><small>Press Space, ESC or P to begin. Those keys also pause/unpause.</small></small></p>
+		<p id="score"></p>
+		<p id="popup-text">Ready?
+			<br><small><small>Press Space, ESC or P to begin. Those keys also pause/unpause.</small></small>
+			<br><br><small><small><small>Notice: If you resize the window, you'll have to reload the page!</small></small></small>
+		</p>
 		<div id="overlay"></div>
 	</body>
 </html>

js/game.class.js

@@ -26,7 +26,14 @@ var Game = function() {
 		death: new Audio("audio/death3.wav"),
 		speedUp: new Audio("audio/speedUp.wav"),
 		speedDown: new Audio("audio/speedDown.wav"),
-		pause: new Audio("audio/pause.wav")
+		pause: new Audio("audio/pause.wav"),
+		start: new Audio("audio/test.wav")
+	}
+	for (var sound in this.sounds) {
+		if (this.sounds.hasOwnProperty(sound)) {
+			this.sounds[sound].load();
+			console.log('Loaded: ' + this.sounds[sound].src);
+		}
 	}
 	this.canvas = new Canvas(this, "gameCanvas");
 	this.initGrid();
@@ -40,6 +47,7 @@ Game.prototype.initGrid = function() {
 }
 
 Game.prototype.start = function() {
+	//this.sounds.start.play();
 	this.paused = false;
 	this.started = true;
 	/* var parent = this;
@@ -80,6 +88,7 @@ Game.prototype.start = function() {
 
 Game.prototype.update = function() {
 	this.snake.move();
+	this.writeScore();
 	this.resources.checkDropExpiration();
 }
 
@@ -89,10 +98,12 @@ Game.prototype.togglePause = function() {
 	if (this.paused) {
 		//clearInterval(this.gameLoop);
 		this.canvas.canvas.style.filter = "blur(40px)";
+		this.canvas.canvas.style.WebkitFilter = "blur(40px)";
 		document.getElementById("popup-text").textContent = "Paused!";
 		document.getElementById("popup-text").removeAttribute("class");
 	} else {
 		this.canvas.canvas.style.filter = "blur(0px)";
+		this.canvas.canvas.style.WebkitFilter = "blur(0px)";
 		document.getElementById("popup-text").setAttribute("class", "hidden");
 		if (!this.started) {
 			this.start();
@@ -109,7 +120,6 @@ Game.prototype.applyEffect = function(effect) {
 			this.snake.embiggen(1);
 			break;
 		case ('death'):
-			this.sounds.death.play();
 			this.end();
 			break;
 		case ('faster'):
@@ -130,11 +140,21 @@ Game.prototype.applyEffect = function(effect) {
 	}
 }
 
+Game.prototype.writeScore = function() {
+	document.getElementById("score").textContent = this.score + " points";
+}
+
 Game.prototype.end = function() {
+	this.sounds.death.play();
 	this.gameover = true;
 	clearInterval(this.gameLoop);
 	this.canvas.canvas.style.transition = "all 1s ease-out";
+	this.canvas.canvas.style.MozTransition = "all 1s ease-out";
+	this.canvas.canvas.style.WebkitTransition = "all 1s ease-out";
 	this.canvas.canvas.style.filter = "blur(20px)";
-	document.getElementById("popup-text").textContent = "Game over!";
+	this.canvas.canvas.style.WebkitFilter = "blur(20px)";
+	document.getElementById("score").style.filter = "blur(20px)";
+	document.getElementById("score").style.WebkitFilter = "blur(20px)";
+	document.getElementById("popup-text").innerHTML = "Game over!<br><br><small>Score: " + this.score + "</small>";
 	document.getElementById("popup-text").removeAttribute("class");
 }

js/resources.class.js

@@ -4,7 +4,7 @@
 var Resources = function(game) {
 	this.game = game;
 	this.droprateModifier = 5;
-	this.maxDrops = 3;
+	this.maxDrops = 5;
 	this.types = [
 		'food',
 		'food',
@@ -69,7 +69,7 @@ Resources.prototype.checkDropExpiration = function() {
 }
 
 Resources.prototype.dropRandom = function() {
-	if (!this.game.paused) {
+	if (!this.game.paused && !this.game.gameover) {
 		if (this.locations.length < this.maxDrops) {
 			var randX = this.getRandomInt(0, this.game.grid.width - 1);
 			var randY = this.getRandomInt(0, this.game.grid.height - 1);

js/snake.js

@@ -1,6 +1,7 @@
 var init = function () {
 	var game = new Game();
 	game.canvas.canvas.style.filter = "blur(40px)";
+	game.canvas.canvas.style.WebkitFilter = "blur(40px)";
 	game.canvas.drawAll();
 	
 	setTimeout(function(){