diff --git a/html/tasks/chapter_10/snake/oppgave.html b/html/tasks/chapter_10/snake/oppgave.html index 40fb8d5..885f9e4 100755 --- a/html/tasks/chapter_10/snake/oppgave.html +++ b/html/tasks/chapter_10/snake/oppgave.html @@ -16,6 +16,12 @@ + score: Highscore: +
+ + + +
diff --git a/html/tasks/chapter_10/snake/script.js b/html/tasks/chapter_10/snake/script.js index aaf8794..d3aecc8 100755 --- a/html/tasks/chapter_10/snake/script.js +++ b/html/tasks/chapter_10/snake/script.js @@ -1,26 +1,27 @@ -// @ts-check - /* Initialize variables */ const pixelSize = 20; //Cannot be odd -const pixelAmount = 20; +let pixelAmount = 20; +let score = 0; +if (localStorage.highscore) { + var highscore = localStorage.highscore; //TODO: global let inside if statement? +} else { + highscore = 0; +} /* Register HTML DOM elements by variables */ const canvas = document.getElementById('game'); -const game = canvas.getContext('2d'); -const startButton = document.getElementById('start'); - -/* Add event listeners */ -document.addEventListener('keydown', updateDirection, false); -startButton.addEventListener('click', gameLoop, false); +const ctx = canvas.getContext('2d'); +const startButton = document.getElementById('start'); //TODO: Add canvas size selector, score, higscore, +const pixelAmountInput = document.getElementById('pixelAmount'); +const pixelAmountForm = document.getElementById('pixelAmountForm'); /* Initialize HTML */ canvas.style.display = 'block'; -game.canvas.width = game.canvas.height = pixelSize * pixelAmount; +ctx.canvas.width = ctx.canvas.height = (pixelAmount + 1) * pixelSize; canvas.style.backgroundColor = '#ffffff'; /* Snake object */ const snake = { - speed: 5, //in FPS direction: 'right', color: '#00ff00', tail: [ @@ -32,21 +33,22 @@ const snake = { /* Draw the snake by the tail array */ draw() { - game.fillStyle = this.color; + ctx.fillStyle = this.color; + + const clearPosition = this.tail.pop().map(point => point * pixelSize); + ctx.clearRect(clearPosition[0], clearPosition[1], pixelSize, pixelSize); for (let tailPoint = 0; tailPoint < this.tail.length; tailPoint++) { /* Correct tailpoint x and y to actual size */ const realPosition = this.tail[tailPoint].map(point => point * pixelSize); - game.fillRect(realPosition[0], realPosition[1], pixelSize, pixelSize); + ctx.fillRect(realPosition[0], realPosition[1], pixelSize, pixelSize); } }, /* Generate the next tail array */ updateTail() { - const realPosition = this.tail.pop().map(point => point * pixelSize); - game.clearRect(realPosition[0], realPosition[1], pixelSize, pixelSize); - + //Add new point to tail based on snake direction switch (this.direction) { case 'left': this.tail.unshift([this.tail[0][0] - 1, this.tail[0][1]]); @@ -62,46 +64,111 @@ const snake = { break; } }, + + tailCrossing() { + return new Set(this.tail).size !== this.tail.length; //TODO: fix function + }, }; /* Apple object */ const apple = { - position: [20, 20], + position: [Math.floor(pixelAmount / 2), Math.floor(pixelAmount / 2)], color: 'red', /* Generate new coordinates */ - generate() { - this.position.map(() => Math.floor(Math.random() * pixelAmount)); + generatePosition() { + this.position = this.position.map( + () => Math.floor(Math.random() * pixelAmount) //TODO: Don't put the apple on top of the snake + ); + console.debug(`%cApple position: ${this.position}`, 'color: red'); }, /* Draw the apple */ draw() { const realPosition = this.position.map(point => point * pixelSize); - game.fillStyle = this.color; - game.fillRect(realPosition[0], realPosition[1], pixelSize, pixelSize); + ctx.fillStyle = this.color; + ctx.fillRect(realPosition[0], realPosition[1], pixelSize, pixelSize); }, }; -/* Wrapper function for gameloop */ -function gameLoop() { - /* Slow down loop by snake speed*/ +/* Handles everything that happens on the canvas */ +const game = { + fps: 5, + over: false, + + /* Game init function */ + init() { + apple.draw(); + }, + + /* Game loop function */ + loop() { + /* Draw snake */ + snake.updateTail(); + snake.draw(); + + if (JSON.stringify(snake.tail[0]) === JSON.stringify(apple.position)) { + console.debug('Snake ate apple'); + score += 1; + snake.updateTail(); + apple.generatePosition(); + apple.draw(); + } + if ( + snake.tail[0][0] > pixelAmount || + snake.tail[0][1] > pixelAmount || + snake.tail[0][0] < 0 || + snake.tail[0][1] < 0 || + snake.tailCrossing() + ) { + this.over = true; + } + }, +}; + +/* Wrapper function requesting a gameloop */ +function getLoop() { + /* Slow down loop by game fps */ setTimeout(() => { - window.requestAnimationFrame(gameLoop); - gameUpdate(); - }, 1000 / snake.speed); + window.requestAnimationFrame(getLoop); + game.loop(); + + if (game.over) { + console.debug('Game over'); //TODO: Exit game loop properly + + if (score > highscore) { + console.debug('New highcore'); + highscore = score; + window.localStorage.setItem('highscore', highscore); + } + } + }, 1000 / game.fps); } -/* Function that is being run each tick */ -function gameUpdate() { - /* Draw snake */ - snake.draw(); - snake.updateTail(); +/* Add event listeners */ +document.addEventListener('keydown', updateDirection, false); +startButton.addEventListener( + 'click', + () => { + game.init(); + getLoop(); + }, + false +); +pixelAmountForm.addEventListener('submit', updatePixelAmount, false); - if (snake.tail[0] === apple.position) { - } +/* Updates size of canvas */ +function updatePixelAmount(evt) { + evt.preventDefault(); + pixelAmount = parseInt(pixelAmountInput.value); + console.debug('Updated canvas size'); + ctx.canvas.width = ctx.canvas.height = (pixelAmount + 1) * pixelSize; } +/* Clear higscore from localStorage */ +const clearHighscore = () => (localStorage.highscore = 0); + /* Update direction for snake */ function updateDirection(evt) { const key = evt.code; @@ -133,5 +200,7 @@ function updateDirection(evt) { snake.direction = 'down'; } break; + + //TODO: Add pause function } }