diff --git a/css/styles.css b/css/styles.css index 82df999..a0238ce 100644 --- a/css/styles.css +++ b/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; diff --git a/index.html b/index.html index bf85aa0..b211c6c 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,11 @@

Your browser does not support HTML5 Canvas!

- +

+
\ No newline at end of file diff --git a/js/game.class.js b/js/game.class.js index 6c23a52..bed3c2e 100644 --- a/js/game.class.js +++ b/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!

Score: " + this.score + ""; document.getElementById("popup-text").removeAttribute("class"); } \ No newline at end of file diff --git a/js/resources.class.js b/js/resources.class.js index 31ae847..2b8097f 100644 --- a/js/resources.class.js +++ b/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); diff --git a/js/snake.js b/js/snake.js index 99b74f8..833f683 100644 --- a/js/snake.js +++ b/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(){